はじめに
Vue.jsを触り始めたので、よく使いそうなディレクティブを自分用にまとめました。
※HTML側の表記のみサンプルで記載しています。
環境
- OS: macOS Catalina 10.15.1
- Vue.js: 2.6.10
各ディレクティブの意味と使用例
1.v-bindデータバインディング
【意味】
データバインディングを作成する。
HTMLの各タグにJavaScriptのデータを紐付ける。
【使用例】
<a v-bind:href="url">Click here</a>
<a :href="url">Click here</a>
短縮形が用意されていて、通常は下側の表記を使う。
その他、以下のタグと連携する活用例が多い。
hrefsrcidclasschecked
2.v-onイベント発火
【意味】
HTMLタグに紐付け、イベント発火時に指定したJavaScriptを実行する。
【使用例】
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
例では、ボタンをクリックすると変数counterに1加えられ、pタグ内に反映される。
<div id="example-1">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
短縮系が用意されていて、通常は@clickのように使用する。
その他活用の幅が広く、様々な修飾子が用意されている。
詳細は公式ドキュメント参照。
3.v-model双方向データバインディング
【意味】
双方向データバインディングを作成する。
フォームなどと連携し、リアルタイムで値を反映させたいときに使用する。
【使用例】
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
例では、inputタグで作成されたフォームに入力された文字がpタグ内の{{message}}にリアルタイムで表示される。
その他チェックボックス、セレクトボックスなどにも応用出来る。
4.v-if条件分岐
【意味】
trueなら表示、falseなら表示されない。
【使用例】
<div v-if="hoge">
fuga
</div>
<div v-if="foo">
bar
</div>
例では
-
hogeがtrue =>fugaが表示 -
fooがtrue =>barが表示
また、もう少し複雑な処理であれば
v-else-if
v-else
も組み合わせて条件分岐させることが出来る。
5.v-show表示/非表示
【意味】
v-ifと記法・使用用途は近い。
ただし、実態はCSSでdisplay: noneを付与して非表示にしているだけのでfalseの場合も要素自体は存在する。
【使用例】※v-ifと同様
<div v-show="hoge">
fuga
</div>
<div v-show="foo">
bar
</div>
例では
-
hogeがtrue =>fugaが表示 -
fooがtrue =>barが表示
6.v-for繰り返し処理
【意味】
配列の要素を１つずつ取り出し、取り出す要素が無くなるまで繰り返す。
【使用例】
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
この例では、個数分だけliタグが繰り返し表示される。
vforの後にあるitem in itemsの意味は
-
item=> htmlにある{{item.message}}の中にあるitem -
items=> JavaScriptのdataに入っているitems配列
表やリストに対して使用する例が多い。
おわりに
最後まで読んで頂きありがとうございました
これからガンガン使って慣れていきます！