Vue.js基本的なディレクティブまとめ

v-bind

HTMLの属性にdataを受け渡すことができる。
省略記法としてv-bind:value="val" => :value="val"と書ける

 <input type="text" v-bind:value="msg" />

v-if

条件分岐によって表示非表示を切り替えることができる

<!-- flag: false -->
<p v-if="flag">falseなら見えない</p>
<p v-if="!flag">trueなので見える</p>

v-show

まだ

v-for

繰り返し処理
v-bindでkeyを指定しないと表示はされるが、エラー吐く

<ul>
  <li v-for="(value, key) in fruits" v-bind:key="key">
    {{ value }}
  </li>
</ul>

v-on

何かの操作をしたときに行う処理を指定することができる

<!-- v-on:イベント名 => @イベント名　と省略可能--> 
<button v-on:click="addCount()">1増やす</button>
{{ count }}

v-model

フォームの値(value)とdataを同期させることができる。

<input type="text" v-model="msg" />
{{ msg }}

v-once

初回だけ評価してあとは静的コンテンツとして扱う

<button @click="changeText()">CLICK</button>
<!-- v-once 初回だけ評価するのでボタン押してもメッセージが変わらない-->
<h1 v-once>{{ msg }}</h1>

v-pre

コンパイルスキップ

<button @click="changeText()">CLICK</button>
<!-- v-pre 処理がskipされるので{{ msg}} が出力される、btn押しても変わらない-->
<h1 v-pre>{{ msg }}</h1>

v-html

マスタッシュ構文中はhtmlタグはそのまま文字列として扱われるがこれを使うことでhtmlタグとして認識させることができる。記述方法に注意。またセキュリティ的な問題を引き起こす可能性があるため使うときは慎重に

<!-- msg "init <span style='color:red;'>message</span>"-->
<h1>{{ msg }}</h1>
<!-- "init <span style='color:red;'>message</span>"-->
<h1 v-html="msg"></h1>
<!-- init message-->

v-cloak

cloack・・・覆い隠すという意味
これを使うことで、コンパイル中の画面の表示崩れを隠すことができる。