v-model

v-model既可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件

当其作用于表单元素时vue会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value属性和input事件,而当其作用于单选框或多选框时,它会生成checked属性和change事件。

v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value属性和input事件。

v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单向数据流,v-model 只是语法糖而已。

<Comp v-model="data" />

<Comp :value="data" @input="data=$event.target.value" />

我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论:

在给组件添加v-model属性时,默认会把value作为元素的属性,然后把’input’事件作为实时传递value的触发事件

v-model还可结合lazy使用,写成v-model.lazy,这样写可以在用户按回车或者失去焦点后,被v-model绑定的元素才会作用上值,可以减少服务器压力。

开发者可以通过组件的model配置来改变生成的属性和事件

// Comp
const Comp = {
     
  model: {
     
    prop: "number", // 默认为 value
    event: "change" // 默认为 input
  }
  // ...
}
<Comp v-model="data" />

<Comp :number="data" @change="data=$event" />

你可能感兴趣的:(vue.js)