v-model 是 Vue.js 中常用的指令之一，它通常用于实现表单元素（如输入框、单选框、复选框等）和数据模型的双向绑定。
以输入框为例，使用 v-model 可以将输入框中的值与 Vue 实例中的一个属性绑定起来，当输入框的值改变时，该属性的值也会随之更新，反之亦然。
下面是一个实际的例子，我们假设有一个 TodoList 应用，其中有一个输入框用于添加新的待办事项：
在这个例子中，我们使用了
v-model 将输入框的值和 Vue 实例中的 newItem 属性进行了双向绑定，当用户在输入框中输入内容时，newItem 属性的值会自动更新，当用户点击 "Add" 按钮时，会将 newItem 属性的值添加到 items 数组中，并清空输入框的值。
注意到 v-model 可以通过修饰符来实现不同的效果，如 .lazy 修饰符可以让输入框在失去焦点时才更新绑定的属性值，而 .number 修饰符可以将输入框的值转换成数字类型。这些修饰符可以根据具体的需求进行选择。
与 v-model 相对应的是 v-bind 指令，它用于将 Vue 实例中的属性值绑定到模板中的元素属性上，实现单向数据绑定。例如，可以使用 v-bind 将 Vue 实例中的 src 属性值绑定到 <img> 标签的 src 属性上：
在这个例子中，
imageUrl 是 Vue 实例中的一个属性，它保存了图片的 URL 地址，使用 v-bind 将其绑定到 <img> 标签的 src 属性上，实现了单向数据绑定。
通过对比 v-model 和 v-bind 的用法，我们可以记住它们的区别：v-model 实现双向数据绑定，将表单元素和数据模型关联起来；而 v-bind 实现单向数据绑定，将数据模型和模板中的元素属性关联起来。
