21. [基础]Vue绑定事件详讲-按键、鼠标饰修符
目录
本文主要的内容会讲一下事件绑定中的按键修饰符
和鼠标修饰符
。它们对应的是在使用特点的某个按键时才会用到。这节的内容在工作中也是比较常用的,比如按下回车键时触发表达提交,按下鼠标右键时弹出选项菜单,都是工作中用得到的。
构建基础页面
新建一个页面Demo21.html
,然后把下面的代码复制到代码中。可以看到,这就是一个最简单的页面,只不过是在模板template
中加入了一个<input />
标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo21</title> <script src="https://unpkg.com/vue@next" ></script> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data(){ return{} }, methods:{ }, template:` <div"> <input /> </div> ` }) const vm=app.mount("#app") </script> </html>
然后在methods
部分加入一个方法handleKeyDwon( )
,具体内容只是在控制台打印出来keydown
。
methods:{ handleKeyDown(){ console.log('keydow....') } },
然后在模板中的<input />
中绑定键盘按下时响应keydown
。
template:` <div"> <input @keydown="handleKeyDown"/> </div> `
单个按键修饰符
单个按键修饰符:顾名思义,就是指定键盘上某个特殊的按键时才会响应事件方法。
如果现在的需求是,上面的代码只有在按下回车时,才在控制台进行打印,这时候就需要按键修饰符了。我们学的第一个按键修饰符enter
template:` <div"> <input @keydown.enter="handleKeyDown"/> </div> ` })
类似这样只响应单个按键的修饰符有很多
enter
、tab
、delete
、esc
、up
、down
、left
、right
这些你可以通过上面的列子,自行测试,我这里不在赘述。
鼠标修饰符
除了按键修饰符,还有鼠标修饰符
,就是按下鼠标上的某个键时,才会响应。
最常用的就是: left
、right
、middle
现在的需求是在页面上写一行文字mybj123.com
,然后只有用鼠标右键点击时,才会弹出alert()
。
先在methods
里编写一个handleClick
方法。
methods:{ //... handleClick(){ alert('click') } },
然后在模板中使用鼠标修饰符,确定只有点击鼠标右键时才会响应。
<div @click.right="handleClick">mybj123.com</div>
好了本文的内容就到这里了,事件绑定我们一共讲了三节,希望小伙伴们能动手把这部分的内容联系一下,这是大家在工作中最常用的一些功能。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 21. [基础]Vue绑定事件详讲-按键、鼠标饰修符
码云笔记 » 21. [基础]Vue绑定事件详讲-按键、鼠标饰修符