v-model

v-model 是 Vue.js 中一个非常重要的指令，它用于在表单控件元素上创建双向数据绑定。这意味着表单控件和 Vue 实例的数据之间会保持同步：当表单控件的值改变时，Vue 实例的数据也会相应地更新；反之亦然，当 Vue 实例的数据改变时，表单控件的值也会更新。

v-model 本质上是一个语法糖，它背后其实做了几件事情：

1. 为表单控件元素添加了一个 value 属性，并将其绑定到 Vue 实例的某个数据属性上。
2. 为表单控件元素添加了一个 input 事件监听器，当控件的值发生变化时，会更新 Vue 实例的数据属性。

对于不同类型的表单控件，v-model 的工作方式可能会有所不同：

• 对于文本输入框（<input type="text">），v-model 会监听 input 事件。
• 对于复选框（<input type="checkbox">），单个复选框绑定的是布尔值，多个复选框绑定的是一个数组。
• 对于单选按钮（<input type="radio">），v-model 会绑定到一个字符串或数字上。
• 对于下拉列表（<select>），v-model 会绑定到选中的 value 上。

此外，v-model 还可以与 Vue 的自定义组件一起使用，只要这些组件遵循特定的约定（即接受 value prop 并触发 input 事件）。

下面是一个简单的例子，演示了如何使用 v-model：

<template>  
  <div>  
    <input v-model="message" placeholder="edit me">  
    <p>Message is: {{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    }  
  }  
}  
</script>

在这个例子中，<input> 元素和 Vue 实例的 message 数据属性之间建立了双向绑定。当你在输入框中输入文本时，message 属性的值会实时更新；同样地，如果你通过其他方式（例如 JavaScript 代码）改变了 message 的值，输入框中的内容也会相应地改变。