Vue.jsで使われるディレクティブは、HTMLタグに特別な機能を追加するためのものです。ここでは、よく使われるいくつかの基本的なディレクティブについて解説します。
- v-bind: 属性をデータと動的に結びつけます。例えば、
v-bind:href="url"は、href属性をVueインスタンスのurlデータプロパティに動的にバインドします。 - v-model: フォーム入力とアプリケーションの状態を双方向にバインディングします。これは、ユーザーが入力フィールドに入力した内容が、Vueインスタンスのデータに自動で更新されるようにするために使用します。
- v-for: リスト表示のためのループ機能を提供します。例えば、
<li v-for="item in items">{{ item }}</li>は、itemsの各要素に対してリストアイテムを生成します。 - v-if、v-else-if、v-else: 条件付きレンダリングを行います。これらのディレクティブは、指定した条件が真の場合にのみ要素をDOMに挿入します。
- v-on: イベントリスナーを要素にアタッチします。例えば、
v-on:click="doSomething"は、クリックイベントが発生したときにdoSomethingメソッドを実行します。 - v-show: 条件によって要素の表示/非表示を切り替えますが、
v-ifと異なり、要素は常にDOMに存在し、displayCSSプロパティのみが変更されます。
これらのディレクティブを利用することで、Vue.jsを使用した開発がより効率的で動的なものになります。
コメント