三、包含事件修饰符的v-on指令

   v-on

      事件绑定指令，简写可以使用 @:click

<input type="button" v-bind:title="mytile"  value="属性" @: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>