vue 修饰符

1、表单修饰符

• v-model.lazy：改变输入框的值时 value 不会改变，当光标离开输入框时，v-model 绑定的值 value 才会改变
• v-model.trim：类似于 trim()，把 v-model 绑定的值的首尾空格过滤
• v-model.number：将值转换为数字
  • 先输入数字的话，只取前面数字部分
  • 先输入字母的话，number 修饰符无效
• v-bind.sync：对一个 prop 进行双向绑定的简写，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit 向父组件 通信，通过这种间接的方式改变父组件的 data，从而实现子组件改变 props 的值
  • 子组件传递的事件名必须是 update:value，其中 value 必须与子组件中的 props 中声明的名称完全一致
  • 带有.sync 修饰符的 v-bind 不能和表达式一起使用（可使用计算属性），必须使用要绑定的属性名

父组件

<template>
  <child-com
    :age="age"
    @setAge="
      (res) => {
        age = res
      }
    "
  ></child-com>
</template>

子组件

<script>
  export default {
    methods: {
      onClick() {
        this.$emit('setAge', 18)
      },
    },
  }
</script>

等价写法

父组件

<template>
  <child-com :age.sync="age"></child-com>
</template>

子组件

<script>
  export default {
    onClick() {
      this.$emit('update:age', 18)
    },
  }
</script>

2、事件修饰符

• v-on.stop：阻止事件冒泡，event.stopPropagation()方法

• v-on.prevent：阻止原生事件，event.preventDefault()方法

• v-on.self：点击事件绑定的本身才会触发事件

• v-on.capture：反向冒泡，事件默认是由里往外冒泡，使用.capture 修饰符时候，事件触发由外往内捕获

• v-on.passive：当监听元素的滚动事件的时候，会一直触发 onscroll 事件，在移动端页面会卡顿，使用.passive 会直接执行默认行 为，不等 onscroll 事件完成。

  • 常用于监听 scoll、touchmove 事件使用
  • 每次事件产生，浏览器都会去查询一下是否有 preventDefault 阻止该次事件的默认动作，通过 passive 将内核线程查询跳过，可 以大大提升滑动的流畅度
  • passive 和 prevent 冲突，不能同时绑定在一个监听器上

• .native：在某个组件的根元素上监听一个原生事件。一般将事件绑定用在 html 原生标签**，**在组件标签上使用的时候，就要加上 native 修饰符，这样就可以像原生标签一样使用事件绑定

• 签上使用的时候，就要加上 native 修饰符，这样就可以像原生标签一样使用事件绑定

<!-- 执行顺序：1，2，4，3 -->
<div @click.capture="shout(1)">
  obj1
  <div @click.capture="shout(2)">
    obj2
  	<div @click="shout(3)">
      obj3
  		<div @click="shout(4)">obj4</div>
    </div>
  </div>
</div>

<!-- 滚动事件的默认行为（即滚动行为）将会立即触发，不会等待onScroll完成 -->
<!-- 其中包含event.preventDefault()情况 -->
<div v-on:scroll.passive="onScroll">滑动</div>

<!-- myself-button 可绑定click事件，类似button -->
<myself-button @click.native="add('组件标签，包含native的点击')" /></myself-button>

3、鼠标按键修饰符

• @click.left：鼠标左键
• @click.rigth：鼠标右键
• @click.midele：鼠标中键

4、键值修饰符

• @keydown/@keyup：键盘事件监听
  • 按键码：.enter/.tab/.delete/.space 等
  • 系统修饰键：.ctrl/.alt/.shift/.meta
  • .exact：控制精确的系统修饰符组合触发的事件

<button @keyup.enter="submit">key为Enter时触发</button>
<div @click.ctrl="submit">ctrl + click时触发</div>
<button @click.ctrl.exact="submint">有且只有ctrl被按下时触发</button>
<button @click.exact="submint">没有任何系统修饰符被按下时触发</button>