一、单向数据绑定

<div id="root"><!-- 仅仅只是绑定一个属性在标签上 只有 data 变化，输入框才会变化 -->数据单向绑定：<input type="text" name="" id="" :value="name">
</div>
<script src="../js/vue.js"></script>
<script>Vue.config.productionTip = false;new Vue({el: '#root',data: {name: '张三'}})
</script>

二、双向数据绑定

<div id="root"><!-- 输入框和data中的数据任意一边改变数据都会同步发生变化 -->数据双向绑定：<input type="text" name="" id="" v-model="name">
</div>
<script src="../js/vue.js"></script>
<script>Vue.config.productionTip = false;new Vue({el: '#root',data: {name: '张三'}})
</script>

<!--备注：1. 双向绑定一般都应用在表单类元素上，如（input、select等）2. v-model:value 可以简写成 v-model，因为 v-model 默认收集的就是 value 的值
-->