Vue事件處理_ZenDei技術網路在線

[1]監聽事件 [2]事件修飾符 [3]滑鼠修飾符 [4]鍵值修飾符 [5]修飾鍵 ...

前面的話

　　Vue事件監聽的方式貌似違背了關註點分離(separation of concern)的傳統理念。實際上，所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上，它不會導致維護上的困難。使用v-on有以下好處：

　　1、掃一眼HTML模板便能輕鬆定位在JS代碼里對應的方法

　　2、無須在JS里手動綁定事件，ViewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易於測試

　　3、當一個ViewModel被銷毀時，所有的事件處理器都會自動被刪除。無須擔心如何自己清理它們

　　本文將詳細介紹Vue事件處理

事件監聽

　　通過v-on指令來綁定事件監聽器

<div id="example">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data: {
    counter: 0
  }
})
</script>

【方法】

　　許多事件處理的邏輯都很複雜，所以直接把JS代碼寫在 v-on 指令中有時並不可行。v-on指令可以接收一個定義的方法來調用

　　[註意]不應該使用箭頭函數來定義methods函數，因為箭頭函數綁定了父級作用域的上下文，所以this將不會按照期望指向 Vue 實例

<div id="example">
   <button v-on:click="num">測試按鈕</button>
   <p>{{message}}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    counter:0,
    message:''
  },
  methods: {
    num: function (event) {
      if (event) {
        this.message = event.target.innerHTML + '被按下' + ++this.counter + '次';
      }
    }
  }
})
</script>

【內聯語句】

　　除了直接綁定到一個方法，也可以用內聯JS語句

<div id="example">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
   <p>{{message}}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  },
  methods: {
    say: function (message) {this.message = message;}
  }
})
</script>

　　有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變數 $event 把它傳入方法

<div id="example">
  <button v-on:click="say('hi',$event)">Say hi</button>
  <button v-on:click="say('what',$event)">Say what</button>
   <p>{{message}}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  },
  methods: {
    say: function (message,event) {
      if(event){
        event.preventDefault();
      }  
      this.message = message;
    }
  }
})
</script>

事件修飾符

　　在事件處理程式中調用event.preventDefault()或event.stopPropagation()是非常常見的需求。儘管可以在methods中輕鬆實現這點，但更好的方式：methods只有純粹的數據邏輯，而不是去處理 DOM 事件細節

　　為瞭解決這個問題， Vue.js 為v-on提供了事件修飾符。通過由點(.)表示的指令尾碼來調用修飾符

.stop 阻止冒泡
.prevent 阻止預設事件
.capture 使用事件捕獲模式
.self 只在當前元素本身觸發
.once 只觸發一次

　　下麵是一些例子

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（比如不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

　　[註意]使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊

【stop】

　　阻止冒泡

<div id="example" @click="setVal1" style="border:1px solid black;width:300px;">
  <button @click="setVal">普通按鈕</button>
  <button @click.stop="setVal">阻止冒泡</button>
  <button @click="reset">還原</button>
  <div>{{result}}</div>
</div>

<script>var example = new Vue({
  el: '#example',
  data:{
    result:''
  },
  methods:{
    setVal(event){
      this.result+=' 子級 ';
    },
    setVal1(){
      this.result+=' 父級 ';
    },
    reset(){
      history.go()
    }
  }
})
</script>

【prevent】

　　取消預設事件

<div id="example">
  <a href="http://cnblogs.com" target="_blank">普通鏈接</a>
  <a @click.prevent href="http://cnblogs.com" target="_blank">取消預設行為</a>
</div>

<script>
var example = new Vue({
  el: '#example'
})
</script>

【capture】

　　事件捕獲模式

<div id="example" @click.capture="setVal1" style="border:1px solid black;width:300px;">
  <button @click.capture="setVal">事件捕獲</button>
  <button @click="reset">還原</button>
  <div>{{result}}</div>
</div>

<script>var example = new Vue({
  el: '#example',
  data:{
    result:''
  },
  methods:{
    setVal(event){
      this.result+=' 子級 ';
    },
    setVal1(){
      this.result+=' 父級 ';
    },
    reset(){
      history.go()
    }
  }
})
</script>

