【Vue.js】ディレクティブ一覧と使用例

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsの理解に欠かせないディレクティブの一覧と簡単な使用例をまじえてご紹介しています。

ディレクティブの種類と簡単な使用例を知りたいんだけど、わかりやすくまとめてくれないかな？

上記の疑問にお答えします。

では、解説していきます。

ディレクティブとは？

ディテクティブは、HTMLテンプレートに記述することができるv-から始まる属性です。主要なディテクティブを次項でご紹介します。

ディレクティブ一覧

下記は、Vue.jsで使用することができる主要なディレクティブです。ページ内リンクとなっておりますので、確認したいディレクティブまでスキップすることができます。

v-text
v-html
v-show
v-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

ディレクティブの使用例

各ディレクティブの概要と簡単に使用例をご紹介しています。

v-text

v-textは、対象のtextContentを更新します。下記の使用例では、v-text属性を持つp要素のtextContentをdataオブジェクトに定義したmessageプロパティの値に更新します。

HTML

<div id="app">
    <p v-text="message"></p>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        message: 'Hello'
    }
})

実行結果

See the Pen v-text｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-html

v-htmlは、対象の要素にinnerHTMLを使用します。innnrHTMLなので、HTMLをそのまま挿入することができます。

HTML

<div id="app">
    <p v-html="message"></p>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        message: '<span>Hello</span>'
    }
})

実行結果

See the Pen v-html｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-show

v-showは、値の真偽によって要素をトグルします。結果がfalseの場合はdisplay: noneにして要素を非表示に、trueであればdisplay: noneは解除され、要素が表示されます。

HTML

<div id="app">
    <p v-show="isActive">Hello</p>
    <button v-on:click="active">toggle!</button>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        isActive: true
    },
    methods: {
        active: function(){
            this.isActive = !this.isActive
        }
    }
})

実行結果

See the Pen v-show｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-if

v-ifは、値の真偽によって要素の描画を行います。trueであれば要素を描画し、falseであれば要素を破壊します。v-showのように要素を非表示にするのではなく、要素を破壊して再構築する点に留意しておきましょう。

またv-if以降であればv-elseやv-else-ifが使用可能です。一般的な制御構文のif文と同じように使用することができます。

HTML

<div id="app">
    <p v-if="isActive">Hello</p>
    <button v-on:click="active">toggle!</button>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        isActive: true
    },
    methods: {
        active: function(){
            this.isActive = !this.isActive
        }
    }
})

実行結果

See the Pen v-if｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-for

v-forは、データに基づいて要素を複数回描画します。v-forの値に(item, index)や(item, key)を指定することで配列のインデックスやオブジェクトのキーを取得することもできます。

※特別属性のkeyについては別の記事で解説予定です。公開までしばらくお待ちください?

HTML

<div id="app">
    <ul>
        <li v-for="item in items">{{ item.text }}</li>
    </ul>
</div>

<!-- 記述例 -->
<div id="app">
    <ul>
        <li v-for="(item, index) in items">{{ index }} {{ item.text }}</li>
    </ul>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        items: [
            { text: 'item1' },
            { text: 'item2' },
            { text: 'item3' },
            { text: 'item4' },
        ]
    }
})

実行結果

See the Pen v-for｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-on

v-onは、イベントを設定するディレクティブです。イベントとイベントハンドラー（イベント発火時に実行する関数やスクリプト）を指定してイベントリスナーに登録します。

※イベントにつきましては別途記事にまとめますのでお待ちを…?

v-onでは下記の修飾子が使用できます。

修飾子	内容
.stop	event.stopPropagation()を設定する
.prevent	event.preventDefault()を設定する
.capture	caputureをtrueに設定する（EventTarget.addEventListener()参照）
.self	対象の要素がイベント発生源の場合にのみイベントを実行する
.{keyCode \| keyAlias}	指定のキーが押されたときのみイベントを実行する
.native	コンポーネントのルート要素のイベントを実行する
.once	1回のみイベントを実行する
.left	マウスの左クリック時にのみイベントを実行する（2.2.0～）
.right	マウスの右クリック時にのみイベントを実行する（2.2.0～）
.middle	マウスの中央クリック時にのみイベントを実行する（2.2.0～）
.passive	passive: trueに設定する（EventTarget.addEventListener()参照）

HTML

<div id="app">
    <button v-on:click="onclick">Click Me!</button>
</div>

Vue

new Vue({
    el: '#app',
    methods: {
        onclick: function(){
            console.log('Thanks!')
        }
    }
})

実行結果

See the Pen v-on｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-bind

v-bindは、HTMLの属性関係を操作するディレクティブです。属性というのはHTMLのタグで使用するidやclass、srcやhrefといったなじみのあるものです。

