Vue.jsのv-preディレクティブ

なんぞこれ

正直使いどころがいまいちわからないけど、「v-preが付いている要素とすべての子要素のコンパイルをスキップ」するディレクティブ　らしい。 つまりはマスタッシュ構文を無効化して、{{ message }}とかをそのまま表示してくれる。

<div>
   <a href="#" v-pre>Hello {{ message }}</a>
</div>
<div>
   <a href="#">Hello {{ message }}</a>
</div>

data: {
   message: 'メッセージ'
}

実行結果

用途としては、

• ディレクティブのない長いHTMLをスキップすることで、コンパイルのスピードを上げる
• マスタッシュ構文をそのまま表示する
• SSR時のXSS対策

とのこと。

参考

amzn.asia prograshi.com