Vue.js入門 2章
2.6 テンプレート構文
Vue.jsではデータを適用するテンプレート{{}}がある。
データバインディング（データが決まれば、ビューが定義される）の仕組みで動いてる。
2.6.1 テキストへの展開
Vueの基本的なデータバインディングであるHTMLのテキストコンテンツとして展開（Mustache構文）
<p>{{message}}</p>
2.6.2 属性値の展開
2.6.3 JavaScriptの展開
シンプルなデータバインディングより複雑な処理を行える
複雑になりすぎるとテンプレートの見通しが悪くなるので避けたい
<p>{{items[0].price * items[0].quantity}}</p>
2.7 フィルタ
フォーマットの処理を行う。
{{1000 | numberWithDelimiter}}：左側がフィルターの引数になる
html
<div id="app">
<p>use filters {{1000 | numberWithDelimiter}}</p>
</div>
Vue
var vm = new Vue({
[省略]
filters:{
numberWithDelimiter: function(value){
// フィルターする値がない場合に0を返す
if(!value){
return '0'
}
// 処理
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
}
}
})
※正規表現を使用してフィルターをかける」
| 記号 | 内容 |
|---|---|
| \d | 数字１文字 |
| {n} | n回繰り返し |
2.8 算出プロパティ
複雑な処理をするときは、Mustacheで式を展開しないほうが読みやすいよって話。
2.8.1 thisによる参照
インスタンス自身をさす
2.9 ディレクティブ
ディレクティブとはv- で始まる特別な属性
例） v-bind / v-if / v-show / v-for / v-on / v-model /
2.9.1 条件付きレンダリング
基本は、v-if,v-showで表示・非表示の処理を行う。
v-showはcssのdisplayプロパティをいじることで表示編集を実現している。
html
<div id="app"> <p v-show="show"> 購入 </p> </div>
vue.js
new Vue({
el:'#app',
computed:{
show:function(){
//条件式
return
}
}
})
2.9.2 クラストスタイルのバインディング
???
2.9.3 リストレンダリング
v-for="要素" in "配列"が使用されます。
2.9.4 イベントハンドリング
v-on:*イベント名*が使用されます。
