Vue.jsのディレクティブをざっくり解説！【JavaScript】

今回はこのような質問をいただきました。

Vue.jsのディレクティブについて教えて！

Vue.jsを使うなら覚えておきたいのがディレクティブですよね。

そこで今回はこちらの質問について解説していきます！

ディレクティブって何？

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-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も変更されます。

あとがき

全体的にざっくりと解説してみました。

応用部分でも登場する場面が多いので、忘れないようにしておきたいです。

このディレクティブってどんなときに使うんだっけ？

と思ったときに参考にしてみてください！