v-model双向绑定以及原理

使用@Input事件引出v-model双向绑定

示例

基本上就是我们输入的值想在任何地方获取到

还可以简化代码，直接在方法里面实现

使用v-model就不需要在使用@input在对属性进行赋值取值了

表单输入绑定

v-model

你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

在下面的示例中，输入框通过v-model绑定了message，用户在输入框里输入内容时，这个内容会实时赋值给message。当然在代码里为message赋值也会实时同步到界面上input里。这就是双向绑定。

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

v-model指令帮我们简化了这一步骤：