v-on 事件修饰符

v-on 事件修饰符
常用的事件修饰符有：

.stop  阻止事件冒泡

.self  当事件在该元素本身触发时才触发事件

.capture 添加事件侦听器是，使用事件捕获模式

.prevent  阻止默认事件

.once 事件只触发一次

什么是事件冒泡
<!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>v-on</title>
<script src="vue.min.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">

<h2>事件冒泡</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<button @click="btnClick">事件冒泡</button>
</div>
</div>
<p>当点击按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件</p>
<p>当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件</p>
<p>当点击outer div时，只触发outer点击事件</p>
<p>这就是事件冒泡</p>

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
outerClick () {
console.log("触发了outer点击事件")
},
innerClick () {
console.log("触发了inner点击事件")
},
btnClick () {
console.log("触发了按钮点击事件")
}
}
});
</script>
</body>
</html>
.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>v-on</title>
<script src="vue.min.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">

<h2>.stop阻止事件冒泡</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<button @click.stop="btnClick">阻止事件冒泡</button>
</div>
</div>
<p>.stop可以实现当我点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡</p>

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
outerClick () {
console.log("触发了outer点击事件")
},
innerClick () {
console.log("触发了inner点击事件")
},
btnClick () {
console.log("触发了按钮点击事件")
}
}
});
</script>
</body>
</html>
.self  只有当事件在该元素本身触发时才触发事件
<!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>v-on</title>
<script src="vue.min.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">

<h2>.self当事件在该元素本身触发时触发回调（比如 不是子元素）</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click.self="innerClick">
<button @click="btnClick">self效果</button>
</div>
</div>
<p>.self只能阻止自己身上冒泡行为，并不会真正的阻止冒泡行为</p>
<p>只给inner div 加.self，当点击按钮时，会从里到外依次触发按钮点击事件、outer点击事件</p>
<p>而不会触发inner点击事件，跳过了inner div冒泡</p>
<p>当点击inner div时，依然会从里到外依次触发inner点击事件、outer点击事件</p>

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
outerClick () {
console.log("触发了outer点击事件")
},
innerClick () {
console.log("触发了inner点击事件")
},
btnClick () {
console.log("触发了按钮点击事件")
}
}
});
</script>
</body>
</html>
.capture 添加事件侦听器是，使用事件捕获模式
<!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>v-on</title>
<script src="vue.min.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">

<h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
<div class="outer" @click.capture="outerClick">
<div class="inner" @click.capture="innerClick">
<button @click="btnClick">事件捕获</button>
</div>
</div>
<p>当给inner div、outer div都添加.capture修饰符的时候</p>
<p>当点击按钮时，会从外到里依次触发outer点击事件、inner点击事件、按钮点击事件</p>
<p>当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件</p>
<p>当点击outer div时，只触发outer点击事件</p>
<p>这就是事件捕获</p>


<h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
<div class="outer" @click.capture="outerClick">
<div class="inner" @click="innerClick">
<button @click="btnClick">事件捕获</button>
</div>
</div>
<p>当只给outer div添加.capture修饰符的时候</p>
<p>当点击按钮时，会依次触发outer点击事件、按钮点击事件、inner点击事件</p>
<p>即为outer和outer内部分两部分，是事件捕获，但outer内部还有嵌套的部分仍是事件冒泡</p>
<p>当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件</p>
<p>当点击outer div时，只触发outer点击事件</p>


<h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click.capture="innerClick">
<button @click="btnClick">事件捕获</button>
</div>
</div>
<p>当只给inner div添加.capture修饰符的时候</p>
<p>当点击按钮时，会依次触发((inner点击事件、按钮点击事件)(事件捕获)、outer点击事件)(事件冒泡)</p>
<p>当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件，事件冒泡</p>
<p>当点击outer div时，只触发outer点击事件</p>

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
outerClick () {
console.log("触发了outer点击事件")
},
innerClick () {
console.log("触发了inner点击事件")
},
btnClick () {
console.log("触发了按钮点击事件")
}
}
});
</script>
</body>
</html>
.prevent  阻止默认事件
<body>
<div id="app">

<h2>.prevent阻止默认事件</h2>
<a href="http://www.baidu.com" @click.prevent="preventClick">百度一下 你就知道</a>
// 点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
preventClick () {
console.log("阻止了a标签的默认点击跳转事件")
}
}
});
</script>
</body>
.once 事件只触发一次
<body>
<div id="app">

<h2>.once事件只触发一次</h2>
<input type="button" value="只触发一次" @click.once="onceClick">

</div>
<script>
var vm = new Vue({
el: '#app',
data: {

},
// 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
methods: {
onceClick () {
console.log("事件只触发一次,点击再多次按钮，也只输出一次")
}
}
});
</script>
</body>
v-on 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

按键别名：
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

注意：在Windows系统键盘上meta对应windows徽标键(⊞)。

<body>
<div id="app">
// Enter键触发submit事件 下面三种写法都对
<input type="text" v-on:keyup.enter="submit" />
<input type="text" @keyup.enter="submit" />
<input type="text" @keyup.13="submit" />
</div>

<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
submit() {
console.log("enter键触发事件");
}
}
});
</script>
</body>
修饰符可以串联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">
<!--v-on: Vue中的事件绑定机制-->
<input type="button" value="按钮1" v-on:click="show" />
<!-- v-on: 指令可以简写为 @要绑定的事件-->
<input type="button" value="按钮2" @click="show" />

<h2>修饰符串联</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<!-- 既阻止了默认事件，又阻止了事件冒泡 -->
<a href="http://www.baidu.com" @click.stop.prevent="btnClick">修饰符串联</a>
</div>
</div>

<!-- Alt + C 触发事件 -->
<input type="text" @keyup.alt.67="altClick">
</div>

<script>
var vm = new Vue({
el: '#app',
data: {
msg: '天天向上'
},
// methods属性中定义当前Vue实例中所有可用的方法
methods: {
show: function () {
alert('hello!');
},
outerClick() {
console.log("触发了outer点击事件")
},
innerClick() {
console.log("触发了inner点击事件")
},
btnClick() {
console.log("触发了按钮点击事件")
},
altClick() {
console.log("Alt + C 触发事件")
}
}
});
</script>
</body

</html>

------------------- 

作者：sleepwalker_1992
来源：CSDN
原文：https://blog.csdn.net/sleepwalker_1992/article/details/82903246
版权声明：本文为博主原创文章，转载请附上博文链接！

posted @ 2019-02-28 16:26  lijjj  阅读(292)  评论(0)  编辑  收藏  举报