VueJS - 事件

v-on 是新增到 DOM 元素上的屬性，用於在 VueJS 中監聽事件。

點選事件

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

輸出

以下程式碼用於為 DOM 元素分配點選事件。

<button v-on:click = "displaynumbers">Click ME</button>

v-on 有一個簡寫形式，這意味著我們也可以如下呼叫事件：

<button @click = "displaynumbers">Click ME</button>

點選按鈕時，它將呼叫方法“displaynumbers”，該方法接收事件，我們在瀏覽器中對其進行了控制檯輸出，如上所示。

現在我們將檢查另一個事件 mouseover mouseout。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

在上面的示例中，我們建立了一個寬度和高度為 100px 的 div。它被賦予了紅色背景色。在滑鼠懸停時，我們將顏色更改為綠色，在滑鼠移出時，我們將顏色更改回紅色。

因此，在滑鼠懸停期間，會呼叫一個名為 changebgcolor 的方法，一旦我們把滑鼠移出 div，就會呼叫一個名為 originalcolor 的方法。

操作如下：

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

如上所示，兩個事件 - mouseover 和 mouseout - 被分配給 div。我們建立了一個 styleobj 變數，併為其提供了要分配給 div 的所需樣式。同一個變數使用 v-bind:style = ”styleobj” 繫結到 div 上。

在 changebgcolor 中，我們使用以下程式碼將顏色更改為綠色。

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

使用 stylobj 變數，我們將顏色更改為綠色。

類似地，以下程式碼用於將其更改回原始顏色。

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

這就是我們在瀏覽器中看到的。

當我們滑鼠懸停時，顏色將更改為綠色，如下面的螢幕截圖所示。

事件修飾符

Vue 在 v-on 屬性上提供了事件修飾符。以下是可用的修飾符：

.once

允許事件只執行一次。

語法

<button v-on:click.once = "buttonclicked">Click Once</button>

在呼叫修飾符時，我們需要新增點運算子，如上面的語法所示。讓我們在一個示例中使用它，並瞭解 once 修飾符的工作原理。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

輸出

在上面的示例中，我們建立了兩個按鈕。帶有“單擊一次”標籤的按鈕添加了 once 修飾符，另一個按鈕沒有任何修飾符。這就是按鈕定義的方式。

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

第一個按鈕呼叫方法“buttonclickedonce”，第二個按鈕呼叫方法“buttonclicked”。

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

在 clicknum 和 clicknum1 中定義了兩個變數。當點選按鈕時，這兩個變數都會遞增。這兩個變數都初始化為 0，並且輸出顯示在上面。

點選第一個按鈕時，變數 clicknum 遞增 1。在第二次點選時，數字不會遞增，因為修飾符阻止它執行或執行分配給按鈕點選的任何操作項。

點選第二個按鈕時，執行相同的操作，即變數遞增。在每次點選時，值都會遞增並顯示。

以下是我們在瀏覽器中獲得的輸出。

.prevent

語法

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

輸出

如果我們點選 clickme 連結，它將傳送一個警報“錨標籤被點選”，並且它將在新標籤頁中開啟連結 https://www.google.com，如下面的螢幕截圖所示。

現在這以正常方式工作，即連結按我們想要的方式開啟。如果我們不希望連結開啟，我們需要向事件新增一個修飾符“prevent”，如下面的程式碼所示。

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

新增後，如果我們點選按鈕，它將傳送一條警報訊息，並且不再開啟連結。prevent 修飾符阻止連結開啟，並且只執行分配給標籤的方法。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

輸出

點選連結時，它將顯示警報訊息，並且不再開啟 url。

事件 - 鍵修飾符

VueJS 提供了鍵修飾符，基於這些修飾符，我們可以控制事件處理。假設我們有一個文字框，我們希望僅在按下 Enter 時呼叫該方法。我們可以透過向事件新增鍵修飾符來做到這一點，如下所示。

語法

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

我們想要應用於事件的鍵是 V-on.eventname.keyname（如上所示）

我們可以使用多個鍵名。例如，V-on.keyup.ctrl.enter

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

輸出

在文字框中輸入一些內容，我們將在按下 Enter 時看到它被顯示。

自定義事件

父元件可以使用 prop 屬性向其子元件傳遞資料，但是，我們需要在子元件發生更改時告訴父元件。為此，我們可以使用自定義事件。

父元件可以使用 v-on 屬性監聽子元件事件。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

輸出

以上程式碼展示了父元件和子元件之間的資料傳遞。

元件使用以下程式碼建立。

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

有一個 v-for 屬性，它將迴圈遍歷 languages 陣列。陣列中包含一列語言。我們需要將詳細資訊傳送到子元件。陣列的值儲存在 item 和 index 中。

v-bind:item = "item"
v-bind:index = "index"

要引用陣列的值，我們需要先將其繫結到一個變數，並且使用 props 屬性引用該變數，如下所示。

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

props 屬性包含陣列形式的 item。我們也可以引用索引，如下所示：

props:[‘item’, ‘index’]

元件中還添加了一個事件，如下所示：

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

事件的名稱是 showlanguage，它呼叫一個名為 languagedisp 的方法，該方法在 Vue 例項中定義。

在元件中，模板定義如下：

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

建立了一個按鈕。按鈕將根據語言陣列中的計數建立。點選按鈕時，會呼叫一個名為 displayLanguage 的方法，並將點選的按鈕項作為引數傳遞給函式。現在，元件需要將點選的元素髮送到父元件以進行顯示，操作如下：

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

方法 displayLanguage 呼叫 this.$emit(‘showlanguage’, lng);

$emit 用於呼叫父元件方法。方法 showlanguage 是在元件上使用 v-on 給出的事件名稱。

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

我們正在傳遞一個引數，即點選的語言名稱，傳遞到主父 Vue 例項的方法，該方法定義如下。

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

在這裡，emit 觸發 showlanguage，進而從 Vue 例項方法中呼叫 languagedisp。它將點選的語言值分配給變數 languageclicked，並在瀏覽器中顯示，如下面的螢幕截圖所示。

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

以下是我們在瀏覽器中獲得的輸出。

列印頁面