【基础15】绑定事件-按键，鼠标修饰符

czh 7/6/2021 vue3vue3基础绑定事件-按键，鼠标修饰符

# 【基础15】绑定事件-按键，鼠标修饰符

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

# 模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></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....')
    }
},

# 单个按键修饰符

单个按键修饰符：顾名思义，就是指定键盘上某个特殊的按键时才会响应事件方法。

如果现在的需求是，上面的代码只有在按下回车时，才在控制台进行打印，这时候就需要按键修饰符了。我们学的第一个按键修饰符enter

template:`
    <div">
        <input @keydown.enter="handleKeyDown"/>
    </div>
    ` 
    })

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

enter 、tab、delete、esc、up 、down、left、right

# 鼠标修饰符

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

最常用的就是: left、right、middle

现在的需求是在页面上作一行文字陈叔叔，然后只有用鼠标右键点击时，才会弹出alert( )。

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

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

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

<div @click.right="handleClick">陈叔叔</div>

在点击右键的时候，会发现弹窗之后，还会有浏览器默认的菜单，可以click修改一下

陈叔叔

<div @contextmenu.prevent.right="handleClick">陈叔叔</div>

前端极客

Choose mode