2019-01-01から1年間の記事一覧
仮想DOMによるデータの更新は非同期に行われるため、更新後のDOMを操作するためにはDOMの更新を待ち受ける仕組みであるnextTickを使用する。
カスタムディレクティブの仕組みを使って、v-bindのようなディレクティブを自作することができる。 ただしデータバインディングと違い仮想DOMではないので、$elや$refsと同様に描画の最適化はされない。
フィルタでテキストの変換処理ができる。 フィルタはローカルまたはグローバルに登録して使用する。ただしthisへのアクセスはできない。
コンポーネントのwatchオプションに、監視するデータの名前と、変化した時に呼び出されるハンドラ関数を定義する。新旧データ比較のために、ハンドラの引数として第一引数に「新い値」、第二引数に「古い値」を受け取れる。
算出プロパティ 算出プロパティはcomputedプロパティに定義した関数で任意のデータを処理するもの。
スクロールイベントを制御する マウントした要素の外ではv-onディレクティブが使えない。スクロールイベントなど window や body でのイベントをVueインスタンスから制御するには、addEventListenerなどを使って工夫する。
v-modelディレクティブ v-modelディレクティブを使って、フォームの入力値や選択値をデータと同期させる(双方向データバインディング)。
キー修飾子 特定のキーが入力された時のみハンドラが呼び出されるようにする。 一般的によく使用されるキーはエイリアスが登録されている。
クリックなどのDOMイベントの振る舞いを制御する修飾子
v-onディレクティブ Vue.js でDOMイベントを受け取るには、v-onディレクティブを使う。 <button v-on:click="イベントハンドラ">クリック</button>
テンプレートやコンパイル制御のためのディレクティブ
DOMに直接アクセスするには、インスタンス・プロパティの$elと$refsを使う。これらは、ライフサイクルで言うとmounted(インスタンスのマウント後)以降でなければ使えない。
外部のJSONファイルに書かれたデータを、Vue.jsのデータとして取り込む。Ajaxライブラリの「axios」を使う。
オプションにデータを持たないv-for 数値範囲や配列リテラルを直接v-forに渡すこともできる。
リストから特定の要素を削除 配列メソッドのspliceで、特定の要素をリストから削除する。
条件を使ったクラスの操作 リストの各要素に条件を適用する方法。
リストデータの表示 リストデータを使って要素を繰り返し表示するには、liタグに対してv-forを使う。
v-ifやv-showディレクティブを使うと、テンプレートベースで条件分岐させることができる。
SVGデータをバインディングすることができる。インターフェイス側の属性値とVueインスタンス側のデータの値は連動して変化する。
クラスやスタイルの適用 v-bindを使って、HTMLにクラスやスタイルを適用できる。Vueインスタンスのデータ側に、クラスの適用可否やスタイルの内容を設定しておけば、データ側の変更によってクラスやスタイルの変更ができる。
v-onディレクティブを使って、ボタンクリックでデータを更新するサンプル。
v-bindディレクティブで使える修飾子
Mustache記法を使う際の注意点をいくつか。
Vueインスタンスのdataに、配列を使用した例。
Vue.js のキモはリアクティブデータ Vueインスタンスのdataには、文字列、配列、オブジェクトなどを登録できる。
組み込みコンポーネントの<transition>を使えば、CSSトランジションやアニメーションを簡単に適用できる。</transition>
表示内容をテンプレートベースで分岐させるには、v-ifディレクティブを使う。
フォーム入力とVueインスタンスを関連付けるには、v-modelディレクティブを使う。
ボタンクリックなどのHTMLのイベントと、Vueインスタンスを関連付ける。
配列リストをv-forで繰り返し表示する。