Vue模板语法——v-cloak

一、什么是指令

• 指令的本质就是自定义属性
• 指令的格式：以v-开始，比如：v-cloak

二、v-cloak指令用法

• 插值表达式存在的问题：“闪动”
• 如何解决该问题：使用v-cloak指令
• 解决该问题原理：先隐藏，替换好值后再显示最终的值

三、v-cloak指令的用法

1. 提供样式

   [v-cloak]{
      display: none;
   }

2. 在插值表达式所在的标签中添加v-cloak指令

例如：

   <style type="text/css>
      [v-cloak]{
         display: none;
      }
   </style>
   <div id='app'>
     <div>{{msg}}</div>
   </div>
   <script type="text/javascript" src="js/vue.js"></script>
   <script type="text/javascript">
      new Vue({
            el:'#app',
            data:{
               msg:'HelloWorld'
            }
      })
   </script>

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果