vue 动态组件绑定model,vue数据的双向绑定是如何实现的

　　Vue使用v-model实现数据的双向绑定，它会根据控件类型自动选择正确的方法更新元素。本文将详细介绍原理，有兴趣的可以看看。

目录

　　解释：

　　摘要

　　补充

　　与js或jquery直接改变操作dom不同，vue使用v-model实现数据的双向绑定，它根据控件类型自动选择正确的方法更新元素。

　　V-model是vue的双向绑定指令，可以将页面上控件输入的值同步更新到相关绑定的数据属性，在更新数据绑定属性的同时也更新页面上输入控件的值。

　　官方文件是这样解释的：

　　V-model只是一个语法糖，真正的实现要靠

　　绑定：绑定响应数据

　　触发输入事件并传递数据(核心和焦点)

　　代码如下

　　输入v-model=txt

　　本质上。

　　 input:value= txt @ input= txt=$ event . target . value

解释：

　　在初始化vue实例时，它会递归遍历数据的每个属性，并通过defineProperty监控每个属性的get和set方法，这样一旦一个属性被重新分配，它就可以监控变化来操作相应的页面控件。

　　看看下面的代码：

　　Object.defineProperty(data， name ，{

　　get(){

　　返回数据[ name ]；

　　},

　　set(newVal){

　　设val=data[ name ]；

　　if (val===newVal){

　　返回；

　　}

　　data[ name ]=new val；

　　//监控属性值的变化，如果node是其对应的输入节点。

　　node.value=newVal

　　}

　　})

总结

　　一方面，模态层通过Object.defineProperty劫持每个属性，一旦监控到变化，就通过相关的页面元素进行更新。另一方面，通过编译模板文件，将输入事件绑定到控件的v-model，使得页面输入可以实时更新相关数据属性值。

　　然后用Object.defineProperty来控制一个对象的属性的一些独特操作，比如读写权限，是否可以枚举。这里主要研究它对应的两个描述属性，get和set。v-model实际上重写了它的get和set。get是读取name属性的值触发的函数，set是设置name属性的值触发的函数。

补充

　　垂直模型修改器：懒，修剪和编号

　　Lazy:每次触发输入事件后，输入框的值与数据同步，并添加lazy修饰符，这样change事件用于同步。

　　输入v-model.lazy=msg

　　Trim:删除字符串开头和结尾的空格。

　　输入v-model.trim=msg

　　数字：将数据转换为值类型

　　输入v-model.number=msg

　　关于vue的双向事件绑定v-model的原理这篇文章到此为止。关于vue双向事件绑定v-model的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。