Vueその他のディレクティブ

v-once

要素とコンポーネントを一度だけ描画し、その後は静的コンテンツとして扱われスキップすることができる。
以上のことから更新性能を上げることができる

下記コードではボタン押下後内部のmessageプロパティは変化しているが 表示されているテキスト名は変更されていない事がわかる

<div id="app">
    <p v-once>
        {{message}}
    </p>
    <button @click="BtnClick">
        テキスト変更ボタン
    </button>
    <pre>{{$data}}</pre>
</div>

const app = new Vue({
    el:"#app",
    data:{
        message:'表示時テキスト'
    },
    methods:{
        BtnClick:function(event){
            this.message='クリック後テキスト'
        }
    }
});

v-pre

・ポイント
宣言された要素と子要素すべてのコンパイルをしない。
生の mustache タグを表示するためにも使うことができる。
ディレクティブのない大量のノードをスキップするので表示速度が上がる。

下記のコードはMustacheタグの{{message}}が表示される。

<div id="app">
    <p v-pre>
        {{message}}
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

const app = new Vue({
    el:"#app",
    data:{
        message:'表示時テキスト'
    }
});

v-html

プレーンな HTMLを組み込みたいときに使用する
この部分はコンパイルされない
主にサーバーから取得した生のHTMLを使用したいときに使う

このディレクティブは公式リファレンスにもあるように
XSSの攻撃を招くため使用するときには注意が必要

任意の HTML をあなたの Web サイト上で動的に描画することは、 XSS 攻撃を招くため大変危険です。
v-html は信頼済みコンテンツのみに利用し、 絶対に ユーザの提供するコンテンツには使わないでください。

例としてはユーザーから与えられたデータ今回ならブログの投稿フォームにこのディレクティブを使っていると悪意のあるユーザーが、
スクリプトタグなどを埋め込んでいるとフィッシングサイトになってしまうなど

<div id="app">
    <p>
        {{text}}
    </p>
    <p v-html="text">
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

const app = new Vue({
    el:"#app",
    data:{
        text:'表示時<span style="color:red;">テキスト</span>'
    }
});

v-cloak

Vue インスタンスのコンパイルが終了するまでディレクティブが残り、
コンパイル終了後削除される。
CSSで[v-cloak] { display: none }のように記載することで、
一瞬マスタッシュタグが表示されるなどの画面チラツキを防止することができる

・HTML

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

・JavaScript

const app = new Vue({
    el:"#app",
    data:{
        text:'表示されるテキスト'
    }
});

・CSS

[v-cloak]{
    display:none;
}