Vue3 ディレクティブ

Vue ディレクティブ（Directives）は Vue.js のコア機能であり、HTML テンプレート内でv-v- で始まる特殊な属性の形式で用いられ、リアクティブデータを DOM 要素にバインドしたり、DOM 要素に対して何らかの操作を行ったりするために使われます。

Vue ディレクティブはプレフィックスv-v- の付いた特別な HTML 属性であり、HTML タグに追加の機能を与えます。

従来の JavaScript の方法と比較すると、Vue を使用してリアクティブなページを作成するほうがはるかに簡単で、必要なコードも少なくて済みます。

以下は、よく使われる Vue ディレクティブの一部です：

ディレクティブ説明
v-bind Vue インスタンスのデータを HTML 要素の属性にバインドするために使用します。
v-if 式の値に基づいて要素やコンポーネントを条件付きでレンダリングするために使用します。
v-show v-show は Vue.js が提供するディレクティブの一つで、式の値に基づいて要素を条件付きで表示または非表示にするために使用します。
v-for 配列またはオブジェクトのプロパティ値に基づいて、要素やコンポーネントをループしてレンダリングするために使用します。
v-on HTML 要素にイベントリスナーをバインドし、Vue インスタンス内のメソッドや関数をトリガーできるようにするために使用します。
v-model フォームコントロールと Vue インスタンスのデータの間に双方向データバインディングを作成するために使用します。

これらのよく使われるディレクティブに加えて、Vue は v-text、v-html などの他のディレクティブやカスタムディレクティブも提供しており、開発者は DOM 要素をより柔軟に操作することができます。

サンプル

以下は、Vue ディレクティブを使用したいくつかの例です：

使用v-modelディレクティブでフォームデータの双方向バインディングを実装します：

サンプル

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

試してみる »

使用v-bindディレクティブで Vue インスタンスのデータを HTML 要素の属性にバインドします：

サンプル

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

試してみる »

使用v-ifとv-elseディレクティブで式の値に基づいて要素やコンポーネントを条件付きでレンダリングします：

サンプル

<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

試してみる »

使用v-forディレクティブで配列のプロパティ値に基づいて要素やコンポーネントをループレンダリングします：

サンプル

<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

試してみる »

v-on ディレクティブを使用して HTML 要素にイベントリスナーをバインドします：

サンプル

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
  </div>
  <button v-on:click=" lightOn =! lightOn ">オン/オフ</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

試してみる »

以下は、v-showディレクティブを使用した例です：

サンプル

<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">表示/非表示</button>
    <p v-show="showMessage">Hello Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

試してみる »
その他の拡張