UdemyのこちらのコースでVue.jsについて学んでいたのですが、応用的な部分に進むにつれて基礎的な部分を忘れてしまっていたので、覚えるためにもまとめておきます。
Vue JS 2 入門 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)
2019/12/11追記：改めてこちらで解説しました！
ディレクティブとは
Vue.jsにおける特別な属性のことを指します。
属性の最初に “v-” がついたものです。
様々なディレクティブ
v-text
要素のtextContentを更新します。
<p>{{ message }}</p>
<p v-text="message"></p> １行目と２行目は同じ意味になります。
v-once
一度だけ描画させたい場合に使用します。
<p v-once>{{ message }}</p> このような状態でmessageが書き換わったとしても初期の状態が表示されます。
描画を上書きたくない場合に使用します。
v-html
データをHTMLとして出力します。
<p v-html="message"></p> v-textとほとんど同じですが、HTMLタグが効きます。
ユーザが入力した値をv-htmlに入れるとXSSの危険があるので注意。
v-bind
属性の値をデータに対応付けます。
<a v-bind:href="url">Google</a>
<a :href="url">Google</a>１行目と２行目は同じ意味になります。
属性の値として変数を使用したい場合に使用します。
v-on
イベント発生時に特定の処理を行います。
<button v-on:click="number + 1">カウントアップ</button>
<button @click="number + 1">カウントアップ</button>１行目と２行目は同じ意味になります。
イベントを拾って処理したい場合に使用します。
v-model
双方向データバインディングを作成します。
<input type="text" v-model="message">
<h1>{{ message }}</h1>モデルの情報をビュー側から変更できます。
テキストボックスからmessageを変更するとh1のmessageも変更されます。
まとめ
忘れてしまっていたディレクティブについてまとめました。
どんなディレクティブだったを思い出せれば良いので詳しくは書いていません。
応用部分でも登場する場面が多いので、忘れないようにしておきたいです。
ABOUT ME
