一度のために、マント作用

これらの3つの命令は、パフォーマンスの経験を最適化するように設計されている。一つは、一度に従事に従事することはありませんが、一つはに従事するだけであり、他方は葉イチジクブロックであります

V-一度
あなただけの変更のために長い時間の背後にある要素をロードする際に、この時間は、root要素にこのコマンドを追加することができます。コンテンツは、データの変更を追跡していない表現で、ページのロードが初めて計算した後、一度キャッシュされた場合にのみ、バックV-一度を変更しないことを確実にするために、

<div id="app">
        <img v-once :src="url" >
         <button @click="change">换图片</button>
    </div>
    <script type="text/javascript">
            const app = new Vue({
            el:"#app",
            data:{
                url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=4b79c2be425ab4d75cbfca72b4033b8f&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2Fc4083711e2477fb5.jpg"
            },
            methods:{
                change(){
                    this.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=92cda882bad8242ed2a1da077373de95&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fuploads%2F2019-02-26%2F004320294.jpg"
                }
            }
        })
    </script>

V-PRE
いくつかの静的コンテンツは、コンパイルをスピードアップすることができ、プログラムの実行がします。このコンパイル手順を追加する必要はありません。この要素とその子要素コンパイルプロセスをスキップします式に戻っていないV-前を行います

 <h1 v-pre>哈哈哈哈哈哈哈</h1>

V-マントの
事実、これはカードのネットワークが遅いまたは不適切な実行され、ブラウザには、次のページが表示される場合があり

<div id="app">
    <div>
            <h1>{{count}}</h1>
            <h1>{{count}}</h1>
            <h1>{{count}}</h1>
            <h1>{{count}}</h1>
            <h1>{{count}}</h1>
            </div>
        </div>

この場合、テンプレートは、ページ上に実装されていない、実際のデータが表示されない、醜い、そして実行する、またはそれをカバーするためにマントを見つけるために、適切にテンプレートデータ表示までマウント、そしてどのようにマントがスロー。式がないと後ろのV-マント

マントUK [kləʊk] US [kloʊk]
N-(ESP以前)マント、マント;.覆います。

  <style type="text/css">
        [v-cloak]{
            display: none;
        }
       </style>
    </head>
    <body>
        <div id="app">
            <div v-cloak>
                <h1>{{count}}</h1>
                <h1>{{count}}</h1>
                <h1>{{count}}</h1>
                <h1>{{count}}</h1>
                <h1>{{count}}</h1>
            </div>
        </div>
        <script type="text/javascript">
            setTimeout(function(){
                const app = new Vue({
                    el: "#app",
                    data: {
                        count: "1111"
                    },
                    methods: {

                    }
                })
            },3000)

        </script>
    </body>

おすすめ

転載: blog.51cto.com/13550695/2463186