jequery 就是為驅(qū)動(dòng)dom
Vue 完全為視圖層服務(wù) 數(shù)據(jù)驅(qū)動(dòng)型
框架說(shuō)明：
MVVM
MVC
M: model模型 當(dāng)前視圖中可以用到的數(shù)據(jù)
V：view視圖 渲染的UI
VM： model 和 view 的集合體
大前提(src="lib/vue.js")
//數(shù)據(jù)構(gòu)建
<script type="text/javascript">
window.onload = function() {
new Vue({
el: "#my",
data: {
msg: 'Hello abc',
name: "abc",
age: "26",
flag: true,
arr:["a","b","c"],
obj:{id:1,name:"aaa"},
arrObj: [{name: "a1",age:10},{name: "a2",age:20},{name: "a3",age:30}]
},
methods: {
action:function() {
this.msg = 'click';
},
action1:function() {
this.age = '20';
},
action2:function() {
this.age = '110';
}
}
})
}
</script>
注意：2.0不允許掛載到html,body元素上
格式：表達(dá)式：{{ 輸出數(shù)據(jù)}} 輸出data里面的數(shù)據(jù) 直接渲染頁(yè)面
指令
雙向數(shù)據(jù)綁定
v-model 用于表單 （表單的value）
<div id="my">
<input type="text" v-model="msg" />{{msg}}
</div>
image.png
當(dāng)輸入框輸入內(nèi)容是，msg會(huì)跟隨變化
v-for 用于對(duì)象和數(shù)組進(jìn)行循環(huán)
<div id="my">
<!-- 數(shù)組 arr -->
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<!-- 數(shù)組 arr v value i index -->
<ul>
<li v-for="(v,i) in arr">{{v}}======{{i}}</li>
</ul>
<!-- 對(duì)象 v value k key -->
<ul>
<li v-for="(v,k) in obj">{{v}}======{{k}}</li>
</ul>
<!-- 數(shù)組對(duì)象 v value i index -->
<ul>
<li v-for="(v,i) in obj2">{{v.name}}={{v.age}}======{{i}}</li>
</ul>
<ul>
<li v-for="v in obj2">{{v.name}}</li>
</ul>
</div>
v-on 事件執(zhí)行 //簡(jiǎn)寫： @
<div id="my">
<button v-on:click="action">click</button>
<button v-on:mouseover="action1" v-on:mouseout="action2">mouseover</button>{{age}}
<!-- v-on 簡(jiǎn)寫 -->
<button @click="action2">on簡(jiǎn)寫</button>{{age}}
</div>
v-show/v-if //顯示隱藏
<div id="my">
<button v-show="flag">show</button>
<p v-if="age>25">{{age}}</p>
<p v-else>{{name}}</p>
</div>