vue v-model实现原理(V-model的使用和原理)

在我们开发中，表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。特别是注册页面和登录页面等等，我们需要获取用户输入的信息。

在使用Vue的时候，假如我们想获取用户输入的数据，我们可以使用v-model指令来实现表单元素和数据的双向绑定。

什么是双向绑定呢？请看简单的示例代码

运行效果：

以上代码看似只是一个普通的数据绑定，但当我们使用v-model指令来绑定属性值的时候，我们修改<input>标签里面的值时，我们观察message属性的值也会跟着变化。假如我们在<input>标签里面把“Hello World”修改成“Hello Vue”

我们可以看见<label>标签也发生了变化。由此可见message属性的值已经绑定<input>标签里面，当我们修改里面的值时,message属性的值也会跟随着改变。

那么v-model的原理是怎样的呢？

v-bind:value="message" 我们可以获取message属性的值然后绑定到<input>标签里面。

v-on:input="message=$event.target.value"

我们先来看看<input>标签的input事件

oninput 事件在用户输入时触发，它是在元素值发生变化时立即触发；

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

所以v-model其实是一个语法糖，它背后包含两个操作

1.v-bind:value 绑定一个value属性

2.v-on指令给当前元素绑定input事件