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

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

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

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

图片[1]-vue v-model实现原理(V-model的使用和原理)-爱学社区

运行效果:

图片[2]-vue v-model实现原理(V-model的使用和原理)-爱学社区

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

图片[3]-vue v-model实现原理(V-model的使用和原理)-爱学社区

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

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

图片[4]-vue v-model实现原理(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事件

关注本站更多学习内容请收藏本站或保存本站永久网址[www.axue5.com]每天更新学习资源和各种,破解软件,福利美图技术教程,线报活动等网络资源!

------本页内容已结束,喜欢请分享------
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容