vue基础学习|青训营笔记

164 阅读2分钟

事件

事件其实就跟我们原生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特有的方式改变按键的名字

连写技巧

对于事件修饰符和键盘事件修饰符时可以连写来实现多个效果