事件
事件其实就跟我们原生js一样的,比如click,keyup,keydown,mouseenter,mouseover,
-
还有一个新的事件,就是change事件,change事件原生js就有了,当用户修改input,select,textarea元素的值时就会触发
-
blur方法
-
失去焦点的事件,一般用在验证表单的时候
-
用户切换到下一个验证框或者点击空白处的时候会触发
-
此时去验证用户输入的格式是否正确,如果不正确,就可以警告他
方法
-
例子:v-on:click="xxx"
-
我们一般在methods里面放入函数
-
关于传参
-
传参的分几种情况
-
第一种是传递参数为0的时候,在方法体定义的参数就是指e,就是事件传递,比如说e.target
-
第二种是传递参数不为0的时候,在方法体内定义的参数就直接对应传递的参数,e直接消失,得使用关键字$event(后面用到再细究)
-
细节,不要给方法数据代理(也就是放到data那里),因为我们不会更改函数。那么从这里也能看出一些东西,就是method和data的区别应该在与有无数据代理
事件修饰符
介绍:就是接在@事件后的一个修饰值,不同的单词有不同的功能
事件修饰符的全称叫做v-on
例子@click.stop
- prevent
阻止默认事件,比如说跳转事件,可以使用它来阻止
- stop
阻止事件冒泡
- once
事件只能点一次
- capture
使用事件的捕获阶段,事件就两个阶段,一个冒泡阶段,一个捕获阶段
- self
也是阻止冒泡
- passive
键盘事件
介绍
- 如何使用
这是我参与「第四届青训营 」笔记创作活动的第八天
-
@keyup+.快捷键的名称就是指绑定某个键,我记得keyup和keydown的区别在于前者就是指按了后的只会触发一次,另外一个就是指按了后如果不松手将一直触发
-
按键别名(注意不需要刻意去记住,因为这就是我们键盘上的按键罢了)
-
enter
-
delete
-
esc
-
space
-
tab(必须使用keydown去使用)
-
up
-
down
-
left
-
right
-
caps-lock(需要注意的点是这个单词必须使用小写,且必须两个单词间用-分隔符隔开)
-
杂
-
第一个类似与功能键,比如说ctrl shirft meta(meta是指菜单键吧,比如说window有的,苹果有的)都有一个特点就是对keydown支持较好,使用keyup的时候必须要跟其他字母键一起使用,并松开的时候会触发。
-
可以使用keycode来直接指定按键
-
也可以使用vue特有的方式改变按键的名字
连写技巧
对于事件修饰符和键盘事件修饰符时可以连写来实现多个效果