2019-10-01から1ヶ月間の記事一覧

基礎からメモ: Vue.js CH3-p96 イベントハンドリング

v-onディレクティブ Vue.js でDOMイベントを受け取るには、v-onディレクティブを使う。 <button v-on:click="イベントハンドラ">クリック</button>

基礎からメモ: Vue.js CH2-p88 テンプレート制御ディレクティブ

テンプレートやコンパイル制御のためのディレクティブ

基礎からメモ: Vue.js CH2-p85 DOMの直接参照

DOMに直接アクセスするには、インスタンス・プロパティの$elと$refsを使う。これらは、ライフサイクルで言うとmounted(インスタンスのマウント後)以降でなければ使えない。

基礎からメモ: Vue.js CH2-p83 外部データ(Json)の取得

外部のJSONファイルに書かれたデータを、Vue.jsのデータとして取り込む。Ajaxライブラリの「axios」を使う。

基礎からメモ: Vue.js CH2-p82 その他繰り返しに関すること

オプションにデータを持たないv-for 数値範囲や配列リテラルを直接v-forに渡すこともできる。

基礎からメモ: Vue.js CH2-p77 リスト要素の削除、更新

リストから特定の要素を削除 配列メソッドのspliceで、特定の要素をリストから削除する。

基礎からメモ: Vue.js CH2-p74 条件分岐を使ったリストの描画、フォームからリストへの要素の追加

条件を使ったクラスの操作 リストの各要素に条件を適用する方法。

基礎からメモ: Vue.js CH2-p70 リストデータの表示と更新

リストデータの表示 リストデータを使って要素を繰り返し表示するには、liタグに対してv-forを使う。

基礎からメモ: Vue.js CH2-p67 テンプレートにおける条件分岐

v-ifやv-showディレクティブを使うと、テンプレートベースで条件分岐させることができる。

基礎からメモ: Vue.js CH2-p65 SVGデータのバインディング

SVGデータをバインディングすることができる。インターフェイス側の属性値とVueインスタンス側のデータの値は連動して変化する。

基礎からメモ: Vue.js CH2-p62 クラスとスタイルのデータバインディング

クラスやスタイルの適用 v-bindを使って、HTMLにクラスやスタイルを適用できる。Vueインスタンスのデータ側に、クラスの適用可否やスタイルの内容を設定しておけば、データ側の変更によってクラスやスタイルの変更ができる。