[基础]Vue绑定事件详讲-按键、鼠标饰修符
前言
- 前言
- 构建初始页面
- 在模板中的中绑定键盘按下时响应 keydown
- 单个按键修饰符
- 鼠标修饰符
本文主要的内容会讲一下事件绑定中的按键修饰符和鼠标修饰符。
它们对应的是在使用特点的某个按键时才会用到。
这节的内容在工作中也是比较常用的，比如按下回车键时触发表达提交，按下鼠标右键时弹出选项菜单，都是工作中用得到的。
构建初始页面DOCTYPE html>
Demo21
const app=Vue.createApp({
data(){
return{}
},
methods:{
},
template:`
`
})
const vm=app.mount("#app")
然后在 methods 部分加入一个方法 handleKeyDwon( )，具体内容只是在控制台打印出来keydown。
methods:{
handleKeyDown(){
console.log('keydow....')
}
},
然后在模板中的 中绑定键盘按下时响应 keydown。
template:`
类似这样只响应单个按键的修饰符有很多
enter 、tab、delete、esc、up、down、left、right
这些你可以通过上面的列子，自行测试，我这里不在赘述。
鼠标修饰符除了按键修饰符，还有鼠标修饰符，就是按下鼠标上的某个键时，才会响应。
最常用的就是:left、right、middle
现在的需求是在页面上写 willem，然后只有用鼠标右键点击时，才会弹出 alert()。
先在 methods 里编写一个 handleClick 方法。
methods:{
//...
handleClick(){
alert('click')
}
},
然后在模板中使用鼠标修饰符，确定只有点击鼠标右键时才会响应。
willem
实例文档
Demo21
const app=Vue.createApp({
data(){
return{}
},
methods:{
handleClick(){
alert('click');
}
},
template:`
willem
`
})
const vm=app.mount("#app")
