vue實現綁定事件的方法實例

vue.js中的事件綁定，使用< v-on:事件名=函數名>來完成的，這里函數名是定義在Vue實例中的methods對象中的，Vue實例可以直接訪問其中的方法。

事件綁定方式:

1、 直接在標簽中寫js方法

<button v-on:click="alert（'hi'）">執行方法的第一種寫法</button>

2、調用method的辦法

<button v-on:click="run()">執行方法的第一種寫法</button>
  
 <button @click="run()">執行方法的 簡寫 寫法</button>
export default {  
  data () { 

  },
  methods:{
   run:function(){
    alert('這是一個方法');
    }
   }
 }

(1)方法傳參，方法直接在調用時在方法內傳入參數

<button @click="result('111')">執行方法傳值111</button>
 <button @click="result('222')">執行方法傳值2222</button>

export default {  
  data () { 

  },
  methods:{
   result:function(val){
    alert(val);
    }
   }
 }

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令后綴來調用修飾符。

.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>

<!-- click 事件只能點擊一次 -->
<a v-on:click.once="doThis"></a>

按鍵修飾符

.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta