クリックなどの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で繰り返し表示する。

とりあえずテキストのバインディングから

「基礎からメモ」と称して、本を読んで試したことをメモっていく。あくまで自分用なので、初心者でなければこんなこと知ってるよって中身、かつ書籍コードの丸写し感満載。ただ、自分なりにはちょっと分かりにくかったところは、試してみて少しは掘り下げる…

Vue.jsで、親子関係のコンポーネントを作って親から子へデータを渡すってのはpropsで指定する方法とかいろいろ入門書に書かれている。 ただ、ローカルで定義した親コンポーネントの中に子コンポーネントを使っていて、親コンポーネントを使っているVueインス…