vue事件、方法、双向绑定原理

最新推荐文章于 2023-11-09 23:29:00 发布

星辰一瞬

最新推荐文章于 2023-11-09 23:29:00 发布

阅读量183

点赞数

分类专栏：用法例子理解文章标签： vue

本文链接：https://blog.csdn.net/weixin_54163765/article/details/114914869

版权

用法同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

理解

19 篇文章 0 订阅

订阅专栏

例子

17 篇文章 0 订阅

订阅专栏

开头为重点必会

1，Vue 基础使用

指令，插值

插值，表达式
指令，动态属性
v-html：这个会有 XSS 风险，会覆盖子组件（用了之后内部自己写的所有代码块都会被覆盖，失效）

computed（计算）和 watch（监听）

vue计算属性

computed 有缓存，data不变则不会重新计算（缓存意味着不用重复加载）当 dom 是通过 v-model 绑定时要 get() 和 set() 否则会报错

watch 深度监听

watch 本身是浅度监听如何深度监听？
要用到 handler 以及 deep : true 深度监听引用数据类型拿不到 oldVal 因为它是指针式

class 和 style

可以通过 :class="{ }" 或者 :class="[ ]" 使用class
style 也可以 :style=“自定义的样式对象” 注意写法要用驼峰

条件渲染

v-if v-else 的用法，可以使用变量，也可以使用 === 表达式
v-if 和 v-show 的区别？ v-if 和 v-show 的使用场景？
v-if 是判定 dom的加载/销毁 v-show 是显示/隐藏如果条件只是用一次用 v-if 多次用 c-show

循环（列表）渲染

如何遍历对象？
循环数组参数有 item 和 index （数组内有id作为唯一标识）
循环对象参数有 val key index （key 必须具有类似 id 的唯一性）
key 的重要性 key 不能乱写（如 random 或者 index）
key 代表了唯一性增强了性能
v-for 和 v-if 不能一起使用！
不建议一起用 for 的优先级会更高每一遍都会进行判定影响性能

事件

event 参数，自定义参数
$event 作为参数传递即可 vue的 event 是一个原生的原型对象没有经过任何装饰
事件修饰符，按键修饰符
【观察】事件被绑定在哪里？
事件修饰符

表单

v-model
常见表单项 textarea checkbox radio select
修饰符 laze number trim
trim 去除前后空格
laze 类似防抖输入时驱动输入完成时驱动双向数据绑定
number 转化为数字

原型

原型在每一个对象中都有一个属性property这个就是一共对象的原型
原型链：就是这个对象寻找一共自己本身不存在的属性的时候就会去property中寻找，property中有一个__prop__属性，会去这里面寻找，这层层寻找的关系就叫原型链。
原型转换实例化对象可以使用new方法 new fn()
原型转换构造函数方法是 object.property
而实例化对象和构造函数转换原型都是一个方法使用
var obj=new Object();
obj.constructor===Object
obj.proto===Object.prototype