<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css"> .Odiv1{ width: 80px; height: 80px; background: #aaa; margin: 5px; } .Odiv2{ width: 50px; height: 50px; background: #ccc; } </style> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h3>一、事件处理</h3> <h4>1、鼠标事件</h4> <!-- increment增加 --> <button @click="inc($event)">+</button> <!-- v-bind单向绑定,只能显示data中的数据值 --> <!-- v-model双向绑定,既可以显示data的值,也可以修改data的数据 --> <input type="text" style="width: 50px;" v-bind:value="count" @keyup.up="inc($event)" @keyup.down="dec($event)"> <!-- decrement减少 --> <button @click="dec($event)">-</button> <h4>2、键盘事件</h4> <!-- $event表示事件对象,只要产生一个事件,就会自动生成对应的事件对象,在该对象中保存与事件相关的信息 --> <!-- enter表示必须敲回车才会触发事件处理程序 --> <!-- tab键只能用keydown去监听--> <input type="text" @keyup.enter="handleKey($event)" placeholder="请敲击回车"> <input @keyup.shift.s="handleSave()" placeholder="请敲击shift+s"> <h3>二、事件修饰符</h3> <h4>1、阻止事件冒泡</h4> <div @click="doParent()"> <button @click="doThis()">事件冒泡</button> <button @click.stop="doThis()">阻止事件冒泡</button> </div> <h4>2、阻止默认行为</h4> <div @click="doParent()"> <a href="https://www.baidu.com">不阻止默认行为</a> <a href="https://www.baidu.com" @click.prevent>阻止默认行为</a> <a href="https://www.baidu.com" @click.prevent.stop>既阻止默认行为又阻止事件冒泡</a> </div> <h4>3、设置事件传播方向为捕获方向,也就是从父元素向子元素传播事件</h4> <div @click.capture="doParent()"> <button @click="doThis()">事件捕获</button> </div> <h4>4、设置事件自身触发</h4> <div class="Odiv1" @click.self="doParent()">a <div class="Odiv2" @click="doThis()">b</div> </div> <h4>5、设置事件只触发一次</h4> <button>只执行一次</button> </div> <script> var vm = new Vue({ el: '#app', data: { count: 0 }, methods: { inc(e){ this.count++; // 通过事件对象的target属性获取真正引起该事件的那个网页标签 console.log(e.target.tagName) }, dec(e){ this.count--; console.log(e.target.tagName) }, handleKey(e){ console.log('键盘被敲击了'); console.log('用户敲击了'+e.key); // if(e.key=='Enter'){ // alert('通过测试') // } alert('通过测试') }, handleSave(){ console.log('shift+s组合键被敲击了'); }, doParent(){ console.log("我是父元素单击事件"); }, doThis(){ console.log("我是当前元素的单击事件"); } } }) </script> </body> </html>