Vue.js一个前端框架，渐进式的，侵入性高，你一旦用了它就只能按照它的方式写(从头到尾)。
Mvvm模式
mvvm通过数据双向绑定让数据自动地双向同步
m：model数据模板
v：view视图
vm：模板视图，是m和v的桥梁
mvvm的核心是数据，我们要操作的是数据，不用操作DOM(页面的元素)
Vue的基本赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue</title>
<!--引入vue的js-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="div_1" >
<!--赋值-->
{{name}}:{{sex}}:{{age}}
</div>
<script>
<!--这里就是操作div_1里面的元素-->
var vue=new Vue({
<!--选中id为div_1的div-->
el:'#div_1',
data:function(){
return {
<!--给vue的元素赋值-->
name:'xxxx',
sex:'xxx',
age:'0'
}
}
})
</script>
</body>
</html>
Vue的双向数据绑定
数据的改变会引起DOM的改变，DOM的改变也会引起数据的改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue</title>
<!--引入vue的js-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="div_2">
<!--v-model是双向绑定数据-->
<!--v-once是单向绑定-->
<input type="text" v-model="shu1"/></br>
<input type="text" v-model="shu2"/></br>
<input type="text" v-model="sum"/></br>
<!--v-on:click点击事件-->
<input type="button" v-on:click="jia" value="+"/>
<input type="button" v-on:click="jie" value="-"/>
<input type="button" v-on:click="cheng" value="*"/>
<input type="button" v-on:click="chu" value="/"/>
</div>
<script>
var vue2=new Vue({
el:'#div_2',
data:function(){
return {
shu1:'1',
shu2:'2',
sum:'3',
}
},
methods:{
<!--jia是方法名(函数名)-->
jia:function(){
<!--转intparseInt()-->
this.sum=parseInt(this.shu1)+parseInt(this.shu2);
},
jie:function(){
this.sum=parseInt(this.shu1)-parseInt(this.shu2);
},
cheng:function(){
this.sum=parseInt(this.shu1)*parseInt(this.shu2);
},
chu:function(){
this.sum=parseInt(this.shu1)/parseInt(this.shu2);
}
}
})
</script>
</body>
</html>
