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