首页天道酬勤实现成员变量双向绑定,描述一下vue双向绑定的原理

实现成员变量双向绑定,描述一下vue双向绑定的原理

张世龙 05-04 02:23 112次浏览
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width, 初始比例=1.0 ' titlev-model双向绑定原理/titlescriptsrc=' https://lib.Bao mitu.com/vue/2.6.12/vue.js ' 通过绑定他的value并使用v-on触发,更新数据的双向绑定的实现主要依赖于Object.defineProperty (),通过该函数获取, 在可以拦截set事件的其中,observer是最主要的部分,它在Object.defineProperty中实现了数据劫持,然后是他的set, 用get方法通知读者,触发update方法,实现视图更新--divid=' app ' div { { msg } }/divid } -写法1-- input type=' text -写法2-- input type=' text ' v-bind : value=' msg ' v-on : input=' msg=$ event.target.value '! -写法3 --! -这是我们最常用的东西--- input type=' text ' v-model=' msg '/div script type=' text/JavaScript ' var VM=newvue () methods: ) Handle:function (事件) )//使用输入字段中的最新数据覆盖原始数据this.msg=event; v-model与通过将value动态绑定到msg、绑定input事件并将当前input标签的value值指派给msg而实现的*//script/body/html基本相同
vue绑定原理,vue的数据双向绑定