Sample Code for Bidirectional binding using components in VUEJS

This article mainly introduces VUEJS's use of components to implement bidirectional binding. It introduces in detail the vue's bidirectional data binding principle and the core code module, which has some reference value. If you are interested, please take a look. 1. VUE front-end Introduction

Vue js is a simple two-way data binding framework. Its performance exceeds ANGULARJS because the implementation mechanism is different from that of ANGULARJS. He added the get and set methods to the data during initialization, when you set data, add monitoring on the data attribute. When the data changes, the watcher is triggered. ANGULARJS uses dirty data check.

In addition, VUEJS is easier to get started than ANGULARJS, and its Chinese documents are also complete.

2. component implementation

When using vue for development, we need to expand some components to use in the form, such as a user selector.

In VUEJS encapsulation, you can use components and commands.

In VUEJS has V-MODEL this feeling is similar to ANGULARJS, the actual is completely different, no ANGULARJS complex, he does not like ANGULARJS ng-model viewtomodel and modeltoview features, this v-model can only be used on controls such as input checkbox select, while angularjs can extend ngmodel to implement its render method ..

In addition, when I use the VUE command to implement bidirectional binding, I have studied the custom and specified writing method, which may still be unfamiliar and has not yet been implemented.

I use components for implementation:

Vue. component ('inputtext', {props: {'input': {required: true}, pname: {required: true}, template :'
Select
', Data: function () {return {myModel: "ray" }}, methods: {init: function () {var rtn = prompt ("input data! "," "); This. input [this. pname] = rtn ;}}})

When vue implements a component, it uses one-way data stream. Here we use objects to implement two-way binding.

In the code above, there are two attributes:

Input, pname, where input is a data object instance, pname: Is just a string.

Template code: