提高开发效率的11种Vue常用修饰符前言修饰符做为vue的重要组成成分之一 ,不管是在学习中，还是在日常开发中，利用好

前言

修饰符做为vue的重要组成成分之一 ,不管是在学习中，还是在日常开发中，利用好修饰符可以大大地提高开发的效率,本文列举11种常用的修饰符

1.lazy

.lazy修饰符的作用:在input标签绑定v-model用lazy修饰之后，改变输入框的值时，vue并不会立即监听input value的改变，会在input失去焦点之后，才会触发input Value的改变。


 <input v-model.lazy="username" type="text"><br><br>
 {{ username }}
 
  data() {
    return {
      username: '张子枫'
    }
  }

2.number

number修饰符的作用:将输入字符串转为有效数字,但是先输入数字和字符串分两种情况

先输入数字只取数字部分

2. 先输入字符串.number修饰符无效


  <input v-model.number="username" type="text"><br><br>
  {{ username }}
  
   data() {
    return {
      username: ''
    }
  }

3.trim

.trim修饰符的作用:过滤掉v-model绑定的值首尾的空格,类似于JavaScript中的trim()方法


 <input v-model.trim="username" type="text"><br><br>
 {{ username }}
 
 data() {
    return {
      username: 'zzf'
    }
  }

4.stop

.stop修饰符作用:阻止事件冒泡

没加.stop修饰符

 <div @click="father1('父')">父<br>
   <button @click="father1('子')">点击</button>
 </div>
 
  methods: {
    father1(h) {
      console.log('--------', h) // 子 父
    }
  }

加了.stop修饰符

 <div @click="father1('父')">父<br>
   <button @click.stop="father1('子')">点击</button>
 </div>
 
  methods: {
    father1(h) {
      console.log('--------', h) // 子
    }
  }

5.capture

.capture修饰符的作用:事件默认是从里到外,加了.capture修饰符后，事件变成外到里

没加.capture修饰符(事件是从里到外)

 <div @click="father1('父')">父<br>
      <button @click="father1('子')">点击</button>
  </div>
  
  methods: {
    father1(h) {
      console.log('--------', h) // 子 父
    }
  }

2.加了.capture修饰符(事件是从外到里)

 <div @click.captrue="father1('父')">父<br>
   <button @click.stop="father1('子')">点击</button>
 </div>
 
  methods: {
    father1(h) {
      console.log('--------', h) // 父 子
    }
  }

6.self

.self修饰符的作用:点击绑定事件元素本身触发


 <div @click.self="father1('父')">父<br>
    <button @click="father1('子')">点击</button>
 </div>
 
methods: {
    father1(h) {
      console.log('--------', h) //点子为输出子 点父为输出父
    }
  }

7.once

.once修饰符的作用:事件绑定的元素,事件只执行一次

没加.once修饰符(事件执行多次)


 <button @click="btn">点击</button> <br><br>
 执行了{{ i }}次
 
 export default {
  data() {
    return {
      i: 0
    }
  }, methods: {
    btn() {
      this.i++
    }
  }

加了.once修饰符(事件只执行一次)

 <button @click.once="btn">点击</button> <br><br>
 执行了{{ i }}次
 
 export default {
  data() {
    return {
      i: 0
    }
  }, methods: {
    btn() {
      this.i++
    }
  }

8.prevent

.prevent修饰符的作用:阻止默认事件(例如a链接)

没加.prevent修饰符(先跳转然后输出1)


 <a href="#跳走了" @click="event(1)">a链接</a>
 
  methods: {
    event(i) {
      console.log('---------------------', i) // 先跳转然后输出1
    }
  }

2.加了.prevent 修饰符(不会跳转只会输出1)

 <a href="#跳走了" @click.prevent="event(1)">a链接</a>
 
  methods: {
    event(i) {
      console.log('---------------------', i)// 不会跳转 只会输出1
    }
  }

9.native

native修饰符的作用:加在自定义组件事件,保证事件执行

没加.native修饰符(不会触发事件)

 <Son @click.native="custom">自定义组件</Son>
  methods: {
    custom() {
      console.log('执行了') // 没有输出
    }
  }

加了.native修饰符(事件被触发)

 <Son @click.native="custom">自定义组件</Son>
  methods: {
    custom() {
      console.log('执行了') // 执行了
    }
  }

10.sync

.sync修饰符的作用:当父组件传值给子组件,子组件想要改变这个值,可以用下面方式

 父组件里
 <father :num="pid" @update:num="val => pid = val" />
  简写： <father :num.sync="pid" />
  子组件里
  this.$emit('update:num', newValue)

11 keyCode

Vue 为一些常用的按键提供了别名:

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

举个栗子: .enter修饰符的作用:键盘按下enter键执行

 <input v-model="username" type="text" @keydown.enter="enters"><br><br>
 {{ enter }}
 
  methods: {
    enters() {
      this.enter = this.username + '按下了Enter键'
    }
  }

感谢阅读^_^