Vue.jsの始め方#3(html/css/js/jQueryがある程度わかる方向け)
前回の記事はこちら
Vue.jsの始め方#2(html/css/js/jQueryがある程度わかる方向け)
今回もディレクティブについて紹介します。
条件分岐 v-show
index/html
<divid="app"><pv-show="toggle">
Hello
</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script>index.js
varapp=newVue({el:'#app',data:{toggle:false}})
v-ifと結果は同じですが非表示にする際に
CSSのdisplay:noneを使用している点が異なります。
DOMの書き換えがない分v-ifに比べて
描画コストがかからないことがポイントです。
繰り返しの描画 v-for
index/html
<divid="app"><ol><liv-for='color in colors'>{{color}}</li></ol></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script>index.js
varapp=newVue({el:'#app',data:{colors:['Red','Green','Blue']}})
v-forディレクティブで配列colorsの中身を１つずつ取り出し
colorという変数に格納してマスタッシュ構文で描画しています。
colorsやcolorの名称は任意でつけられますが
単数複数を統一することでコードの視認性が担保できます。
オブジェクトの繰り返し v-for
index/html
<divid="app"><ul><liv-for="value in user">{{value}}</li></ul><hr><ul><liv-for="(value,key) in user">{{key}} : {{value}}</li></ul><hr><ul><liv-for="(v,k) in user">{{k}} : {{v}}</li></ul></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script>index.js
varapp=newVue({el:'#app',data:{user:{firstName:'Taro',lastName:'yamada',age:28}}})
v-forを使用してオブジェクトのkeyとvalueを取得して表示しています。
値だけでなくkeｙも取り出すことができます。
v-forの中のvalueとkeyには任意の名前をつけることができますが
順番はvalue,keyとなりますので気をつけましょう。
イベントの基本 v-on
ボタンを押したら現在時刻を表示するプログラムを記述してみます。
index/html
<divid="app"><buttonv-on:click="onclick">
Click
</button><p>{{ now }}</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
"></script>index.js
varapp=newVue({el:'#app'data:{now:'',},methods:{onclick:function(){this.now=newDate().toLocaleString();}}})実行結果
このようにv-onディレクティブでonclickメソッドを呼び出して
クリックでnowの中身を表示しています。
onclick部分は任意の名前に変更可能です。
次回は双方向データバインディングです。
Vue.jsの始め方#4(html/css/js/jQueryがある程度わかる方向け)