Difference between 1-way binding and 2-way binding in Vue js?

Question

Could anyone explain the difference between One-way binding and Two-way binding in Vue js with an example each, and explain which situation to be used?

Answer 1

One-way binding is updating the DOM from the data (ViewModel). Always when the data (ViewModel) changes, the associated node (element) is re-rendered:

<span>Message: {{ msg }}</span>

With the v-once directive, the whole binding is only done once - even when the data changes.

Two-way binding is updating the DOM from the data (ViewModel) and updating the data (ViewModel) on events from the node (element). Normally input fields are Two-way binding to reflect changes from the user back to the data:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Please read the documentation.