<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>运算结果：{{count}}</h1> <p>--------------------</p> <button v-on:click="add">+</button> <button @click="sub">-</button> <p>--------------------</p> <button @click="btn1click()">btn1</button> <button @click="btn2click">btn2</button> <button @click="btn3click(1,'a',true,msg)">btn3</button> <button @click="btn4click(1,'a',true,msg,$event)">btn4</button> <p>--------------------</p> <!-- 1、阻止冒泡 --> <div class="box" @click="boxClick"> <button @click.stop="btn5click">btn5</button> </div> <p>--------------------</p> <!-- 2、阻止默认事件 --> <form action="http://www.baidu.com"> <input type="submit" value="submit" @click.prevent="doSubmit"> </form> <a href="http://www.baidu.com" @click.prevent="aClick">baidu</a> <p>--------------------</p> <!-- 3、响应一次事件 --> <button @click.once="btn6click">btn6</button> <p>--------------------</p> <!-- 4、键盘事件 --> <input type="text" @keyup="getMsg"> <input type="text" @keyup.enter="getMsg"> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', count: 0 } }, methods:{ add(){ this.count++; }, sub(){ this.count--; }, boxClick(){ console.log("box"); }, btn1click(arg1){ console.log(arg1);//undefined }, btn2click(arg1){ console.log(arg1);//事件对象 }, btn3click(arg1,arg2,arg3,arg4){ console.log(arg1,arg2,arg3,arg4); console.log(arguments); }, btn4click(arg1,arg2,arg3,arg4,event){ console.log(arg1,arg2,arg3,arg4,event); console.log(arguments); }, btn5click(event){ // event.stopPropagation();//阻止外层div触发点击事件 console.log("btn5"); }, btn6click(arg1){ console.log("btn6"); }, doSubmit(event){ //阻止默认事件 // event.preventDefault(); console.log("submit"); }, aClick(event){ //阻止默认事件 // event.preventDefault(); console.log("a"); }, getMsg(event){ console.log(event.keyCode); console.log("input"); console.log(event); } } }).mount('#app'); </script> </body> </html>