vue - (v-pre、v-cloak、v-once)

1.v-pre，不和绑定的数据冲突，也就是不用它们的值

2.v-cloak，和css样式一起用，vue渲染未完成不显示

3.v-once，只渲染DOM第一次渲染的值，以后不会改变了(你不要刷新网页，然后说我骗你啊！ 伤不起)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- Step1.对于vue,可以用cdn -->

     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

     <style>

         #app div{

             padding: 2%;

             margin-bottom: 1%;

             border-bottom: 1px solid #ddd;

             background-color: blanchedalmond;

         }

         [v-cloak]{

             display: none;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <!-- 不和data数据冲突 -->

         <div v-pre>{{message}}</div>

         <!-- 就是vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用 -->

         <div v-cloak>{{message}}</div>

         <!-- 只显示DOM第一次渲染的值,以后不改了 -->

         <div v-once>第一次绑定的值：{{message}}</div>

     </div>

     <script type="text/javascript">

         new Vue({

             el: '#app',

             data: {

                 message: '漂亮'

             }

         })

     </script>

 </body>

 </html>

秒客网

vue - (v-pre、v-cloak、v-once)

相关文章