kmmkの雑種系日記

学習まとめです。

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 数字1文字
{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-showcssの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:*イベント名*が使用されます。

2.9.5 フォーム入力バインディング

2.10 ライフサイクルフック

2.10.1ライフサイクルフック一覧とフロー

2.10.2 createdフック

2.10.3 mountedフック

2.10.4 beforeDestroyフック

2.11 メソッド

2.11.1 イベントオブジェクト

2.11.2 サンプルでのメソッドの呼び出し