Although v-model l is very similar to Angular 's ng-model that uses two-way data binding , Vue is a single data flow, and v-model is just syntactic sugar.
The first line of code is really just syntactic sugar for the second line .
There is actually no difference between these two lines of code, except that the first line is syntactic sugar for the second!
Now you know where valueand inputcome from. Similar to what was summarized above:
When adding the v-model attribute to the <input /> element, it will be used valueas , and inputthe event will be used as a trigger event for real-time delivery of value.
The first line of code is actually just syntactic sugar for the second line, and the two lines of code are equivalent .
To understand this line of code, you first need to know that inputthe element itself has an oninput event, which is newly added in HTML5. Similarly onchange, whenever the content of the input box changes, it will be triggered oninputand the latest valuevalue will be assigned to sththe variable .
If you don't know where $event comes from, you need to click on it and review the documentation.
We carefully observe the two lines of code between syntactic sugar and original syntax, and we can draw a conclusion :
When adding v-modela property , it will be used valueas a property of the component by default, and inputas the event name when binding an event to the component
The initial value of the parent component xxx is 100, and the child component is an input box; when the value of the input box changes, the parent component can be updated in real time xxx为200。
v-model does two things:
1. Pass an attribute named value to the subcomponent
2. Listen to the input event in the subcomponent, and modify the value bound to the value in the callback of this event