Vue 事件處理方法

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

v-on:click 單擊事件

<button class=" btn btn-info" v-on:click="add(1)"> + + </button>

<button class=" btn btn-danger " v-on:click="subtract(1)"> - - </button>

v-on:dblclick 雙擊事件

<!-- 縮寫語法 -->
<button class=" btn btn-info" @dblclick="add(5)"> + + </button>

<button class=" btn btn-danger " @dblclick="subtract(5)"> - - </button>

v-on:mousemove\mouseout 滑鼠事件

<div class="canvas" @mouseout ="update">
  {{ x }} - {{ y }}
</div>
new Vue({
el:".vue-app",data:{
  age: 25,x:0,y:0
 },methods:{
 add:function(inc){
  this.age += inc;
 },subtract:function(dec){
  this.age -= dec ;
 },update:function(event){
 // console.log(event);
  this.x = event.offsetX;
  this.y = event.offsetY;
 }
 }
}); 

然而許多事件處理邏輯會更為複雜，所以直接把 JavaScript 程式碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要呼叫的方法名稱。

Vue.js 事件修飾符

在事件處理程式中儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的資料邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令字尾來表示的。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止事件繼續傳播 -->
<p v-on:mousemove.stop> Stop </p>
 
<!-- 點選事件將只會觸發一次 -->
<button class=" btn btn-info" v-on:click.once="add(1)"> + + </button>
 
 <!--點選 A 連結彈出提示內容，不再過載頁面 -->
<p><a v-on:click.prevent ="alert() " href="http://blog.023xs.cn" rel="external nofollow" >blog.023xs.cn</a></p>

注意事項：使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 只會阻止對元素自身的點選。

Vue 按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符：

<!-- 使用者輸入內容時，按下Enter 鍵才會觸發事件 -->
<input v-on:keyup.enter="Email" type="text" class="form-control" placeholder="Email">
 
<!-- 使用者輸入內容時，按下刪除”或“退格”鍵 鍵才會觸發事件 -->
<input v-on:keyup.delete="Email" type="text" class="form-control" placeholder="Email">

全部的按鍵別名：

.enter

.tab

.delete (捕獲“刪除”和“退格”鍵)

.esc

.space

.up

.down

.left

.right

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名，當然也可以通過全域性 config.keyCodes 物件自定義按鍵修飾符別名。

補充知識：vue給同一元素繫結單擊click和雙擊事件dblclick，執行不同邏輯

在做專案過程中，需求是點選孔位單擊彈出對話方塊檢視產品總數，雙擊彈出對話方塊檢視詳情。一開始直接click和dblclick寫在標籤裡面，但是不管怎麼樣，總是執行單擊事件

解決辦法：利用計時器，在大概時間模擬雙擊事件

html部分程式碼：

 <div class="grid-content">
 <el-button 
　　　　v-for="(item,index) in items" :key="index" 
　　 @click="storageCount(item.id)" 
　　 @dblclick.native="storageDetail(item.id)" 
　　　 class="inline-cell" 
　　 :class="colors[item.status]">
   {{item.id}}</el-button>
 </div>

.native主要用於監聽元件根元素的原生事件,主要是給自定義的元件新增原生事件。

官方對.native修飾符的解釋為：有時候，你可能想在某個元件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native

js部分程式碼

<script>
import desDialog from './dialog';
import detailDialog from './detailDialog';
var time = null; // 在這裡定義time 為null 
export default {
 name: 'storeTable',components: {
 desDialog,detailDialog
 },props: ['providerid'],data() {
 return {
  colors: ['space','isBuy'],showDialog: false,showDialogT: false
 };
 },methods: {
　　// 單擊事件函式
 storageCount(id) {
  clearTimeout(time); //首先清除計時器
  time = setTimeout(() => {
  this.showDialog = !this.showDialog; 
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageCount',obj);
  },300); //大概時間300ms
 },　　// 雙擊事件函式，清除計時器，直接處理邏輯
 storageDetail(id) {
  clearTimeout(time); //清除
  this.showDialogT = !this.showDialogT;
  const obj = {};
  obj.cutname = id;
  obj.providerid = this.providerid;
  this.$store.dispatch('GetStorageDetail',obj);
 },close() {
  this.showDialog = false;
 },closeT() {
  this.showDialogT = false;
 }
 }
};
</script>

以上這篇vue雙擊事件2.0事件監聽(點選-雙擊-滑鼠事件)和事件修飾符操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。