フロントエンド

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

vue-directive

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

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

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

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

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

ディレクティブって何?

Vue.jsにおける特別な属性のことです。

属性の最初に “v-” がついたものですね!

様々なディレクティブを紹介!

v-text

要素のtextContentを更新します。

<p>{{ message }}</p> 
<p v-text="message"></p> 

1行目と2行目は同じ意味になります。

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>

1行目と2行目は同じ意味になります。

属性の値として変数を使用したい場合に使用します。

v-on

イベント発生時に特定の処理を行います。

<button v-on:click="number + 1">カウントアップ</button>
<button @click="number + 1">カウントアップ</button>

1行目と2行目は同じ意味になります。

イベントを拾って処理したい場合に使用します。

v-model

双方向データバインディングを作成します。

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

モデルの情報をビュー側から変更できます。

テキストボックスからmessageを変更するとh1のmessageも変更されます。

あとがき

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

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

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

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