はじめに
こんにちは。
Vue.jsのディレクティブについてアウトプットしていきます！
ディレクティブとは
ディレクティブとは、 DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。
タグに付与する属性のことで、冒頭にv-が付きます。
いくつか紹介していきます。
v-bindディレクティブ
属性へのデータバインディングのときに使用する。
HTML
<div id="app">
<input type="text" v-bind:value="message">
</div>
Vue.js
var app = new Vue({
el: '#app',
message: 'Hello!'
})
v-ifディレクティブ
要素の表示や非表示を「真偽値」を使用して切り替えることができる。
HTML
<div id="app">
<p v-if="toggle">
Hello!
</p>
</div>
Vue.js
var app = new Vue({
el: '#app',
data: {
toggle: true //trueまたはfalse
}
})
trueの場合は、Hello!が表示される。
falseの場合、toggleで指定したpタグはDOMごと非表示になる。
v-showディレクティブ
要素の表示や非表示を「真偽値」を使用して切り替えることができる。
v-ifディレクティブとの違いは、falseの場合CSSのdisplay:noneを適用させる。
HTML
<div id="app">
<p v-show="toggle">
Hello!
</p>
</div>
Vue.js
var app = new Vue({
el: '#app',
data: {
toggle: true //trueまたはfalse
}
})
trueの場合は、Hello!が表示される。
falseの場合、toggleで指定したpタグはdisplay:noneで非表示になる。
v-forディレクティブ
オブジェクトの繰り返しを行う際に使用する。
<タグ名 v-for="変数 in データの配列"> {{変数}} </タグ名>で記述する。
HTML
<div id="app">
<ol>
<li v-for="color in colors"> {{ color }} </li>
</ol>
</div>
Vue.js
var app = new Vue({
el: '#app',
data: {
colors: ['red','blue','yellow']
}
})
配列colorsの値がv-forディレクティブにより繰り返されて、全てリスト表示される。
v-onディレクティブ
クリックイベントなどの処理を行いたい場合に使用する。
HTML
<div id="app">
<button v-on:click="onclick">
Click!
</button>
</div>
Vue.js
var app = new Vue({
el: '#app',
methods: {
onclick: function(){
alert('onclick');
}
}
})
ボタンをクリックするとアラートが呼ばれる処理を実行する。
最後に
ここまでディレクティブについてまとめました。
まだ一部のディレクティブしか紹介しきれていないので、これからもまとめていきたいと思います！