<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
一。单向双向数据绑定
1.单向数据绑定：页面上输入内容（页面上展示数据）----不出传入到Vue控件里。
2.双向数据绑定：页面上输入内容（页面上展示数据，）----同时传入到Vue控件里。 方法：v-model
备注：双向绑定应用在（input，select，这样输入性标签中），
二。两种vue写法
1.对象式写法 如下：
el:'#root',
data:{
name:'魏世轩',
},
2.函数式写法
data:function() {
console.log('@@@',this)
return{
name:'请输入内容',
}
}
3.MVVM
M = model中的数据
V = 页面上数据
VM = vue实例
流程：M中编写数据----传入VM中---在返回到页面上V
V页面上编写数据---传入VM中---传入M中
-->
<div id="root">
单向数据绑定:<input type="text" id="input" :value="name"/>
双向数据绑定:<input type="text" id="input" v-model:value="name"/>
</div>
<script src="../vue/vue.js"></script>
</head>
<body>
<script>
Vue.config.productionTip = false;
new Vue({
//对象式写法
el:'#root',
data:{
name:'魏世轩',
},
//函数式写法
data:function() {
console.log('@@@',this)
return{
name:'请输入内容',
}
}
});
</script>
</body>
</html>