こんにちは、ryohei(@ityryohei)です!

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

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

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

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

ディレクティブとは?

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

ディレクティブ一覧

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

ディレクティブの使用例

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

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.31883

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.31883

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.31883

v-if

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

またv-if以降であればv-elsev-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.31883

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.31883

v-on

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

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

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

修飾子内容
.stopevent.stopPropagation()を設定する
.preventevent.preventDefault()を設定する
.capturecaputureをtrueに設定する(EventTarget.addEventListener()参照)
.self対象の要素がイベント発生源の場合にのみイベントを実行する
.{keyCode | keyAlias}指定のキーが押されたときのみイベントを実行する
.nativeコンポーネントのルート要素のイベントを実行する
.once1回のみイベントを実行する
.leftマウスの左クリック時にのみイベントを実行する(2.2.0~)
.rightマウスの右クリック時にのみイベントを実行する(2.2.0~)
.middleマウスの中央クリック時にのみイベントを実行する(2.2.0~)
.passivepassive: 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.31883

v-bind

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

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

修飾子説明
.prop属性の代わりにDOMプロパティを使用する
.camel属性名をキャメルケースに変換する(2.1.0~)
.syncv-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.31883

v-model

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

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

種類v-bind:v-on:
input、textareavalueinput
checkbox、radiocheckedchange
selectvaluechange

実際に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.31883

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.31883

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.31883

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.31883

最後に

本記事でご紹介した内容は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のディレクティブ一覧と使用例のご紹介でした!