Vue.jsの基本③（ディレクティブ）

●ディレクティブについて
ディレクティブとは、html内でVue独自の属性を記述することによってDOM操作を行うことができるもの。（htmlのタグの中に書くもの）
1）v-on
DOM要素に対してイベントを指定するディレクティブ。
※例えば v-on:click〜 は、@click〜に省略可能。

#app内
<button type="button" v-on:click="hoge">クリックしてね！</button>
-------------------------------------
new Vue({
　　el: '#app',
　　methods:{
　　　hoge: function(){
        alert('クリックされたよ');
　　}
　}
})

2）v-for
DOM要素に対してforループさせることができるディレクティブ。
v-for=" '個別変数名' in '配列名orオブジェクト名' " 
※実際の記述はシングルクオーテーションは付けないで利用する。

<div id="app" v-for="item in items">{{ item }}</div>
-------------------------------------
new Vue({
　　el: '#app',
　　data:{
　　　　items:[
　　　　　'aa',
　　　　　'bb',
　　　　　'cc',
　　　　　'dd'
　　　　]
　　　}
})

3）v-if、v-show
UIはほぼ同じだが、バインドしたデータがtrueのときは表示されて、falseのときはv-ifはデータ削除、v-showはCSSでdisplay:noneと同じ状態となる。
”v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。”

#app内
<div v-if="age === 20">20歳だよ</div>
<div v-else-if="age === 30">30歳だよ</div>
-------------------------------------
new Vue({
　　el: '#app',
　　data:{
　　　age:20
})

4）v-bind
id、class、style、data〜等html要素に付与する属性値をVueインスタンスのデータ変更に応じて動的に変更する時に使用する。また、例えば 「v-bind:属性名=" "」は、「:属性名=" "」と短縮して入力することが可能。