vue 中的事件绑定修饰符详解

<div id="root">
 //普通点击事件可获取事件对象
 <div @click="handleclick">button</div>
  //普通点击事件不可获取事件对象
 <div @click="handleclick1()">button</div>
  //普通点击事件可获取事件对象
 <div @click="handleclick2($event)">button</div>
 //阻止表单默认提交
 <form action="/abc"  @click="handleclick3">
  <input type="submit"/>
 </form>
  //prevent修饰符阻止默认行为
  <form action="/abc"  @click.prevent">
     <input type="submit"/>
 </form>
  //stop修饰符阻止冒泡
  <form action="/abc"  @click.stop">
     <input type="submit"/>
 </form>
  //self修饰符只有点击本身才会被触发，self要求，click事件只有在e.target = e.currentTaget的时候才会执行
  <div action="/abc"  @click.self">
      嘎嘎嘎嘎嘎
    <div>点我没反应</div>
 </div>
 //once只有第一次点击的时候会被触发，触发之后不再触发
  <div @click.once="handleclick">button</div>
//capture遵循的是捕获的规则不是冒泡的规则，点击button的时候正常是冒泡的规则先执行handleclickInner再执行handleclickOuter，加了capture之后先执行handleclickOuter
 <div @click.capture="handleclickOuter">
 <div @click.capture="handleclickInner">button</div>
 //按键修饰符
  <input @keydown ="handleKeyDown"/>//实时监听
  <input @keydown.enter ="handleKeyDown"/>//只有点击回车才执行
  <input @keydown.tab="handleKeyDown"/>//只有点击tab才执行
  <input @keydown.delete="handleKeyDown"/>//只有点击delete才执行
  <input @keydown.esc="handleKeyDown"/>//只有点击esc才执行
  //系统修饰符
   <input @keydown.ctrl="handleKeyDown"/>//只有按住回车才执行
  <input @keydown.shift="handleKeyDown"/>//只有按住tab才执行
  <input @keydown.alt="handleKeyDown"/>//只有按住delete才执行
  <input @keydown.meta="handleKeyDown"/>//只有按住esc才执行
  //鼠标按键修饰符
  <div @click.left="handleclick">button</div>//只有鼠标左键点击的时候才会执行
  <div @click.middle="handleclick">button</div>//只有鼠标中键点击的时候才会执行
  <div @click.right="handleclick">button</div>//只有鼠标右键点击的时候才会执行
</div>
</div>
<script>
 var vm =new Vue({
      el:"#root",
      methods:{
          handleclick:function(e){
                 console.log(e)//事件对象
          }   
           handleclick1:function(e){
                 console.log(e)//获取不到事件对象
          }  
           handleclick2:function(e){
                 console.log(e)//事件对象
          }   
           handleclick3:function(e){
                e.preventDefault()//阻止默认行为
          }     
      }
  })
</script>