3.v-on
1.v-on参数传递问题：
- 方法不需要额外参数，那么方法后的小括号可以添加也可以省略
- 方法中有一个参数，如果不传递就会将原生事件event参数传递进去
- 同时传入其他参数和event时，通过$event传入事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="vue"> 9 <!--1.没有参数，加小括号和不加小括号是一样的--> 10 <button @click="btn1Click()">按钮1</button> 11 <button @click="btn2Click">按钮2</button> 12 13 <!--2.方法中有一个参数--> 14 <!--（1）带小括号和参数则正常显示--> 15 <button @click="btn3Click('btn3')">按钮3</button> 16 <!--（2）带小括号不带参数，参数传入undefined--> 17 <button @click="btn4Click()">按钮4</button> 18 <!--（3）不带小括号且不带参数，参数传入浏览器生成的MouseEvent对象传入参数中--> 19 <button @click="btn5Click">按钮5</button> 20 21 <!--3.方法中有普通参数和event对象--> 22 <!--（1）不带小括号不带参数，参数传入MouseEvent和undefined--> 23 <button @click="btn6Click">按钮6</button> 24 <!--（2）带小括号不带参数，参数传入undefined和undefined--> 25 <button @click="btn7Click()">按钮7</button> 26 <!--（3）需要传入event对象时，使用$event传递MouseEvent--> 27 <button @click="btn8Click($event, 123)">按钮8</button> 28 </div> 29 30 <!--导入Vue.js--> 31 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 32 <script type="text/javascript"> 33 let vm = new Vue({ 34 el: '#vue', 35 data: { 36 firstName: "Wang", 37 lastName: "ZhiHao" 38 }, 39 methods: { 40 btn1Click(){ 41 console.log("btn1"); 42 }, 43 btn2Click(){ 44 console.log("btn2"); 45 }, 46 btn3Click(str){ 47 console.log(str); 48 }, 49 btn4Click(str) 50 { 51 console.log("btn4："+ str) 52 }, 53 btn5Click(str) 54 { 55 console.log("btn5:" + str) 56 }, 57 btn6Click(event,abc) 58 { 59 console.log("btn6:" + event + " " + abc); 60 }, 61 btn7Click(event,abc) 62 { 63 console.log("btn7:" + event + " " + abc); 64 }, 65 btn8Click(ttt,abc) 66 { 67 console.log("btn8:" + ttt + " " + abc); 68 } 69 } 70 71 }); 72 </script> 73 </body> 74 </html>
2.v-on修饰符
- .stop：调用event.stopPropagation()，阻止事件向上冒泡
- .prevent：调用event.preventDefault()，阻止默认事件（例如表单提交）
- .(keyCode | keyAlias)：只当事件是一个特定按键触发时才触发回调
- .native：监听组件根元素的原生事件
- .once：只触发一次
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app" @click="div1Click"> 10 11 <!--1. .stop修饰符阻止事件向上冒泡--> 12 <div @click="div2Click"> 13 <button @click.stop="btnClick">按钮</button> 14 </div> 15 16 <!--2. .prevent修饰符阻止事件默认提交，再接.stop阻止事件冒泡--> 17 <form action="http://www.baidu.com"> 18 <input type="submit" value="提交" @click.prevent.stop="submitClick"> 19 </form> 20 21 <!--3. keyup只要键盘输入就执行方法,后接.enter就只监听enter键的输入--> 22 <input type="text" @keyup="keyUp"> 23 <input type="text" @keyup.enter="keyUp"> 24 25 <!--4. .once让按钮只触发一次事件回调--> 26 <button @click.once="ClickOnce">按钮</button> 27 28 </div> 29 30 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 31 <script type="text/javascript"> 32 33 let vm = new Vue({ 34 el: '#app', 35 data: { 36 firstName: "Wang", 37 lastName: "ZhiHao" 38 }, 39 methods: { 40 btnClick(){ 41 console.log("btnClick"); 42 }, 43 div1Click(){ 44 console.log("div1Click"); 45 }, 46 div2Click(){ 47 console.log("div2Click"); 48 }, 49 submitClick(){ 50 console.log("submitClick") 51 }, 52 keyUp(){ 53 console.log("keyUp") 54 }, 55 ClickOnce(){ 56 console.log("ClickOnce") 57 } 58 } 59 }) 60 </script> 61 </body> 62 </html>
