Bidirectional data binding V-model and v-decorator

Data binding

1. One way data binding

        Write the data in html In structure , Then render , once HTML After code generation , There's no way to change , If new data appears , Then you have to put the previous HTML Delete the code , And then integrate the new data and template together to form a new HTML Code , Then insert it into the document stream

2. Two way data binding

      Two way binding between data model and view . When the data changes , The view changes , When the view changes , The data will also change synchronously ; It can be said that the user's changes on the view will be automatically synchronized to the data model , The data model changes the same . Advantages of two-way data binding ： You don't need to do it like one-way data binding CRUD（Create,Retrieve,Update,Delete） operation , Two way data binding is most often used on forms , In this way, when the user completes the input on the front page , Without any operation , We have got the data entered by the user , And put it into the data model .

2.1 v-decorator

  Vue in , Use v-model To do data binding , stay Vue-Ant Design The use of the framework , There will be v-decorator Use , But when both are used at the same time ,v-model Data binding fails ,

2.2 v-model

v-model Two way binding for form data , In fact, it is a grammatical sugar , There are two operations behind this ：

  1. v-bind Bind one value attribute

  2. v-on Instruction to bind the current element input event

  Custom components use v-model, There should be the following operations ：

     1. Receive one value prop

     2. Trigger input event , And pass in a new value