您好,登录后才能下订单哦!
今天就跟大家聊聊有关vue中双向事件绑定的原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
与js或者jquery直接改变操作dom不同,vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值
官方文档这么解释:
v-model只不过是一个语法糖而已,真正的实现靠的还是
v-bind:绑定响应式数据
触发 input 事件 并传递数据 (核心和重点)
如下代码
<input v-model="txt">
本质上是
<input :value="txt" @input="txt = $event.target.value">
初始化vue实例时候,会递归遍历data的每一个属性,并且通过defineProperty来监听每一个属性的get,set方法,从而一旦某个属性重新赋值,则能监听到变化来操作相应的页面控制
看下方代码:
Object.defineProperty(data,"name",{ get(){ return data["name"]; }, set(newVal){ let val=data["name"]; if (val===newVal){ return; } data["name"]=newVal; // 监听到了属性值的变化,假如node是其对应的input节点 node.value=newVal; } })
一方面modal层通过Object.defineProperty来劫持每个属性,一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件,为控件的v-model绑定input事件,从而页面输入能实时更新相关data属性值
那么Object.defineProperty是用来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set,v-model其实是对其get和set进行重写操作,get就是在读取name属性这个值触发的函数,set就是在设置name属性这个值触发的函数
v-model修饰符:.lazy、.trim和.number
lazy :在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件进行同步
<input v-model.lazy="msg">
trim :去除字符串首尾的空格
<input v-model.trim="msg">
number :将数据转化为值类型
<input v-model.number="msg">
看完上述内容,你们对vue中双向事件绑定的原理是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。