《跟热饭一起学习vue吧》Part.19 按键事件和按键修饰符

简介: 《跟热饭一起学习vue吧》Part.19 按键事件和按键修饰符


按键事件


我们之前学习的事点击事件,也就是v-on:click


本节课我们要学的事键盘按键事件,也就是v-on:keyup


之前说的click,因为我们什么都可以点击,所以v-on:click几乎用于各种元素中。


而键盘按键keyup,则几乎都用在输入框input元素内了。


看这个例子:

image.png


我们给这个input输入框元素 增加了v-on:keyup,并且绑定了这个say函数,让其弹出what字符串。


结果就是我每在输入框输入一个字符,就会触发一次,然后弹出这个弹窗。


按键事件的按键修饰符


和点击事件一样具有事件修饰符外,按键事件还有自己独有的按键修饰符。


也就是指定按特殊的按键才触发,而不是像之前无论我按什么都会触发。


比如回车键:

image.png

现在,输入等操作都不会触发事件弹窗了,只有在按下回车的时候才会弹出。


但是有的同学一定说,这不好记啊,13代表回车,14 ,15呢?ctrl键是什么?这上哪能记住去?


所以便有了翻译后的一套修饰符:

image.png

image.png

如图,我替换成了enter。


当然其实操作的也不一定就非要是 input输入框,其他各种元素标签也是可以的。

相关文章
|
1天前
|
JavaScript
Vue学习系列(二)——组件详解
Vue学习系列(二)——组件详解
|
8天前
|
JavaScript
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
|
8天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
8天前
|
JavaScript
Vue.js中使用.prevent和.stop修饰符
Vue.js中使用.prevent和.stop修饰符
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
22 5
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的驾校预约学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的驾校预约学习系统附带文章源码部署视频讲解等
11 0
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的党员学习交流平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的党员学习交流平台附带文章源码部署视频讲解等
8 0
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的在线互动学习网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的在线互动学习网站附带文章源码部署视频讲解等
14 1
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的计算机学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的计算机学习系统附带文章源码部署视频讲解等
16 0
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的语言课学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的语言课学习系统附带文章源码部署视频讲解等
12 0