3/14 Vue.js 学習議事録

[ryu-sugi]

フィルターとは

・マスタッシュ{{...}}でテンプレートにバインドしたデータが→テキストとして出力される前に→何らかの加工を施すことができる。 ・汎用的フィルタは、Vue.jsが用意しているVue.filter()メソッドを用いて→グローバルスコープへ登録→全てのコンポーネントから利用 　可能になる。 →書式 Vue.filter(フィルター名, 関数オブジェクト); 　→Vue.filter()は、new Vue()実行より前に定義しておく必要がある。 →書式(テキストにバインドしたデータにフィルターを適用) {{プロパティ名 | フィルター名}} →書式(要素の属性にバインドしたデータにフィルターを適用) <要素名 v-bind:属性名="プロパティ名 | フィルター名">

フィルターをローカルスコープに登録する書式

・書式　filters:{フィルター名: 関数オブジェクト}

複数のフィルターを繋げる

・2つ以上のフィルター名を「|」で繋ぐことで連鎖的に適用できる。→適用順序は左から右。 →書式 {{プロパティ名 | フィルター名 | フィルター名 | ...}} →書式(属性にバインドする場合) <要素名 v-bind: 属性名="プロパティ名 | プロパティ名 | プロパティ名">

[ryu-sugi]

算出プロパティとは？(再利用可能な加工済みデータ)

・アプリケーションのデータに基づいて何らかの加工を行った結果を返すプロパティ。 →通常のプロパティ同様に扱える。→その為、マスタッシュ{{...}}で単純な出力の他、配列を返す算出プロパティを定義すると、 「v -for」でリストデータの繰り返し出力にも使える。 →書式(computedオプションの中に定義する) computed: {算出プロパティ名: 関数オブジェクト}

算出プロパティはキャッシュされる ※メソッドは再描画のたびに実行されるが、算出プロパティはキャッシュ(記憶)される。

・算出プロパティがテンプレートやメソッドの中で参照されると、Vueはそのときの値を記憶する(キャッシュするという) →そして、再び同じ算出プロパティが参照されたとき→キャッシュから値が取り出される(参照の度に同じ処理を行うのは無駄が多いから) →しかし、「リアクティブデータ」が更新されるとVueはキャッシュを捨て、算出プロパティを再実行する。 →Vueは算出プロパティとリアクティブデータの依存関係を理解していて、常に監視しているような状態。

[ryu-sugi]

イベントハンドリング(ユーザーの操作を探知する)

イベントとは？

・ボタンやリンクをクリックしたり、マウスのホイールを動かしてページをスクロールさせたり、主にユーザーの雄さをきっかけとしてブラウザの中で発生する出来事を指す。 →イベントの発生をプログラムで探知して何らかの処理を行う事を → イベントハンドラと呼ぶ。

イベントハンドラの登録

・Vueでイベントハンドラを登録するには→「v-on」ディレクティブを使う。 →書式 <要素名 v-on: イベント名="ハンドラ名"> →書式2 {ハンドラ名: 関数オブジェクト}

イベントハンドラが受け取る引数

・イベント発生時、ブラウザは「イベントオブジェクト」という特別なオブジェクトを生成してイベントハンドラ引数で渡す。 →「イベントオブジェクト」の中にはイベントに関する様々な情報が格納されている。 → ☆Vueでは「$event」という変数名でイベントオブジェクトを受け取る☆

[ryu-sugi]

ウォッチャ(データの変更を監視する)

ウォッチャとは？

・データの変更を監視してくれる機能。 →監視したいデータとデータが変更されたときに実行したいハンドラを予め登録しておくことで、Vueが自動的にデータの変更を検知してハンドラを呼び出す。

ウォッチャの登録(watchオプション)

・ウォッチャはwatchオプションに登録する。 → 書式 {監視したいプロパティ名 : 関数オブジェクト} → ハンドラはメソッドなどと同様、関数オブジェクトとして定義する。 →「 第一引数に変化後の値を受け取り」、「第二引数に変化前の値を受け取る」

算出プロパティとウォッチャの使い分け

・ウォッチャは算出プロパティへ置き換え可能。

ウォッチャで算出プロパティを監視

・dataオプションだけでなく、computedオプションの算出プロパティを監視することも可能。