ディレクティブの備忘録
※今後も更新予定
ディレクティブ
条件分岐やループ処理など、複雑な処理をViewに組み込むVueの命令のこと。
-
v-xxxの形式でViewに埋め込んで処理を書く
ディレクティブ一覧
v-text
文字列をテンプレートに埋め込む。
<p v-text="name"></p> <!-- データオブジェクトの name を pタグ内に埋め込む -->
※下記と同じ出力がされるためどちらの記法でもよいが、アプリ内ではどちらかに統一すること。
<p>{{ name }}</p> <!-- 通常のマスタッシュ構文 -->
v-pre
構文を無効にする。
デリミタをそのまま出力したい時などに使用する。
<p v-pre>{{ name }}</p> <!-- 画面では {{ name }} がそのまま出力される -->
v-bind
属性値にJavascript式を埋め込む。
<a v-bind:href="url">リンク</a> <!-- データオブジェクト下のurlを埋め込む -->
頻繁に利用されるため、省略構文も用意されている。
本来の属性名の頭に : を付与して表現する。
<a :href="url"></a>
v-on
イベントとそのイベントが発生した際に実行する処理を定義する(イベントリスナーの設定)
イベントを設定したいタグに v-on:イベント名="イベント発生時に呼び出す処理" の形で属性を付与する。
<!-- pタグクリック時にVueインスタンスのmethodsオブジェクト内に定義されたonclickmethodが呼ばれる -->
<p v-on:click="onclickmethod">クリック</p>
v-on も頻繁に使用されるため省略形が存在する。
v-on: を @ に置き換えても同様の結果が得られる。
<p @click="onclickmethod">クリック</p>
また、イベントとして設定できるのはJavascriptで定められている下記リファレンス内のイベントのみ。
https://developer.mozilla.org/en-US/docs/Web/Events
v-model
指定したdataオプションのオブジェクトを監視し、同期を行う。
例えば、次のようなHTMLとVueオブジェクトがあるとする。
<testInput v-model="name" />
<p>{{ name }}</p>
Vue.component('testInput', {
// 省略
});
new Vue({
el: "#app",
data: {
name: "Alice"
}
});
この状態でHTMLを描画し、inputのテキストを更新することでdata.nameの値も更新される。
更新がかかるとpタグ内のnameについても値が変更される。
このようにして監視を行い、更新があった場合にそれを参照している箇所についても同期をとることができる。
上記のように、テンプレート(HTML)とdataオプションのオブジェクト間でデータの同期をとることを双方向バインディングと言う。
また、v-modelはv-onとv-bindの組み合わせのシンタックスシュガーであり、次の二つのinputタグの記述方法は同義となる。
<testInput v-model="name" />
<testInput v-bind:value="name" v-on="name=$event">
参考
・API(ディレクティブ) 日本語ドキュメント ※バージョンが2系より前
https://jp.vuejs.org/v2/api/#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96
・API(ディレクティブ) 英語ドキュメント ※3系にも対応
https://v3.vuejs.org/api/directives.html
・Javascript イベント一覧
https://developer.mozilla.org/en-US/docs/Web/Events
・これからはじめる Vue.js 実践入門 (山田祥寛 著)
https://amazon.co.jp/dp/4815601828