VUE JS uses components for two-way binding

1.VUE Front-end Simple introduction

VUE JS is a concise two-way data binding framework, his performance is more than ANGULARJS, because the implementation of the mechanism and ANGULARJS, he added to the data at initialization get and set method, when the data set, the data properties to add monitoring, so that the data changes, Will trigger the watcher above him, and Angularjs is implemented using dirty data checks.

In addition, Vuejs is easier to get started than Angularjs, and the Chinese documentation is complete.

2. Component implementation

in the development of VUE, we will need to extend some components to use in the form, such as a user selector.

Components and directives can be used in Vuejs encapsulation.

In Vuejs there is v-model this feeling and angularjs similar, actually completely different, no angularjs complex, he did not like Angularjs Ng-model Viewtomodel and Modeltoview characteristics, And this v-model can only be used on controls such as the input checkbox Select, while ANGULARJS extends Ngmodel implementation of his Render method.

In addition, I implement two-way binding when I use the Vue directive, which I have researched about custom-specified notation, which may be a less familiar cause and not yet implemented.

I use components to implement:

Vue.component (' Inputtext ', {                props:{' Input                 ':{true            },pname:                 { true             }},            ' <div><input type= ' text "v-model.lazy=" Input[pname] "><button @click =" Init "> Initialize </button></div>",            methods: {              init:function  () {                   this. input[. pname]= "Test";}}            )

When the Vue implements the component, he uses a unidirectional data stream, where we use the object to implement two-way binding.

In the above code, there are two properties:

Input,pname where input is an instance of a data object, PName: Just a string.

How to use:

<TableBorder= "1"width= "The ">         <TR>             <TD>Name</TD>             <TD>                 <Inputtext: Input= "Person"pname= "Name"></Inputtext>             </TD>         </TR>         <TR>             <TD>Age</TD>             <TD>                 <inputV-model= "Person.age">             </TD>         </TR>              </Table>     <TableBorder= "1"width= "The ">         <TR>             <TDcolspan= "3">                 <ahref="#"@click= "AddRow (' Items ')"class= "Btn btn-primary">Add to</a>             </TD>         </TR>                  <TRv-for= "(item, index) in Person.items">             <TD>                 <Inputtext: Input= "Item"pname= "School"></Inputtext>             </TD>             <TD>                 <Inputtext: Input= "Item"pname= "Year"></Inputtext>             </TD>             <TD>                 <a@click= "Removerow (' Items ', index)" >Delete</a>             </TD>         </TR>                   </Table>

<inputtext:input= "Item" Pname= "School" ></inputtext>

<inputtext:input= "Person" pname= "name" ></inputtext>

The component uses code, where Item,person data is bound, and PName is bound to a field.

JS Implementation code:

var New Vue ({                   data:{              person:{name:"", age:0,                items:[]                }          }          ,          methods: {                function  (name) {                this. Person[name].push ({school: "", Year: ""})              },              Removerow: function (name,i) {                  this. Person[name].splice (i,1);}}                 )        App8. $mount (' #app8 ')

Here we implement the data addition and deletion of the child table.

Interface effect:

VUE JS uses components for two-way binding