码云 Vue3教程 2021-06-21

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

AI 概述

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

文章目录隐藏

构建基础页面
单个按键修饰符
鼠标修饰符

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

构建基础页面

新建一个页面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绑定事件详讲-按键、鼠标饰修符的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 21. [基础]Vue绑定事件详讲-按键、鼠标饰修符

码云 SVIP

分享到：

构建基础页面

单个按键修饰符

鼠标修饰符

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复