六、模板语法指令

指令（Directives）是带有前缀v-的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

    1、v-cloak

       1>v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移出。

       2>当网络较慢，网页还在加载Vue.js，导致Vue来不及渲染，这时页面就会显示出Vue源代码。

         直到Vue.js文件加载完毕，模板编译后才会被替换为数据对象中的内容。

         在这个过程中，页面会出现闪烁状况，用户体验相当不好。

         这时用v-cloak就可以解决。

       3>注意：如果是CDN引入Vue.js，使用v-cloak解决页面闪烁是非常有效的。

         但是实际开发中都是用NPM安装，模块化方式开发，内容都是由路由去挂载不同的组件来完成，

         就没必要使用v-cloak了。

    2、v-text

       v-text指令，用于更新元素的文本内容。

    3、v-html

       1>v-html指令，用于在元素中插入html片段，相当于innnerHTML。

       2>该指令存在安全漏洞，因此在本地代码中可以使用。如果要调用第三方的代码中包含该指令，则存在安全隐患。

       3>一般用于新闻详情和商品详情页面的内容输出。

    4、v-once

       1>v-once指令，可以让元素或组件只渲染一次（即只初始化）。

       2>使用了此指令的元素/组件及其所有的子节点，都会当做静态内容并跳过，这可以用于优化更新性能。

    5、v-pre

       1>v-pre指令，用于跳过这个元素和它子元素的编译过程。

       2>可以用来显示原始Mustache标签，对于大量没有指令的节点会加快编译速度。

   6、v-bind

       1>v-bind指令，可以动态地绑定一个或多个HTML元素的属性，或一个组件prop到表达式。

       2>v-bind也支持缩写用“ : ”冒号表示。

       3>v-bind也支持动态属性名格式： :[attrhref]。

<div id="app" > 
        <a :[attrhref]='url'>程序思维</a><!--6、指令v-bind-->
</div>
<script>
        let data={
            url:'https://www.baidu.com',
            attrhref:'href'
        }   
</script>