3 ms·

I mean, Vue calls it two-way data binding. From their website: > "You can use the v-model directive to create two-way data bindings on form input and textarea

by aylmao 8y ago

I mean, Vue calls it two-way data binding. From their website: > "You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases." I'm not knowledgeable enough on the matter to say if this is or isn't, and to compare vs Angular, etc. But don't blame the author for this one ¯\_(ツ)_/¯ [1] https://vuejs.org/v2/guide/forms.html https://vuejs.org/v2/guide/forms.html

orangecat 8y ago
As discussed in https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components https://vuejs.org/v2/guide/components.html#Using-v-model-on-... <Component v-model="foo"> is basically shorthand for <Component :value="foo" @input="foo=$event"> In particular, the child can't affect the value of the parent's "foo" attribute except by sending an event. This is in contrast to Angular 1 where changing "foo" in the child would also change it in the parent, which would often lead to confusing data flow cycles.
kevin_thibedeau 8y ago
"v-model" is syntax sugar emulating a two-way binding to simplify form creation. Under the hood it's a one-way bound prop, an event, and an implicit event handler. Ordinary events can't mutate state without an explicitly created handler. All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand. https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow https://vuejs.org/v2/guide/components-props.html#One-Way-Dat... AngularJS uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications. https://vuejs.org/v2/guide/comparison.html#Data-binding https://vuejs.org/v2/guide/comparison.html#Data-binding

by aylmao 8y ago

orangecat 8y ago

As discussed in https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components https://vuejs.org/v2/guide/components.html#Using-v-model-on-... <Component v-model="foo"> is basically shorthand for <Component :value="foo" @input="foo=$event"> In particular, the child can't affect the value of the parent's "foo" attribute except by sending an event. This is in contrast to Angular 1 where changing "foo" in the child would also change it in the parent, which would often lead to confusing data flow cycles.

kevin_thibedeau 8y ago

"v-model" is syntax sugar emulating a two-way binding to simplify form creation. Under the hood it's a one-way bound prop, an event, and an implicit event handler. Ordinary events can't mutate state without an explicitly created handler. All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand. https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow https://vuejs.org/v2/guide/components-props.html#One-Way-Dat... AngularJS uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications. https://vuejs.org/v2/guide/comparison.html#Data-binding https://vuejs.org/v2/guide/comparison.html#Data-binding