1.事件监听
在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。
1.1在触发事件时执行JavaScript代码
v-on允许在触发事件时执行JavaScript代码
Vue
<div id="app">
<button v-on:click="count+=Math.random()">随机数</button>
<p>自动生成的随机数是{{count}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
count:0
}
})
</script>1.2使用按键修饰符监听按键
在监听键盘事件时，经常需要检查常见的键值。
为了方便开发，Vue允许为v-on添加按键修饰符来监听按键，如Enter、空格、Shift和PageDown等
下面使用Enter来进行演示
Vue
<div id="app">
<input type="text" v-on:keyup.enter="submit">
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
submit() {
console.log('有点困了')
}
}
})
</script>2.事件修饰符
事件修饰符是自定义事件行为，配合v-on指令来使用，写在事件之后，用”.”符号连接，如”v-on:click.stop”表示阻止冒泡。
| 修饰符 | 说明 |
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认事件行为 |
| .capture | 事件捕获 |
| .self | 将事件绑定到自身，只有自身才能触发 |
| .once | 事件只触发一次 |
2.1 .stop阻止事件冒泡
在前端开发中，复杂的页面结构需要很多事件来完成交互行为。
默认的事件传递方式是冒泡，所以同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止冒泡事件。
Vue
<div id="app">
<div v-on:click="doparent">
<button v-on:click="dothis">事件</button>
<button v-on:click.stop="dothis">阻止事件冒泡</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
doparent(){
console.log("fxxxkthisworld")
},
dothis(){
console.log("我是被单击元素事件")
}
}
})
</script>2.2 .prevent阻止默认事件行为
HTML标签具有自身特性，例如，<a>标签被单击时会自动跳转。
在实际开发中，<a>标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止<a>标签的默认行为。
Vue
<div id="app">
<a href="baidu.com" v-on:click.prevent>阻止默认行为</a>
<a href="baidu.com">不阻止默认行为</a>
</div>
<script>
var vm = new Vue({
el:'#app'
})
</script>2.3 .capture事件捕获
事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。
Vue
<div id="app">
<div v-on:click="doparent">
<button v-on:click.capture="dothis">事假捕获</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
methods:{
doparent(){
console.log("我是父元素的单击事件")
},
dothis(){
console.log("我是子元素的单击事件")
}
}
})
</script>2.4 .self自身触发
事件修饰符 .self 用来实现只有DOM元素本身会触发事件。
Vue
<style>
.odiv1{
width: 100px;
height: 100px;
background: #aaa; margin: 5px;
}
.odiv2{
width: 80px;
height: 80px;
background: pink;
}
<div id="app">
<div class="odiv1" v-on:click.self="doparent">1
<div class="odiv2" v-on:click="dothis">2</div>
</div>
<div class="odiv1" v-on:click="doparent">1
<div class="odiv2" v-on:click.self="dothis">2</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
methods:{
doparent(){
console.log('我是父级元素的点击事件')
},
dothis(){
console.log('我是子级元素的点击事件')
}
}
})
</script>2.5 .once只触发一次
事件修饰符.once用于阻止事件多次触发，只触发一次。
Vue
<div id="app">
<button v-on:click.once="dothis">只执行一次</button></div>
<script>
var vm = new Vue({
el:'#app',
methods:{
dothis(){
console.log('当前元素的单击事件只能点击一次')
}
}
})
</script>