事件绑定
1.指令v-on
Vue使用v-on指令监听DOM事件，我们可以使用v-on指令绑定到DOM节点上，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-on</title>
</head>
<body>
<div id="app">
<button v-on:click="logInfo()">打印消息（default:Hello World）</button><br>
<button v-on:click="logInfo('Self Message')">打印消息（'Self Message'）</button><br>
<button v-on:click="console.log('A Vue app')">打印消息（'A Vue app'）</button><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
}
},
methods:{
logInfo(msg){
console.log(msg || 'Hello World');
}
}
});
</script>
</body>
</html>
同时v-on也可以简写为@
2.获取事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取事件对象</title>
</head>
<body>
<div id="app">
<!--1.在事件函数不需要传参市可以这样写-->
<input type="text" @keyup="handleKeyUp"><br>
<!--2.手动传入$event对象-->
<input type="text" @keyup="handleKeyUp($event)">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
}
},
methods:{
handleKeyUp(event){
console.log(event.key,event)
}
}
});
</script>
</body>
</html>
3. 常见的修饰符
| 名称 | 可用版本 | 可用事件 | 说明 |
|---|---|---|---|
| .stop | 所有 | 任意 | 当时间出发时，阻止事件冒泡 |
| .prevent | 所有 | 任意 | 当事件触发时，组织元素默认行为 |
| .capture | 所有 | 任意 | 当事件触发时，阻止事件捕获 |
| .self | 所有 | 任意 | 限制事件仅用于节点本身 |
| .once | 2.1.4以上 | 任意 | 事件被触发一次后即解除监听 |
| .passive | 2.3.0以上 | 滚动 | 移动端，限制事件永不调用preventDefault()方法 |
4.案件修饰符
| 别名修饰符 | 键值修饰符 | 对应按键 |
|---|---|---|
| .delete | .8/.46 | 回格/删除 |
| .tab | .9 | 制表 |
| .enter | .13 | 回车 |
| .esc | .27 | 退格 |
| .space | .32 | 空格 |
| .left | .37 | 左 |
| .up | .38. | 上 |
| .right | .39 | 右 |
| .down | .40 | 下 |
5.组合修饰符
| 修饰符 | 可用版本 | 对应键 |
|---|---|---|
| .ctrl | 2.1.0以上 | Ctrl键 |
| .alt | 2.1.0以上 | Alt键 |
| .shift | 2.1.0以上 | Shift键 |
| .meta | 2.1.0以上 | meta键（Window系统上为 田键） |
下面的这个案例实现了按住Ctrl再点击鼠标的事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合修饰符</title>
<style>
.changeMouse{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h1 @click.ctrl="logWithCtrl" @click="logSingle" @mouseover="addActive">按住Ctrl点击</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el:'#app',
data(){
return{
}
},
methods:{
addActive(event){
event.currentTarget.className="changeMouse"
},
logSingle(event){
if (!event.ctrlKey){
console.log('------------分割线-----------');
console.log('$event.ctrlKey:',event.ctrlKey);
console.log('已经点击过了。。。')
}else {
console.log('.......')
}
},
logWithCtrl(event){
console.log('------------分割线-----------');
console.log('$event.ctrlKey:',event.ctrlKey);
console.log('按住Ctrl，点击的。。。')
}
}
});
</script>
</body>
</html>
小白一枚，如有问题，请多多指教😃