前端-vue基础6-指令v-cloak_Vue

<!DOCTYPE html>
 <html lang="en">
  
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- v-cloak用法 -->
     <style>
         [v-cloak] {
             display: none;
         }
         /* 先通过样式隐藏内容 然后在内存中替换 然后再显示想要的结果 */
     </style>
 </head>
  
 <body>
     <div id="app">
         <div v-cloak>{{msg}}</div>
     </div>
     <!-- 刷新的时候有闪动 -->
     <script type="text/javascript" src="./js/vue.js"></script>
     <script>
         /* VUE基本使用 */
         /* 填充数据 */
         /* 引入js */
         /* 语法功能 */
         var vm = new Vue({
             //绑定的标签
             el: '#app',
             //数据显示
             data: {
                 msg: 'Hello Vue'
             }
         });
     </script>
 </body>
  
 </html>

前端-vue基础6-指令v-cloak_前端_02