【self】

<div id="example">
  <div @click="setVal" :style="styleObj1">
    <div :style="styleObj2">普通</div>
    <button @click="reset">還原</button>
  </div>
  <div @click.self="setVal" :style="styleObj1">
    <div :style="styleObj2">self</div>
    <button @click="reset">還原</button>
  </div>  
</div>

<script>
var styleObj1 = {
  display:'inline-block',
  height:'60px',
  width:'120px',
  'background-color': 'lightblue'
};
var styleObj2 = {
  display:'inline-block',
  height:'30px',
  width:'60px',
  'background-color': 'lightgreen'
};
var example = new Vue({
  el: '#example',
  data:{
    styleObj1:styleObj1,
    styleObj2:styleObj2
  },
  methods:{
    setVal(event){
      event.target.style.outline="solid"
    },
    reset(){
      history.go()
    }
  }
})
</script>

【once】

　　只觸發一次

<div id="example">
  <button @click="setVal">普通按鈕</button>
  <button @click.once="setVal">觸發一次</button>
  <button @click="reset">還原</button>
  <div>{{result}}</div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    result:''
  },
  methods:{
    setVal(event){
      this.result+=' 內容 ';
    },
    reset(){
      history.go()
    }
  }
})
</script>

滑鼠修飾符

　　這些修飾符會限制處理程式監聽特定的滑鼠按鍵

.left 左鍵
.right 右鍵
.middle 滾輪

<div id="example">
  <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'分別用左、中、右鍵進行點擊，會出現不同的效果'
  },
  methods:{
    left(){
      this.message = 'left'
    },
    right(){
      this.message = 'right'
    },
    middle(){
      this.message = 'middle'
    },        
  }
})
</script>

鍵值修飾符

　　在監聽鍵盤事件時，經常需要監測常見的鍵值。 Vue 允許為 v-on 在監聽鍵盤事件時添加關鍵修飾符

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

　　記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

.enter 回車
.tab 製表鍵
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右

<div id="example">
  <button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'將游標置於按鈕上後，按下鍵盤上不同的按鍵，會有不同的效果'
  },
  methods:{
    enter(){
      this.message = 'enter'
    },
    tab(){
      this.message = 'tab'
    },
    delete1(){
      this.message = 'delete'
    }, 
    esc(){
      this.message = 'esc'
    },
    space(){
      this.message = 'space'
    },
    up(){
      this.message = 'up'
    },
    down(){
      this.message = 'down'
    },
    left(){
      this.message = 'left'
    },
    right(){
      this.message = 'right'
    },                 
  }
})
</script>

　　可以通過全局 config.keyCodes 對象自定義鍵值修飾符別名

// 可以使用 v-on:keyup.a
Vue.config.keyCodes.a = 65

<div id="example">
  <button @keyup.a="a"  @keyup.b="b">{{message}}</button>
</div>

<script>
Vue.config.keyCodes.a = 65;
Vue.config.keyCodes.b = 66;
var example = new Vue({
  el: '#example',
  data:{
    message:'按下鍵盤上的a鍵或b鍵'
  },
  methods:{
    a(){
      this.message = 'a'
    },
    b(){
      this.message = 'b'
    },    
  }
})
</script>

修飾鍵

　　可以用如下修飾符開啟滑鼠或鍵盤事件監聽，使在按鍵按下時發生響應

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

　　下麵一個例子

<div id="example">
  <button @click.ctrl="ctrl"  @click.alt="alt"  @click.shift="shift"  @click.meta="meta">{{message}}</button>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:'分別用按住輔助鍵ctrl、alt、shift、meta進行點擊，會出現不同的效果'
  },
  methods:{
    ctrl(){
      this.message = 'ctrl'
    },
    alt(){
      this.message = 'alt'
    },
    shift(){
      this.message = 'shift'
    },  
    meta(){
      this.message = 'meta'
    },           
  }
})
</script>