vue指令，自定义指令

最新推荐文章于 2024-10-08 10:03:30 发布

pqxpq

最新推荐文章于 2024-10-08 10:03:30 发布

阅读量157

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52563729/article/details/129468331

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

学过的指令:
v-bind:单向绑定解析表达式,可简写为:XX

v-model :双向数据绑定

v-for :遍历数组/对象/字符串

v-on:绑定事件监听，可简写为@

v-if:条件渲染（动态控制节点是否存存在)

v-else:条件渲染（动态控制节点是否存存在)

v-show:条件渲染（动态控制节点是否展示)

新指令

v-text指令:

1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别: v-text会替换掉节点中的内容，{{xXx}}则不会。

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

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

在这里插入图片描述

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

在这里插入图片描述

Vue中的事件修饰符:
1 . prevent: 阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用:
4.capture:使用事件的插获模式;
5.self:只有event.target是当前操作的元素时才触发事件:
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕:

函数式自定义指令：

自定义函数不需要返回值！！！

Vue模板语法有2大类:

1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签（包括:标签属性、标签体内容、绑定事件…)。

big函数何时会被调用?
1.指令与元素成功绑定时(一上来)。
2.指令所在的模板被重新解析时。、

第一条可以解释，那么第二条我们应该如何解释呢？

在这里插入图片描述
假设我们的元素v-big操作的是n，但是！我们我们的name发生改变的时候我们的指令也会触发。