事件处理
一、事件绑定(事件监听)
使用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