事件处理
一、事件绑定（事件监听）
使用v-on:事件名称 = '事件处理函数'的形式来监听事件，事件处理函数要写在methods后面的对象中
1、简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo2-事件处理</title>
</head>
<body>
<div id="app">
<button v-on:click="show">点击</button>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Hello Vue!'
},
methods: {
show(){
alert(this.message);
}
},
});
</script>
</html>
效果：
2、事件名简写
由于，v-on:事件名很常用，所以，事件也常常可以简写为@事件名，比如：v-on:click简写为@click
3、事件传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo2-事件处理</title>
</head>
<body>
<div id="app">
<button v-on:click="show">点击</button>
<button v-on:click="showEvent">点击 event</button>
<button v-on:click="showParam('Mr.Yan',$event)">点击 传参</button>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Hello Vue!'
},
methods: {
show(){
alert(this.message);
},
showEvent(event){
console.log(event);
},
showParam(msg,event){
console.log(msg);
console.log(event);
}
},
});
</script>
</html>
效果：
二、事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理DOM 事件细节。
为了解决这个问题，Vue 为v-on提供了事件修饰符。通过由点.表示的指令后缀来调用修饰符。
常见的事件修饰符如下：
.stop：阻止冒泡。
.prevent：阻止默认事件。
.capture：使用事件捕获模式。
.self：只在当前元素本身触发。
.once：只触发一次。
.passive：默认行为将会立即触发。
1、阻止事件冒泡,.stop修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo2-事件处理</title>
<style>
#outter{
width: 300px;
height: 300px;
padding: 20px;
background-color: #3d78c5;
}
#inner{
width: 150px;
height: 150px;
background-color: #55e480;
}
</style>
</head>
<body>
<div id="app">
<div id="outter" v-on:click='outter'>
<div id="inner" v-on:click.stop='inner'></div>
</div>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Hello Vue!'
},
methods: {
outter(){
alert('outter');
},
inner(){
alert('inner');
}
},
});
</script>
</html>
效果：
2、阻止默认行为，.prevent修饰符
<a href="http://www.yanhongzhi.com" v-on:click.prevent>Mr.Yan的博客</a>
效果：
3、事件捕获，.capture修饰符
<div id="outter" v-on:click.capture='outter'>
<div id="inner" v-on:click='inner'></div>
</div>
效果：
4、事件源是自身的时候触发，.self修饰符
<div id="outter" v-on:click.self='outter'>
<div id="inner" v-on:click='inner'></div>
</div>
效果：
5、只触发一次，.once修饰符
<div id="outter" v-on:click='outter'>
<div id="inner" v-on:click.once='inner'></div>
</div>
效果：
三、按键修饰符
除了事件修饰符以外，在 Vue 中还提供了有鼠标修饰符，键值修饰符，系统修饰符等功能，使用方式大致就和事件修饰符是一样的，例如：
<!-- 鼠标修饰符 -->
.left 左键
.right 右键
.middle 滚轮
<!-- 键值修饰符 -->
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名 -->
.enter 回车
.tab 制表键
.delete（捕获 “删除” 和 “退格” 键）
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右
<!-- 修饰键 -->
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo3-按键修饰符</title>
</head>
<body>
<div id="app">
<!-- Vue在绑定事件时提供了许多修饰符，写法如下： -->
<!-- 不同的修饰符有不同的功能，详细参见手册 -->
<p><a href="http://www.baidu.com" @click.prevent='handle("禁止打开")'>百度一下</a></p>
<!-- 按下具体某个键时才调用方法 -->
<!-- 绑定keyup事件，keyCode为65时(a键)才会调用方法 -->
<p><input type="text" @keyup.65='handle1'></p>
<!-- Vue还提供了一些快捷名称，全部的可以参见手册 -->
<!-- 绑定keyup事件，如果是按的回车键则会触发事件 -->
<p><input type="text" @keyup.enter='handle2'></p>
<!-- 判断用户点击按钮时用的是哪一个键，使用到的修饰符有.right,.middle和.left -->
<p><button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{mess}}</button></p>
<!-- 还有一些修饰符是和点击按键配合使用的 -->
<p @click.alt='handle3'>按住Alt键后点击触发事件</p>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
mess: '点击'
},
methods: {
handle: function (mess, event) {
window.alert(mess); // 弹出传递过来的信息
},
handle1: function () {
console.log('this is a test');
},
handle2: function () {
console.log('this is a test2');
},
handle3: function () {
console.log('this is a test3');
},
left: function () {
this.mess = 'left'
},
right: function () {
this.mess = 'right'
},
middle: function () {
this.mess = 'middle'
},
}
});
</script>
</html>
效果：
Comments