双向绑定
数据绑定
将数据渲染到页面即为数据绑定，页面内容的变化以所绑定的数据驱动。
在Vue中我们可以通过插值表达式{{}}或者数据绑定指令v-text, v-html以及v-pre来实现单向的数据绑定。
双向数据绑定
双向绑定在英文中叫 Two-lane Data-Binding或者Interactive Data-Binding。
Vue库中，所有的html表单元素（单行文本框text，单选按钮radio，复选框checkbox,下拉框select，拖拽条range，多行文本框textarea），都能写v-model双向绑定指令，表示与data中的指定数据双向绑定。双向绑定后的表单元素的值与data中被绑定的属性值恒等。
html:
JS:
得到的效果是，拖动拖拽条数字改变，按钮使数字改变时拖拽条也会跟着移动。
再来写个 input number对象来进一步验证：
得到的效果是，数字与拖拽条、数字文本框联动。
由上面的举例可以看出，双向数据绑定的双向指的是从后台数据到页面的方向以及用户通过表单改变页面内容从而影响后台数据的方向，因此像这样的数据双向绑定主要服务于与用户的交互。
单选按钮的双向绑定
单选按钮的双向绑定必须要有一个value值与绑定属性的属性值一致来作为绑定的接口，v-model的值会有一个秘密检查，检查被绑定对象的value与自己是否匹配：
复选框的双向绑定
复选框双向绑定分为两种情况，一种是跟布尔值绑，另一种是跟数组绑。
复选框布尔值双向绑定：
复选框数组双向绑定：
给绑定对象添加value值后，复选框可以与数组进行双向绑定
下拉菜单的双向绑定
对下拉菜单进行双向绑定时，v-model绑定的是下拉菜单的值。
【注意】"i in 2020 - 1929"是从1开始循环，因此循环第一次的value值为1930，与之匹配，data中的birthyear的值也应为1930。双向绑定属性一定要找到与之属性值匹配的值才能成功绑定。
在这里select里的值是由option的value值决定的，因此本质上还是value值在为双向绑定服务。
一些不需要双向绑定的情况：
如果单纯只是想获取一个文本框中的值，不需要双向绑定，可以通过ref属性实现。
ref即reference，表示引用，同一个Vue文件中不能有相同的ref。
双向绑定实现：
ref实现：
