浅谈 Vue v-model指令的实现原理
5星 · 超过95%的资源 44 浏览量
2020-12-11
17:28:02
上传
评论
收藏 121KB PDF 举报 
浅谈浅谈 Vue v-model指令的实现原理指令的实现原理
vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,
我们来看一下它的效果:
输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化
我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html#文本
我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的
如此神奇的效果是如何实现的呢? 还是参照官方文档
http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件
官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是
v-bind:绑定响应式数据
触发 input 事件 并传递数据 (核心和重点)
现在我们也想设计自己的表单组件,也想通过 v-model暴露组件的值,怎么做呢?
例如我们要设计一个 自定义货币输入的组件, 通过 v-model暴露组件的值,我们可能使用如下的组件代码
<currency-input v-model="price"></currency-input>
评论10
最新资源