勉強日記

チラ裏

Vue.js入門 基礎から実践アプリケーション開発まで Chapter1-2

gihyo.jp

これ


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が引数に渡る