1.单向数据绑定
- 语法：v-bind:href ="xxx" 或简写为 :href
- 特点：数据只能从 data 流向页
示例：
<html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><!-- 普通写法 --> 单向数据绑定：<inputtype="text"v-bind:value="name"><br/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'xgc' } }) </script></html>
演示：
我们通过修改输入框数据观察date数据是否改变。
没有改变。
但是反向，可以通过修改data中的数据，引起页面的变化。
2.双向数据绑定
- 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
- 特点：数据不仅能从 data 流向页面，还能从页面流向
示例：
<html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><!-- 普通写法 --> 单向数据绑定：<inputtype="text"v-bind:value="name"><br/> 双向数据绑定：<inputtype="text"v-model:value="name"><br/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'xgc' } }) </script></html>
演示：
我们通过修改双向输入框数据观察date数据是否改变。
data中的数据发生改变了。
同时我们单向的数据也发生改变了，是因为我们通过双向绑定引起了data中的变化，从而引起了单向数据绑定的变化。
同样我们修改data的值，都会发生改变。
3.总结
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
<html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面。2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：1.双向绑定一般都应用在表单类元素上（如：input、select等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。--><!-- 准备好一个容器--><divid="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 --> 单向数据绑定：<inputtype="text":value="name"><br/> 双向数据绑定：<inputtype="text"v-model="name"><br/><!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'xgc' } }) </script></html>
