Vue.js 数据双向绑定：v-model 指令详解

在 Vue.js 中，数据的双向绑定是通过 'v-model' 指令实现的。'v-model' 指令会将表单元素的值与 Vue 实例中的数据进行双向绑定，当表单元素的值发生变化时，Vue 实例中的数据也会相应地更新，反之亦然。

以下是一个使用 'v-model' 实现数据的双向绑定的示例：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上述示例中，input 元素通过 'v-model' 指令与 Vue 实例中的 message 数据进行双向绑定。当用户在 input 中输入内容时，message 的值会自动更新，反之亦然。同时，通过 {{ message }} 将 message 的值显示在页面中的 p 元素中。

另外，Vue 还提供了修饰符，可以对 'v-model' 指令进行一些额外的处理。例如，使用 .lazy 修饰符可以将输入事件从实时改为失去焦点后才触发，使用 .number 修饰符可以将输入的值转为数值类型等。更多关于 'v-model' 的用法可以参考 Vue 官方文档。