はじめに
Vue.jsで使用する基本的なディレクティブをまとめました。
Vue.js v3.0の公式ドキュメントを参考としています。
V-onやV-bindは様々な使用法があるため、詳細は今後の記事で書きます。
V-text
<span v-text="message"></span>
<!-- 両者同様 -->
<span>{{ message }}</span> Hello Vue!
以下のように文章の一部をプロパティで表示したい場合は”Mustache” 構文(二重中括弧)を利用することが推奨されています。
<span>Message: {{ message }}</span>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
});
V-html
DOM 要素の内側を innerHTML として書き換えます。
v-html には XSS の危険性があるため信頼できるコンテンツだけに利用します。
<div v-html="html"></div>
var app = new Vue({
el: '#app',
data: {
html: 'Hello <strong style="color: red">Vue!</strong>',
},
});
V-show
参照する値が true として評価され場合は表示し、false として評価される場合は display:none 等のスタイルが付いて非表示になります。
<h1 v-show="hello">Hello!</h1>
const greeting = new Vue({
el: '#app',
data: {
hello: 1,
},
});
greeting.hello = 1; // Hello!
V-if
バインドした値が true 評価であれば DOM 要素が生成され、false であれば破棄されます。
<h1 v-show="hello">Hello!</h1>
const greeting = new Vue({
el: '#app',
data: {
hello: 1,
},
});
greeting.hello = 1;
v-ifとv-showの違い
v-if は初期表示においてfalseの場合、何もしません。条件付きブロックは、条件が最初にtrueになるまで描画されません。
一方、v-showではは要素は初期条件に関わらず常に描画され、シンプルなCSSベースの切り替えとして常に要素が DOM に保存されます。
一般的に、v-ifはより高い切り替えコストを持っているのに対して、 v-showはより高い初期描画コストを持っています。 そのため、切り替えの頻度が低ければv-if切り替えの頻度が高ければv-showという使い分けをします。
V-else
v-ifの後続分岐処理としてv-elseを使用できます。
<div v-if="Math.random() > 0.5">Hello!</div>
<div v-else>Morning!</div>
V-else-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
V-for
このように v-for を用いて numbers の各要素を仮変数（エイリアス）num として取り出して、num を li 要素の内部に入れて表示させることができます。
<div id="app">
<ul>
<li v-for="num in numbers">{{ num }}</li>
</ul>
</div>
new Vue({
el: "#app",
data: {
numbers: [
1, 2, 3, 4, 5
]
});
V-on
DOM要素にイベントリスナーを登録できます。
<div id="app" v-on="click: alert">ClickHere!</div>
new Vue({
el: "#app",
methods: {
alert: function(){
alert('clicked!');}
});
V-bind
aタグのhref属性やimgタグのsrc属性などを動的に変更することができます。
<img v-bind:src="imageSrc" />
<!-- 省略記法 -->
<img :src="imageSrc" />
new Vue({
el: "#app",
data: {
imageSrc: "http://example/example"
V-model
HTMLのinput要素やselect要素などのユーザーが入力した値を受け取りたい場合、v-bindディレクティブを用いることで実現しますが、v-modelを使うことでより簡潔に書くことができます。
<div id="app">
名前をここに入力する
<input v-bind:value="name" v-on:change="name = $event.target.value" />
</div>
<div id="app">
名前をここに入力する
<input v-model:value="name"/>
</div>
new Vue({
el: "#app",
data: {
name: ''
}
})