21. [基础]Vue绑定事件详讲-按键、鼠标饰修符

目录
文章目录隐藏
  1. 构建基础页面
  2. 单个按键修饰符
  3. 鼠标修饰符

本文主要的内容会讲一下事件绑定中的按键修饰符鼠标修饰符。它们对应的是在使用特点的某个按键时才会用到。这节的内容在工作中也是比较常用的,比如按下回车键时触发表达提交,按下鼠标右键时弹出选项菜单,都是工作中用得到的。

构建基础页面

新建一个页面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>
    ` 
    })

类似这样只响应单个按键的修饰符有很多

  • entertabdeleteescupdownleftright

这些你可以通过上面的列子,自行测试,我这里不在赘述。

鼠标修饰符

除了按键修饰符,还有鼠标修饰符,就是按下鼠标上的某个键时,才会响应。

最常用的就是: leftrightmiddle

现在的需求是在页面上写一行文字mybj123.com,然后只有用鼠标右键点击时,才会弹出alert()

先在methods里编写一个handleClick方法。

methods:{
   //...
    handleClick(){
        alert('click')
    }
},

然后在模板中使用鼠标修饰符,确定只有点击鼠标右键时才会响应。

<div @click.right="handleClick">mybj123.com</div>

好了本文的内容就到这里了,事件绑定我们一共讲了三节,希望小伙伴们能动手把这部分的内容联系一下,这是大家在工作中最常用的一些功能。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 21. [基础]Vue绑定事件详讲-按键、鼠标饰修符

发表回复