数据绑定分为单向数据绑定和双向数据绑定，单向数据绑定就是前面学习的v-bind指令，而双向数据绑定则是下面学习的v-model指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
数据绑定分为单向绑定和双向绑定
单向绑定是指容器可以从Vue实例中获取数据，但是Vue实例中的数据不会随着容器内容的改变而改变
双向绑定是指容器和Vue中的数据是相互改变的，二者都会随着对方的改变而变化
v-bind指令用于单向绑定，适用于大多数情况，常规写法为v-bind:XXX="xxx"，可以简写为:XXX="xxx"
v-model指令用于双向绑定，适用于表单类的标签中，且默认是给value赋值，常规写法为v-model:value="xxx"，可以简写为v-model="xxx"
-->
<div id="root">
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "JMS"
}
})
</script>
</html>
初始页面如下：
尝试改变第一个输入框的数据：
第二个输入框没有变化，这是因为第一个输入框是单向绑定，并不能改变实例中的数据。
尝试改变第二个输入框的数据：
第一个输入框的数据也随之变化，这是因为第二个输入框是双向绑定，输入框的值变化后对应的实例中的数据也发生变化，实例中的数据发生了变化，第一个输入框的内容也就随之变化了。
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：Vue,bind,绑定,单向,输入框,model,数据 From： https://www.cnblogs.com/jmsstudy/p/17498113.html