これ

Chapter 1 プログレッシブフレームワークVue.js

昔話とか

略

Chapter 2 Vue.jsの基本

2.3 Vueオブジェクト

2.3.1コンストラクタ

Vueインスタンスを変数に代入する理由は？

• $watchでデータの監視が可能
  ハンドラには2つの引数が渡る

  • 0: 新しく設定された値
  • 1: 元の値

var vm = new Vue({/* ... */});
vm.$watch('propertyName', function (newVal, oldVal) {
    // ...
});

2.7 フィルタ(filters)

• 純粋関数でデータを加工

  • 1 arg 1 return

str.replace(/(\d)(?=(\d{3})+$)/g, '$1,');

• テキストの例の正規表現

  • $1は一つ目の括弧 (\d)に対応
  • (?=(\d{3})+$) は先読み肯定
    (\d{3})+$ すなわち 「数字が3の倍数個(3個以上)ぴったり続き、行が終わる」場合のみ、
    その前の(\d)がマッチする ($1に入る)
  • そういう$1を全部$1,に置換する
• 1000000 なら、 1000000 がマッチし、1,000,000 になる

2.8 算出プロパティ(computed)

• read-onlyなプロパティ

  • C++でいうとconst method
  • キャッシュ機構があり、そのために関数的である(thisにのみ依存する)
    ことを期待されているので注意
    Math.random() 等、副作用のある式を入れると、値が更新されないことがある
  • dataと同じようにMustacheやディレクティブ内で展開できる
  • dataと名前被りしたらdataが優先される

2.9 ディレクティブ

• DOM操作を肩代わりしてくれるやつ

• よく使うやつはショートハンドがある

  • v-bind:xxx -> :xxx
  • v-on:xxx -> @on

2.9.3 リストレンダリング(v-for)

こういう感じのやつ

<ul>
  <li v-for="item in items" v-bind:key="item.id">
  </li>
</ul>

• v-bind:keyはパフォーマンス等のためにVue.jsが付与させるらしい。必須

  • なくてもエラーにはならないみたい
  • itemをidentifyできるものである必要あり
• インデクスが欲しいときはこう
  Array.prototype.forEach(func)に渡す関数の引数と同じ順番 (e, i)

<ul>
  <li v-for="(item, index) in items" v-bind:key="item.id">
  </li>
</ul>

2.9.5 フォーム入力バインディング (v-model)

• これぞMVVMって感じのヤツ

• こう書くのはかったるい

  <input type="number"
     @input="item.quantity = $event.target.value"
     :value="item.quantity"
     min="0"
     />

• ので、こう書く

  <input type="number"
     v-model.number="item.quantity"
     min="0"
     />

• v-onの中では$eventでネイティブのEventオブジェクトにアクセスできる

  • event.targetはすなわち<input>要素

• 修飾子がいっぱいあるので暇なときに調べる

  • v-model.lazy
    … inputイベントではなく、changeイベントになる
  • 入力完了後、Enterで発火
  • v-model.number
    … 値を数値にパースしてくれるらしい

2.11 メソッド(methods)

2.11.1 イベントオブジェクト

• dataをmodifyするヤツ

  • 例えばMath.random()とかnew Date()といった副作用のある式を使いたい場合は、
    methodの中で呼び出してdataに格納するのがいいんでしょうね
  • v-onと組み合わせたときの引数の挙動
  • v-on:click=“clicked”
    … 第1引数に$eventが渡る
  • v-on:click=“clicked()”
    … 引数なし
  • v-on:click=“clicked(arg1)”
    … 第1引数にarg1が渡る
  • v-on:click=“clicked($event, arg2)”
    … 第1引数に$event、第2引数にarg2が引数に渡る