【Vue.js】v-pre, v-once, v-text, v-htmlの使い方

記事内に商品プロモーションを含む場合があります

生徒

v-pre, v-once, v-text, v-htmlってどうやって使うんだろう？何ができるの？

このような疑問の解決記事です。

これらはテンプレート制御ディレクティブと呼ばれ、結論から言うと、以下のような役割があります。

	役割
v-pre	マスタッシュ構文を無効化する
v-once	一度だけバインドし、その後dataの値を変更しても、DOM側では変更されない
v-text	textContentがマスタッシュ構文のみであれば、省略可能
v-html	JavaScriptのinnerHTMLと同義

説明だけだと分かりづらいので、コードとブラウザ挙動を確認していきましょう。

Contents

テンプレート制御ディレクティブ
まとめ

テンプレート制御ディレクティブ

では早速、各々の挙動を確認していきます。

v-preの使い方

v-preは、マスタッシュ構文を無効化します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" v-pre>
          {{someText}}  
        </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    someText: 'Hello my Vue.js app!',
                    url: 'https://jp.vuejs.org'
                }
            }
        })
    </script>
</body>
</html>

ブラウザの挙動はこんな感じ。

dataのmyTextの値がバインドされておらず、マスタッシュ構文が無効化されているのが分かります。

試しにv-preを外すと、マスタッシュ構文が有効になることが分かります。

<!-- <a v-bind:href="url" v-pre> --> 
<a v-bind:href="url">

myTextの値が反映されている

v-onceの使い方

v-onceは一度だけバインドし、その後にdataの値を変更しても、DOM側には反映されなくなります。

    <div id="app">
        <a v-bind:href="url" v-once>
          {{someText}}  
        </a>
    </div>

dataの値を変更しても、DOMが書き換わらない

通常は以下のように、dataの値を変更したら即座に反映されます。

v-textの使い方

v-textは要素のテキストがマスタッシュ構文のみである場合に、それを省略化することができます。

通常

    <div id="app">
        <a v-bind:href="url">
          {{someText}}  
        </a>
    </div>

ブラウザの挙動

v-textを使うと

    <div id="app">
        <a v-bind:href="url" v-text="someText">
            
        </a>
    </div>

ブラウザの挙動

表示は変わりません。書き方の違いです。

v-htmlの使い方

v-htmlは、JavaScriptのinnerHTMLのような動きをします。

<body>
    <div id="app">
        <a v-bind:href="url" v-html="someText">
            
        </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    someText: 'Hello <span>my Vue.js app!</span>',
                    url: 'https://jp.vuejs.org'
                }
            }
        })
    </script>
</body>