Vuejs學習筆記(一)-10.v-on監聽指令的使用

阿新 • • 發佈：2021-07-01

v-on是事件監聽指令，用於監聽標籤的一些列操作，如點選操作，如果堅挺到有點選操作，可以執行對應的內部方法。

一、事件監聽基本使用程式碼如下,

1.做事件監聽時，如果沒有引數，在html中呼叫方法時，可以不使用括號()

2.事件監聽的寫法1是v-on:click="methodName"

3.事件監聽的寫法2(語法糖寫法)是@click="methodName"

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-事件監聽的使用.html
 5 @contact:invoker2021@126.com
 6 
 @descript:
 7 @Date:2021/7/1 11:08
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-事件監聽的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ counter }}</h2>
20 
   <button v-on:click="increment">+</button>
21   <button @click="decrement">-</button>
22 </div>
23 
24 <script src="../js/vue.js"></script>
25 <script>
26 
27   const app = new Vue({
28     el: '#app',
29     data: {
30       message: 'hello',
31       counter:0
32 
     },
33     methods:{
34       increment(){
35         this.counter++
36       },
37       decrement(){
38         this.counter--
39       }
40     }
41   })
42 </script>
43 </body>
44 </html>

二、事件監聽有引數

事件監聽對應的方法有引數時的玩法如下：

程式碼如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 02-v-on 事件監聽引數.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 11:17
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>02-v-on 事件監聽引數</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  按鈕1監聽事件對應的方法沒有引數,可省略括號-->
21   <button @click="btn1Click">按鈕1</button>
22   <!--  按鈕2監聽事件對應的方法沒有引數，寫上括號-->
23   <button @click="btn1Click()">按鈕2</button>
24   <!--  按鈕3監聽事件對應的方法有引數，傳入-->
25   <button @click="btn3Click('按鈕3被列印')">按鈕3</button>
26   <!--  按鈕4監聽事件對應的方法有引數，但是不傳入，列印結果則顯示為undefined-->
27   <button @click="btn3Click()">按鈕4</button>
28   <!--  按鈕5監聽事件對應的方法有引數，但是省略小括號，這時，VUE會預設將瀏覽器生成的event事件物件作為引數傳入到函式中-->
29   <button @click="btn3Click">按鈕5</button>
30   <!--  按鈕6監聽事件對應的方法既有普通引數，又有event物件引數-->
31   <button @click="btn6Click('按鈕6被列印',$event)">按鈕6</button>
32 
33 </div>
34 <script src="../js/vue.js"></script>
35 <script>
36 
37   const app = new Vue({
38     el: '#app',
39     data: {
40       message: 'hello Vue'
41     },
42     methods: {
43       btn1Click() {
44         console.log('btn1Click');
45       },
46       btn3Click(params1) {
47         console.log('btn3Click', params1);
48       },
49       btn6Click(param1,event){
50         console.log('btn6click',param1,event);
51       }
52     }
53   })
54 </script>
55 </body>
56 </html>