Vue中提供了多个事件修饰符， once、passive是后面新增的两个，once用于限定事件只触发一次，passive用于修饰的事件发生后立即触发，用于提升移动端性能
表单输入修饰符
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符，从而转变为使用change事件进行同步，举个例子：
<input placeholder="lazy" v-model.lazy="msg" @input="input" @change="change">
.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符，这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值，举个例子：
<input placeholder="number" v-model.number="age" @input="input">
.trim
如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符，举个例子：
<input placeholder="trim" v-model.trim="trim" @input="input">
子组件替换/合并已有的特性
在Vue中对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入type="text"就会替换掉 type="date"并把它破坏！庆幸的是，class和 style特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值，举个例子：
<div> <base-input type="text"></base-input> </div>
Vue.component('base-input', { template: `<input type="date" placeholder="replace">` }) new Vue({ el: '#app', })
在上例中input的type值为date，class为deafault，在使用子组件时，向子组件中传入type="text"，此时input的type值会被替换为text，class值会被合并为"default out"，那么如果想要禁用属性继承怎么办呢？可以在组件的选项中设置inheritAttrs:false，举个例子：
Vue.component('base-input', { inheritAttrs: false, template: `<input type="date" placeholder="replace">` })
但是inheritAttrs:false选项不会影响style和class的绑定，因此style和class还是会合并
.sync修饰符
在有些情况下，可能需要对一个 prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源，因此Vue提供了sync修饰符，举个例子：
<div> <span>{{title}}</span> <text-document v-bind:title.sync="title"></text-document> </div>
Vue.component('text-document', { props: ['title'], template: `<button @click="change">change</button>`, methods: { change () { this.$emit('update:title', 'change') } }, }) new Vue({ el: '#app', data() { return { title: 'default' } } })
当调用this.$emit('update:title', 'change')，父组件中的title就会改变
总结
这篇文章对Vue中一些容易忽视的点进行了简单的总结，希望看完之后能对大家有所帮助。也希望大家多多支持脚本之家。
您可能感兴趣的文章: