一、常用修饰符
1.1 表单修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| lazy | 填完信息，光标离开标签的时候，才会将值赋予给value | <input type="text" v-model.lazy="value"> |
| trim | 自动过滤用户输入的首空格字符，中间的空格不会过滤 | <input type="text" v-model.trim="value"> |
| number | 自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值 |
<input v-model.number="age" type="number"> |
1.2 事件修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| stop | 阻止了事件冒泡 ，相当于调用了event.stopPropagation |
<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>// 只输出1 |
| prevent | 阻止了事件的默认行为，相当于调用了event.preventDefault方法 |
<form v-on:submit.prevent="onSubmit"></form> |
| once | 绑定了事件以后只能触发一次，第二次就不会触发 | <button @click.once="shout(1)">ok</button> |
1.3 鼠标按钮修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| left | 左键点击 | <button @click.left="shout(1)">ok</button> |
| right | 右键点击 | <button @click.right="shout(1)">ok</button> |
| middle | 中键点击 | <button @click.middle="shout(1)">ok</button> |
1.4 键盘修饰符
键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：
- 普通键（enter、tab、delete、space、esc、up…）
- 系统修饰键（ctrl、alt、meta、shift）
<!-- 只有按键为keyCode的时候才触发 -->
<input type="text" @keyup.keyCode="shout()">
还可以通过以下方式自定义一些全局的键盘码别名
<!-- Vue.config.keyCodes.f5 = 116; -->
<!--预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法-->
<input type="text" @keydown.f2="prompt()">
1.5 v-bind修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| sync | 实现子组件props的双向绑定 | <BT :age.sync="age"></BT> |
| prop | 设置自定义标签属性，避免暴露数据，防止污染HTML结构 | <input id="uid" title="title1" value="1" :index.prop="index"> |
| 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()">a</a>
甚至会报错：
[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>AT</p> <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>BT</p> <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