vue常用修饰符-- stop,prevent,.enter,once,lazy,number,trim

1 v-on 中的常用修饰符

1) .stop 阻止了事件冒泡

<div @click="divClick">

  父元素

  <button @click.stop="btnClick">点击</button>

</div>

2) .prevent 取消默认事件

  <a href="http://www.baidu.com" @click.prevent="aClick"> 百度一下 </a>

3) 键盘事件[keyCode(键盘编码) | keyAlias(键盘简写) ]

<input type="text" @keyup.enter="keyUp" />

4) 监听自定义组件的跟元素原生事件 .native

  //通过native才可监听到itemClick事件

  (父)

  <zj @click.native="itemClick"></zj>

  (子zj.vue)

  <template>

    <div>

      我是子元素

    </div>

  </template>

5) .once 只能触发一次回调

  <button @click.once="onceClick()"> </button>  

import zj form '@components/zj.vue'

  components:{

    zj,

  },

  methods:{

    divClick(){

      console.log('父元素被点击了')

    },

    btnClick(){

      console.log('按钮被点击了')

    },

    aClick(){

      console.log('a标签没跳转');

      //在做其他处理

    },

    keyUp(){

      console.log('keyUp被触发了');

    },

    itemClick(){

      console.log('itemClick被点击了');

    },

    onceClick(){

      console.log('onceClick被点击了');

    }

  }

2 v-model 常用修饰符

 1）.lazy 懒惰的意思：不要实时更新数据，当确定信息完成后再发生事件.

    失去焦点或回车之后才再次更新(默认自带)。

 <input type = "text" v-model.lazy="msg">

 <div>{{ msg }}</div>

2）.number 更改为number类型

<input type = "text" v-model.number="age">

<div> {{ typeof age }} </div>

3）.trim 过滤收尾空格