1.v-once
v-once ディレクティブは、要素とコンポーネントを 1 回だけレンダリングします。要素、コンポーネント、およびそのすべての子ノードがこのディレクティブを使用している場合、その後のレンダリングは静的コンテンツとして扱われ、スキップされます。この機能を使用すると、更新のパフォーマンスを最適化できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once指令</title>
</head>
<body>
<div id="app">
<p> <input type="type" v-model="message"/></p>
<p v-once> 只渲染一次: {
{
message}} </p>
<p> 可以改变: {
{
message}} </p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"Hello"
}
})
</script>
</body>
</html>
ブラウザで実行した場合の効果を図に示します。
上記のサンプル コードを実行すると、ブラウザ ページが開かれると、
DOM 要素の {{ message}} が message 属性の値をレンダリングします。v-model でバインドされた入力ボックスが message 属性の値を再度変更しても、v-once 命令で追加されたタグは変更されません。
2.v-マント
v-cloak ディレクティブは、関連するインスタンスがコンパイル後に自動的に削除されるまで、DOM 要素上に残ります。v-cloak 命令の使用シナリオは非常に限定されており、ネットワークが遅い場合のデータ読み込みの問題を解決するためによく使用されます。ユーザーが Vue.js で実装された Web サイトにアクセスしたときに、ネットワークが遅延し、Web ページがまだ Vue.js を読み込んでいると、Vue のレンダリングが間に合わなくなり、ページには Vue のソース コードが表示されますが、v-cloak コマンドを使用するとこの問題を解決できます。
<div id="app">
{
{
message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"hello world"
}
})
</script>
ネットワークが遅い場合、ブラウザでページを開くと、Vue のソース コードがページに表示されます。図に示すように、Vue.js がロードされてコンパイルされるまで、通常のデータ コンテンツは表示されません。
上記のコードを実行する際の問題を解決するには、DOM 要素に v-cloak 命令を追加し、属性セレクターを使用して、指定された DOM 要素の非表示スタイルを設定します。v-cloak 命令は DOM 要素に残すことができ、コンパイルが完了するまで自動的に削除されません。このようにして、Vue がコンパイルを完了する前に、指定された DOM 要素を非表示にすることができます。コンパイルが完了すると、CSS スタイルは DOM 要素に対して無効になります。
<style>
[v-clock] {
display: none;
}
</style>
<div id="app">
{
{
message}}
</div>
3.インフォー
v-pre ディレクティブは、この要素とその子要素のコンパイル プロセスをスキップするため、元の Mustache タグを表示するために使用できます。命令なしで多数のノードをスキップすると、コンパイルが高速化されます。コードは次のとおりです。
<span v-pre>{
{
this will not be compiled}}</span>
ブラウザで実行した場合の効果を図に示します。
