Vue.js

【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と同義

 

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

 

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

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

 

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>

 

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

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

 

試しに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>
spanが組まれているのが分かる

 

以上が、各テンプレート制御ディレクティブの動きです。

 

まとめ

本記事では、「v-pre, v-once, v-text, v-htmlの使い方」について以下のことを解説しました。

  • テンプレート制御ディレクティブ
  • v-preの使い方
  • v-onceの使い方
  • v-textの使い方
  • v-htmlの使い方

それぞれの動きについて、余裕があれば、ご自身のエディタにコピペして確かめてみてください。

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。