码迷,mamicode.com
首页 > 其他好文 > 详细

v-once v-pre v-cloak作用

时间:2019-12-31 00:48:53      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:upload   script   内容   one   method   元素   display   jpg   计算   

这三个指令都是用来优化性能体验的:一个是搞一次不搞了 ,一个是干脆不搞 ,另一个是块遮羞布

v-once
当你只希望元素加载一次后面不再改变的时候,这个时候可以在根元素上添加这个指令。确保这些内容不会跟着数据改变而改变,只在初次页面加载时候计算一次然后缓存起来,v-once后面不用跟表达式

<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-pre后面也不用跟表达式

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

v-cloak
这个其实是用在网络比较差 程序执行慢或卡的时候,浏览器可能会显示出如下页面

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

此时,模板还未挂载到页面上,真实数据还没显示出来,看起来比较丑,那怎么办 ,要不就找一个斗篷先遮住吧,等到模板挂载上去数据正常显示了,再把斗篷扔了。v-cloak后面也不用跟表达式

cloak 英[kl??k] 美[klo?k]
n. (尤指旧时的) 披风,斗篷; 遮盖物;

  <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>

v-once v-pre v-cloak作用

标签:upload   script   内容   one   method   元素   display   jpg   计算   

原文地址:https://blog.51cto.com/13550695/2463186

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!