ふりぶろぐ
Web Engineer's Blog
JavaScript

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

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> 

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

まとめ

忘れてしまっていたディレクティブについてまとめました。

どんなディレクティブだったを思い出せれば良いので詳しくは書いていません。

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

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。