v-on及其常用修饰符

v-on

v-on可以监听DOM事件，同时在触发时可以运行一些js代码，其语法糖为@

v-on可以绑定单个事件

    <button v-on:click="myClick()">button</button>

v-on可以绑定多个事件

 <div v-on="{mouseout:outTest,mouseover:overTest}">click</div>

为了使方法仅仅处理数据逻辑，而不是处理DOM事件的细节，v-on的事件修饰符就是解决这个问题的

• .stop修饰符，只会执行本标签绑定的方法，不会执行上层绑定的方法

   <div @click="divClick()">
    <button @click.stop="stopTestClick()">按钮1.stop</button>
    </div>
  

• .prevent修饰符，使得表单内容不会默认提交到服务器，而是只执行方法

   <form action="baidu">
      <input type="submit" value="submit" @click.prevent= "preventTest()">
    </form>
  

• 串联修饰符 .stop.prevent 既不会执行上层绑定的方法，又不会将数据提供给服务器

  <a href="http://weswing.cn/"> 超链接默认设置</a>
   <a  href="http://weswing.cn/" v-on：click.stop.prevent = "test">带有修饰符的超链接</a>
  

• .once修饰符，绑定的事件只会执行一次

    <button @click.once="onceTest()">按钮3.once</button>
  

• .native，在自定义元素组件中可以监听子组件触发的自定义事件，但为了给原生节点绑定DOM事件，而不是组件中的自定义事件，则用.native

  <cpn v-on:click.native="click()"></cpn>   //在父组件中调用，cpn是子组件
   click(){
          console.log('我是子组件中的方法');  //父组件中的方法
  }
  

• keyup.enter，只在enter键抬起后，将内容提交，如果没有,enter修饰符，则每按下一个键就会执行一次方法，enter可别替换成其他键

  <form action="baidu">
      <input type="text"  @keyup.enter="keyTest()">
  </form>