Vue事件的基本操作你知道吗
1. 事件的基本操作
1.1 v-on
功能:绑定指定事件名的回调函数
1.1.1 v-on的小案例
1.2 事件修饰符
1.2.1 事件修饰符代码解析
html代码
js代码
1.3 键盘事件
具体案例
1.4 计算属性(computed)
1.在页面中的使用方法:=={{方法名}}==来显示计算结果
2.定义:要使用的属性/变量不存在,需要通过已有的属性计算出来的
3.原理:底层是借助了object.defineproperty方法所提供的getter和setter
4.get函数执行的时机:
(1)初次读取的时候会执行一次
(2)当所依赖的数据发生改变时就会再次被调用
5.相比于methods的优势,内部是有缓存机制(复用),效率会更高,调试会更方便
6.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
7.需要注意的一个特殊点:以下面例子举例:get函数中return返回值的会作为fullname的值进行返回,在控制台可以看到是这样的形式呈现fullname:xxx。
8.computed中的this指向是vm
9.简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname()
1.5 监视属性(watch)
1.当所监视的属性发生变化时,回调函数自动调用,进行相关的操作
2.监视属性必须要存在,才能进行监视
3.监视属性的两种写法:
(1)在new vue中配置watch
(2)通过vm.$watch进行监视
4.watch里handler函数this的指向是vm
1.5.1 watch和computed的区别
watch和computed的区别是:
1.watch能够完成的功能,computed不一定可以完成,但是computed可以完成的,watch也可以完成
2.computed是依靠return的返回值(getter),所以它不能够完成异步的任务,而watch可以
3.watch是靠我们自己写代码进行修改
4.在学vue当中有两个很重要的原则:
- 所有被vue管理的函数,最好写成普通的函数,因为这样this的指向才是vue或者组件的实例化对象
- 所有不被vue管理的函数,最好写成箭头函数(ajax的回调函数,定时器的回调函数,promise的回调函数),因为这样this的指向才是vue或者组件的实例化对象
总结
以上就是今天要讲的内容,本文仅仅介绍了vue一些基本事件的操作,希望对大家有帮助!