尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 学习笔记|12-21

一、数据代理 

1.vue数据的传播方式

 2。vm示例中所有的对象和方法在模板里面都可以使用

可以缩写

 3.数据代理总结：

 二、事件绑定

使用 v-on指令的方式

 使用 v-on指令的方式进行绑定

1.

红色框只能使用绿色框中的实例 ，注意箭头函数

V-on 省略符，v-on 使用 @

其中，$event 占位符，通过这个占位符往方法里面传递事件对象

 

一个做了数据代理，一个没有做数据代理。事件的总结

 2.冒泡的捕捉

js响应事件的方式，捕获到底，再依次响应

阻止向上传播

缩写版本：

 

 

==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交

 

以上是六个常用事件修饰符

@wheel 响应侧滑栏滑动事件

 默认行为立即执行，无需等待事件回调执行完毕

.self

响应键盘事件

 

提供的几个按键

 

 

当面对两个单词的键时，下面的是错误的 

 

这个才是对的

Tab键比较特殊  焦点丧失  一般用keydown

 这种方法已经逐渐淘汰了

 

响应ctrl+y

 

三、计算属性

1.模板语言中建议使用简单的表达式，别复杂

 

 

 官网提供的一个例子

 差值语法中注意有无小括号之间的区别

 

 

注意此时的this指代对象

任何数据一变化，模板会重新调用解析，方法也会重新调一遍

2. 计算属性，用已知的属性来计算属性

此时的this已经调好了

计算属性 get方法调用时间，初次调用时候会执行，依赖数据变化更改时候会执行

 

上面时vue工具的显示

计算属性计算用的

被vue 管理的函数别用箭头函数，箭头函数指代的this对象不清楚是谁。

总结：注意和方法的区别

 3.小技巧

计算属性的简写）（只读不写）

继续简写（只读不写）

 

四、监视属性

 1.vue推荐插件

一个简单的案例

 

注意this关键字

 

 这里的alert有问题，@xxx="yyy"默认的时是 vm示例