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>