v-bindでは下記の修飾子を指定することができます。

修飾子	説明
.prop	属性の代わりにDOMプロパティを使用する
.camel	属性名をキャメルケースに変換する（2.1.0～）
.sync	v-modelと同様（2.3.0～）

v-onのclickイベントとv-bindでclassをトグルしてみます。isActiveがtrueの場合にactiveのclassが付与されるようにします。

HTML

<div id="app">
    <p v-bind:class="{ active: isActive }">Hello!</p>
    <button v-on:click="active">toggle!</button>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        isActive: false
    },
    methods: {
        active: function(){
            this.isActive = !this.isActive
        }
    }
})

実行結果

See the Pen v-bind｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-model

v-modelは、form要素のinput、textarea、selectの双方向データバインディングを作成します。要素の種類に応じて自動的に更新してくれます。ようするv-bindとv-onのシンタックスシュガー（ある構文を別の記法で記述できるようにしたもの）です。

こちらに記載の通り、v-modelは、下記と同等の動きをします。

種類	v-bind:	v-on:
input、textarea	value	input
checkbox、radio	checked	change
select	value	change

実際にv-modelを使ってみます。Vue側ではデータオブジェクトだけを用意します。デモを触っていただければおわかりいただけますが、v-modelがよしなに処理してくれます。

HTML

<div id="app">
    <form>
        <fieldset>
            <input v-model="text">
            <p>text: {{ text }}</p>
        </fieldset>
        <fieldset>
            <label><input v-model="checkbox" type="checkbox" value="Vue.js">Vue.js</label>
            <label><input v-model="checkbox" type="checkbox" value="React">React</label>
            <label><input v-model="checkbox" type="checkbox" value="Angular">Angular</label>
            <p>checked: {{ checkbox }}</p>
        </fieldset>
        <fieldset>
            <select v-model="select">
              <option value="">--- 選択してください ---</option>
              <option>Vue.js</option>
              <option>React</option>
              <option>Angular</option>
            </select>
            <p>selected: {{ select }}</p>
        </fieldset>
    </form>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        text: '',
        select: '',
        checkbox: []
    }
})

実行結果

See the Pen v-model｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-pre

v-preは、子要素のコンパイルをスキップして、内容をそのまま出力するディレクティブです。{{ Mustache }}やHTMLのタグをそのまま表示することができます。内部のコンパイルはスキップされますので、長いテキストの出力にも有効です。

HTML

<div id="app">
    <div v-pre>{{ message }}</div>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        message: 'Hello!'
    }
})

実行結果

See the Pen v-pre｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-cloak

v-cloakは、CSSと組み合わせることでVueのコンパイルが終わるまでの間、要素にスタイルを適用することができます。display: noneを指定して読み込み中に表示される{{ Mustache }}を隠したい場合などに有効です。

HTML

<div id="app">
    <div v-cloak>{{ message }}</div>
</div>

<style>
    [v-cloak] {
        display: none;
    }
</style>

Vue

new Vue({
    el: '#app',
    data: {
        message: 'Hello!'
    }
})

実行結果

See the Pen v-cloak｜Vue.js by ryohei (@intotheprogram) on CodePen.

v-once

v-onceは、要素を一度だけ描画するディレクティブです。v-onceが指定された要素および子要素は静的コンテンツとして扱われます。

HTML

<div id="app">
    <input v-model="message">
    <div v-once>{{ message }}</div>
</div>

Vue

new Vue({
    el: '#app',
    data: {
        message: 'Hello!'
    }
})

実行結果

See the Pen v-once｜Vue.js by ryohei (@intotheprogram) on CodePen.

最後に

本記事でご紹介した内容はVue.jsの公式ドキュメントの下記ページに記載されている内容です。より詳細に説明されていますので、一度目を通しておくと良いかもしれません。

https://jp.vuejs.org/v2/api/?#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96

以上、Vue.jsのディレクティブ一覧と使用例のご紹介でした！

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei

ディレクティブとは？

ディレクティブ一覧

ディレクティブの使用例

v-text

HTML

Vue

実行結果

v-html

HTML

Vue

実行結果

v-show

HTML

Vue

実行結果

v-if

HTML

Vue

実行結果

v-for

HTML

Vue

実行結果

v-on

HTML

Vue

実行結果

v-bind

HTML

Vue

実行結果

v-model

HTML

Vue

実行結果

v-pre

HTML

Vue

実行結果

v-cloak

HTML

Vue

実行結果

v-once

HTML

Vue

実行結果

最後に

おすすめの書籍

関連する記事

人気の記事

WordPressで構築したサイトのメンテナンスにお悩みの方