11.vue two-way data binding

Basic usage:

　　You can  v-model create two-way data binding instructions on the form and control elements. It automatically selects the correct method to update the control type elements.

　　While some magic, but  v-model in essence merely syntactic sugar, which is responsible for monitoring user input events to update the data, and in particular, to deal with some extreme examples.

 

 

chestnut:

　　msg initial value 'alex'

　　

　　

　　The input label binding instantiated msg vue, p label to render

 

　　

　　

　　return value:

　　

　　P label to monitor, input values ​​of input

The principle:

　　

　　Event object definitions and usage target event property returns the target node event (trigger node of the event), as an element that generated the event, document or window

　　event.target.value to get input values ​​assigned to msg

 

　　

　　p tag Rendering

 

note:

　　　　 Global data stream in single, easy tracking; locality bidirectional data flow, easy to operate

 　　　　Two-way data binding with the form control,