vue入门学习1_事件及修饰符
vue入门学习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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "showMe('事件', $event)">click me !!!!</button>
<a href="www.baidu.com" v-on:click.prevent = "showMe('事件修饰符，阻止默认事件', $event)">click me !!!!</a>
<div v-on:click = "showMe('事件修饰符1,阻止冒泡事件',$event)">
<button v-on:click.stop = "showMe('事件修饰符2，阻止冒泡事件', $event)">阻止冒泡事件</button>
</div>
space: <input type="text" v-on:keyup.space = "keyup($event)">
enter: <input type="text" v-on:keyup.enter = "keyup($event)">
shift: <input type="text" v-on:keyup.shift = "keyup($event)">
</div>
<script>
new Vue({
el:"#app",
data:{
name: "qianyadong"
},
methods:{
showMe: function (me, event){
alert(me)
},
keyup: function (event){
alert(event.which)
}
}
})
</script>
</body>
</html>
.stop修饰符
这个修饰符的作用就是阻止事件冒泡，不让他向外去执行函数，到此为止
.prevent修饰符
阻止组件本来应该发生的事件，转而去执行自己定义的事件
.capture修饰符
使用.capture修饰符时，网页就会按照捕获的方式触发函数，也就是从外向内执行，但是这个时候一定要注意，.capture修饰符一定要写在外层才能生效
.once修饰符
加上此修饰符之后相应的函数只能触发一次，无论你点击多少下，函数就只触发一次
.self修饰符
当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数
.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
