单项数据绑定
概念:单向绑定(v-bind):数据只能从 data 流向页面
通俗说就是,你只改变了页面,内容没有被改变
<div id="root">
<input type="text" name="" :value="msg"/>
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
msg:"张三"
}
})
</script>
双向数据绑定
概念: 双向绑定(v-model):数据不仅可以从data可流向页面,还能从页面流向data
<div id="root">
<input type="text" name="" v-model:value="msg"/>
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
msg:"张三"
}
})
</script>
总结:v-model:value 可以简写为 v-model, v-model 一般应用于输入类型的表单元素
MVVM模型
概念:
M:模型(Model) :data 中的数据
V:视图(View) :模板代码
VM:视图模型(ViewModel) :Vue 实例
理解:VM用来把数据放到视图上,data中的所有属性都会放在VM上,在视图中都可以使用。