双向数据绑定v-model与v-decorator

数据绑定

1.单向数据绑定

        将数据写在html结构中,然后进行渲染,一旦HTML代码生成好后,就没有办法再进行改变了,如果有新的数据出现,那就必须要先把之前的HTML代码删掉,然后重新把新的数据和模板一起整合形成新的HTML代码,再插入到文档流中

2.双向数据绑定

     数据模型和视图之间的双向绑定。当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化;可以这样说用户在视图上的修改会自动同步到数据模型中去,数据模型也是同样的变化。双向数据绑定的优点:无需和单向数据绑定那样进行CRUD(Create,Retrieve,Update,Delete)操作,双向数据绑定最常应用在就表单上,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户输入好的数据,并放到数据模型中了。

2.1 v-decorator

  Vue中,使用v-model来进行数据绑定,在Vue-Ant Design 框架的使用中,会有v-decorator的使用,但是两者同时使用的时候,v-model数据绑定却会失效,

2.2 v-model

v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:

  1. v-bind绑定一个value属性

  2. v-on指令给当前元素绑定input事件

 自定义组件使用v-model,应该有以下操作:

     1. 接收一个value prop

     2. 触发input事件,并传入新值

你可能感兴趣的:(vue)