vuejs常用修饰符

一、常用修饰符

1.1 表单修饰符

修饰符	作用	使用
lazy	填完信息，光标离开标签的时候，才会将值赋予给value
trim	自动过滤用户输入的首空格字符，中间的空格不会过滤
number	自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值

1.2 事件修饰符

修饰符	作用	使用
stop	阻止了事件冒泡 ，相当于调用了event.stopPropagation	ok // 只输出1
prevent	阻止了事件的默认行为，相当于调用了event.preventDefault方法
once	绑定了事件以后只能触发一次，第二次就不会触发	ok

1.3 鼠标按钮修饰符

修饰符	作用	使用
left	左键点击	ok
right	右键点击	ok
middle	中键点击	ok

1.4 键盘修饰符

键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：

• 普通键（enter、tab、delete、space、esc、up…）
• 系统修饰键（ctrl、alt、meta、shift）

<input type="text" @keyup.keyCode="shout()">

还可以通过以下方式自定义一些全局的键盘码别名

<input type="text" @keydown.f2="prompt()">

1.5 v-bind修饰符

修饰符	作用	使用
sync	实现子组件props的双向绑定
prop	设置自定义标签属性，避免暴露数据，防止污染HTML结构
camel	将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox

二、.sync

2.1 背景

日常开发时，我们总会遇到需要父子组件双向绑定的问题，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的。那么同时，vue中也提供了一种解决方案.sync修饰符。

2.2 .sync修饰符之前的写法

• 父组件

  <BT :age="age" @update:age="$event => age = $event">BT>
  

• 子组件

  this.$emit('update:age', 20)
  

子组件使用$emit('update:xxx', newVal)向父组件发送事件，注意这里的事件名称update:xxx是一种约定的写法，使用其它事件名称是同样的效果。

2.3 使用.sync修饰符的写法

为了方便这种写法，vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖。sync在2.3版本引入，作为一个事件绑定 语法糖。

• 父组件

  <BT :age.sync="age">BT>
  

• 子组件

  this.$emit('update:age', 20)
  

三、.native

有时候，会想在某个自定义组件上监听一个原生事件，就像这样：

<BT @click="click()">BT>

此时click事件并不起作用，需要借助.native修饰符：

<BT @click.native="click()">BT>

需要注意的是给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。例如：

<a @click.native="click()">aa>

甚至会报错：

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <a>.

四、.prop

• .prop的修饰符用来指定绑定的值不应该被props解析，而应该作为dom的属性绑定在元素上。

  <template>
    <div>
      <p>ATp>
      <BT :age.prop="20">BT>
      <BT :age="20">BT>
    div>
  template>
  
  <script>
  import BT from "./BT.vue";
  
  export default {
    name: "AT",
    components: { BT },
    data() {
      return {};
    },
    methods: {},
  };
  script>
  

  <template>
    <div>
      <p>BTp>
      <p>{{ age }}p>
    div>
  template>
  
  <script>
  export default {
    name: "BT",
    props: {
      age: {
        type: Number,
        default: 18,
      },
    },
    data() {
      return {};
    },
    mounted() {},
    methods: {},
  };
  script>
  

  结果：

  AT
  BT
  18
  BT
  20
  

参考

• Vue .sync修饰符与$emit(update:xxx)
• 详解Vue.js中.native修饰符
• Vue常用的修饰符的作用详解
• Vue中常用的修饰符有哪些？
• Vue常用修饰符总结
• vue .prop修饰符