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>

 

posted @ 2019-12-26 01:08  All_just_for_fun  阅读(251)  评论(0编辑  收藏  举报