時(shí)間：2016-04-11
地點(diǎn)：新大樓 A區(qū)905
為什么選擇vue.js
- 可以作為前端模板庫(kù)的替換
- 簡(jiǎn)單
- 正在管理系統(tǒng)的前端中使用（財(cái)務(wù)系統(tǒng)）
- 應(yīng)該會(huì)成為前端開發(fā)的主要方式（純屬個(gè)人臆測(cè)）
vue.js數(shù)據(jù)綁定
<div id="app1"> {{ message1 }}</div>
<div id="app2"> {{* message2 }}</div>//單次綁定
<div id="app3"> {{{ message3 }}}</div>//呈現(xiàn)HTML
var obj1=new Vue({
el: '#app1',
data: {
message1: 'Hello World!'
}
});
obj1.message1="Hello vue.js!";
var obj2=new Vue({
el: '#app2',
data: {
message2: 'Hello World!'
}
});
obj2.message2="Hello vue.js!";
var obj3=new Vue({
el: '#app3',
data: {
message3: '￥'
}
});
結(jié)果：
數(shù)據(jù)綁定
class綁定和style綁定
<div id="app1" v-bind:class="{'classA':isA,'classB':isB}"> </div>
<div id="app2" v-bind:class="classObj"> </div>
<div id="app3" v-bind:style="{color:activeColor}"> </div>
<div id="app4" v-bind:style="styleObj"> </div>
new Vue({
el:'#app1',
data:{
isA:true,
isB:false
}
});
new Vue({
el:'#app2',
data:{
classObj:{
'classA':true,
'classB':true
}
}
});
new Vue({
el:'#app3',
data:{
activeColor:'red'
}
});
new Vue({
el:'#app4',
data:{
styleObj:{
color:'red'
}
}
});
最終渲染結(jié)果：
class綁定和style綁定
計(jì)算屬性
兩種方式：
PS：
1.vue.js教程
2.jQuery是命令式開發(fā)洒宝；vue.js是聲明式開發(fā)敷矫，對(duì)于深度jQuery依賴者，這個(gè)思維方式的轉(zhuǎn)變貌似需要點(diǎn)兒時(shí)間（P纹份，明明就是你的質(zhì)量太大日杈，導(dǎo)致慣性太大洗显，從而導(dǎo)致剎車時(shí)的緩沖距離比較長(zhǎng)吧）
課后作業(yè)
順便提問：除了在data中新增加數(shù)組來控制樣式或者使用DOM操作之外棱貌，什么方式可以簡(jiǎn)單實(shí)現(xiàn)分頁(yè)的樣式變化？
