v-on

      事件繫結指令，簡寫可以使用

<input type="button" v-bind:title="mytile"  value="屬性" @:click="show"/>

繫結點選事件：click

<input type="button" v-bind:title="mytile"  value="屬性" v-on:click="show"/>

<script>
 var vm = new Vue({
  el: '#app', 
  data: {
   msg: '123',
   msg2:'<h1>我是h1</h1>',
   mytile:'v-bind繫結的屬性'
  },
  methods:{
   show:function(){
    alert(123456)
   }
  }
 })
</script>
 

事件修飾符

阻止冒泡  .stop

<div @click="divclike">
    <input type="button" value="點選" @click.stop="btnclike" />
   </div>

.prevent阻止預設事件

<a href="https://www.baidu.com" @click.prevent="linkclike">有問題，百度一下</a>

methods:{
   divclike(){
    alert('div')
   },
   btnclike(){
    alert('button')
   },
   linkclike(){
    alert('a標籤點選')
   }
  }
 

.capture新增事件監聽器使用事件捕獲模式,從外往裡出發事件,先輸出div事件，再輸出input事件

<div @click.capture="divclike">
    <input type="button" value="點選" @click.stop="btnclike" />
   </div>

.self只有點選div自身才起作用，input點選不起作用

<div @click.self="divclike">
    <input type="button" value="點選" @click.stop="btnclike" />
   </div>
 

.once事件只觸發一次,點選一次後就看沒有效果了

<a href="https://www.baidu.com" @click.prevent.once="linkclike">有問題，百度一下</a>