Vue 双向数据绑定

在 Vue.js 中，双向数据绑定是指数据的变化可以自动更新到视图，同时用户的输入也能够自动更新到数据。Vue.js 的双向数据绑定是通过 v-model 指令实现的。

使用 v-model 指令可以将表单元素和 Vue 实例的数据进行绑定，实现数据的双向绑定。当用户在表单元素中输入内容时，该内容会自动更新到相应的数据属性上；反之，当数据属性发生变化时，表单元素的值也会自动更新为最新的数据。

<div id="app"> <input type="text" v-model="message"> <p>{{ message }}</p> </div>

new Vue({ el: '#app', data: { message: '' } });

在上述示例中，我们使用 v-model="message" 将输入框和 Vue 实例的 message 数据属性进行了双向绑定。当用户在输入框中输入文本时，message 的值会自动更新；同时，<p>{{ message }}</p> 中显示的文本也会随之更新。

这种双向数据绑定的特性使得开发者无需手动监听用户的输入事件或者更新视图，大大简化了代码的编写和维护。除了文本输入框外，v-model 还可以用于其他表单元素（如复选框、单选框、下拉选择等）。

需要注意的是，v-model 只对表单元素起作用，并且依赖于表单元素的 input 事件和 change 事件。如果要将 v-model 应用于自定义组件或非表单元素上，可以通过在组件中定义 value 属性和触发相应事件来实现类似的双向绑定效果。

总结来说，Vue.js 的双向数据绑定通过 v-model 指令实现，可以方便地将表单元素与数据属性进行双向绑定，使数据的变化能够直接反映到视图上，同时用户的输入也能够自动更新到数据中。