Vue.js入門 基礎から実践アプリケーション開発まで Chapter1-2
これ
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が優先される
- C++でいうとconst method
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
... 値を数値にパースしてくれるらしい
- v-model.lazy
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
が引数に渡る
- v-on:click="clicked"
- 例えば