v-model双向绑定 简单原理说明

上两篇文章讲了下v-on:绑定事件和v-bind:为控件绑定属性
还学习了方法的统一存放在methods中
看下面例子

image.png
image.png

有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
运行结果

image.png
上面例子有个问题
当我改变文本框值时候 在点击获取name按钮 两者值不一样
因为myname值没有改变
image.png
如何解决呢

1.通过oninput方法（原生方法 监听文本框值的变化 脚本出发的改变不触发）
如下

image.png
@input监听文本框值的改变 改变了之后将文本框的值赋值给myname
event为事件执行时传递的对象 通过event.target即可获取到当前对象
event.target.value即文本框的值
运行效果
image.png
可以发现两者值已经同步了
下面在放一个按钮
image.png
一个修改按钮 点击值改变myname的值
同时也改变了文本框的值
image.png
在点击修改
image.png
可以看见文本框值被改成zhangsan了
这就是双向绑定
不管是改变myname属性的值还是改变文本款的值 两者是同步的
2.v-model双向绑定 语法糖 和上面效果是一样的
image.png
image.png

v-model后面不需要写:value
因为vue会自动判断value和属性之间的双向绑定
简单触碰下原理
看下下面的例子

image.png
首先定义一个me对象
然后对id为txt元素赋值
然后改变me对象属性值
最后一个按钮输出改变后me对象的name值
运行效果
image.png
确实改变了对象里面的name值
但是两者并没有同步
下面学习下如何同步
image.png
对原始javascript对象定义一个对象属性
可以通过对象字面量方法直接加属性
也可以通过Object.defineProperty方法动态为对象添加属性
有三个参数（参数一 要添加属性的对象，参数二要添加的属性，参数三一个函数（get set函数 和java里面getter和setter比较像））
代码如下
image.png
运行结果
image.png
点击第一个按钮
image.png
两者的值发生同步了
但是此时修改文本框值 在点击第二个按钮
image.png
发现两者并没同步
文本框值改变没有同步name属性
修改代码如下
image.png
运行结果
image.png
以上即为双向绑定的简陋原理、
v-model实际上就是v-bind:value 加上oninput事件的语法糖