Vuejs-分享-vuejs-的分享-介紹入門(mén)開(kāi)啟vuejs之旅教學(xué)課件

Vue.js數(shù)據(jù)驅(qū)動(dòng)+組件化的前端界面開(kāi)發(fā)@尤小右@yyx9908031Vue.js數(shù)據(jù)驅(qū)動(dòng)+組件化的前端界面開(kāi)發(fā)@尤小右@yyVue.js概況2013年底作為個(gè)人實(shí)驗(yàn)項(xiàng)目開(kāi)始開(kāi)發(fā)2014年2月公開(kāi)發(fā)布2014年11月發(fā)布從頭重寫(xiě)的0.11截止2015年1月：3100+StarsonGitHub2Vue.js概況2Vue.js不是一個(gè)框架3Vue.js不是一個(gè)框架3路由視圖管理數(shù)據(jù)持久化4路由4路由視圖管理數(shù)據(jù)持久化靈活的接口5路由靈活的接口5簡(jiǎn)單示例QuickDemo6簡(jiǎn)單示例6核心思想：數(shù)據(jù)驅(qū)動(dòng)組件化7核心思想：7數(shù)據(jù)驅(qū)動(dòng)Data-Driven8數(shù)據(jù)驅(qū)動(dòng)8視圖View用戶行為UserInput數(shù)據(jù)模型Model渲染Render9視圖用戶行為數(shù)據(jù)模型渲染9視圖View用戶行為UserInput數(shù)據(jù)模型Model渲染Render視圖只是數(shù)據(jù)的映射“真相只有一個(gè)”10視圖用戶行為數(shù)據(jù)模型渲染視圖只是數(shù)據(jù)的映射“真相只有一個(gè)”1DOMDOM在單頁(yè)Web應(yīng)用中的問(wèn)題

重新渲染整個(gè)視圖是昂貴的手動(dòng)更新DOM來(lái)保持視圖和數(shù)據(jù)的同步很容易導(dǎo)致bug11DOMDOM在單頁(yè)Web應(yīng)用中的問(wèn)題

11ViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁定實(shí)現(xiàn)自動(dòng)同步12ViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁DOMPOJO(原生JS對(duì)象)VueViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁定實(shí)現(xiàn)自動(dòng)同步13DOMPOJOVueViewViewModelModel通過(guò)varvm=

new

Vue({

el:'#demo',

data:{

msg:'HelloVue.js!'

}

})<div

id="demo">

<h1>{{msg}}</h1>

</div>JavaScriptHTML14varvm=newVue({

el:'#demvarvm=

new

Vue({

el:'#demo',

data:{

msg:'HelloVue.js!'

}

})<div

id="demo">

<h1>{{msg}}</h1>

</div>JavaScript指令Directive（插值其實(shí)被編譯為v-text指令）ViewModelModelViewHTML15varvm=newVue({

el:'#demViewModelDOMListenersDirectivesViewModel應(yīng)用邏輯全部是數(shù)據(jù)操作DOM操作封裝在指令中16ViewModelDOMListenersDirectiv組件化Component-Oriented17組件化17每一個(gè)應(yīng)用界面都可以看作是組件構(gòu)成的NavContentItemSidebarSideItem18每一個(gè)應(yīng)用界面都可以NavContentItemSideba每一個(gè)組件都可以看做是一個(gè)ViewModelNavContentItemSidebar19每一個(gè)組件都可以看做是一個(gè)NavContentItemSid所以可以把界面抽象為ViewModelTree20所以可以把界面抽象為20在Vue.js中注冊(cè)組件//擴(kuò)展Vue來(lái)自定義一個(gè)可復(fù)用的組件類(lèi)varMyComponent=Vue.extend({template:

'<p>{{msg}}</p>',paramAttributes:['msg']})//全局注冊(cè)該組件Vponent('my-component',MyComponent)21在Vue.js中注冊(cè)組件//擴(kuò)展Vue來(lái)自定義一個(gè)在Vue.js模板中使用組件<my-component

msg="Hello!"></my-component>my-component組件的模板將會(huì)被填充到該元素中，而msg則會(huì)被作為數(shù)據(jù)傳入該組件實(shí)例。渲染結(jié)果如下。<my-component><p>Hello!</p>

</my-component>22在Vue.js模板中使用組件<my-component通過(guò)paramAttributes實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞<my-component

msg="{{msgFromParent}}"></my-component>rootmy-componentmsgFromParentmsg雙向綁定每一個(gè)組件都默認(rèn)有自己的獨(dú)立作用域。23通過(guò)paramAttributes<my-componen組件之間也可以通過(guò)事件系統(tǒng)進(jìn)行通信$dispatch()24組件之間也可以通過(guò)$dispatch()24組件之間也可以通過(guò)事件系統(tǒng)進(jìn)行通信$broadcast()25組件之間也可以通過(guò)$broadcast()25一些實(shí)現(xiàn)細(xì)節(jié)26一些實(shí)現(xiàn)細(xì)節(jié)26基于ES5Object.defineProperty實(shí)現(xiàn)對(duì)POJO(原生JS對(duì)象)的觀察和依賴(lài)收集ObjectsettergetterProperty收集依賴(lài)觸發(fā)更新27基于ES5Object.definePropertyObasettergetterbWatchera.b收集依賴(lài)Directivev-text="a.b"DOM{{a.b}}通知更新通知依賴(lài)收集機(jī)制的實(shí)現(xiàn)類(lèi)似Knockout，精確到每一個(gè)屬性，比臟檢測(cè)效率得多，性能不受制于watcher的數(shù)量。28asettergetterbWatcher收集依賴(lài)Direcvm.msg=

'one'

vm.msg=

'two'

vm.msg=

'three'

//只會(huì)觸發(fā)一次DOM更新異步批量更新29vm.msg='one'

vm.msg='two'

varvm=

new

Vue({

data:{

nested:{

a:{

b:'hi!'

}

}

}

})可以直接替換多層嵌套的對(duì)象//直接替換對(duì)象

vm.nested={

a:{

b:'yo!'

}

}30varvm=newVue({

data:{

vardata={

msg:'hi'

}

varvm=

new

Vue({

data:data

})可以直接修改原數(shù)據(jù)對(duì)象//直接修改原對(duì)象

data.msg=

'changed'

//DOM會(huì)在下一幀更新31vardata={

msg:'hi'

}可以直接varitems=[a,b,c]

varvm=

new

Vue({

data:{

items:items

}

})

//下一幀會(huì)觸發(fā)更新

items.reverse()數(shù)組的mutating方法會(huì)觸發(fā)更新32varitems=[a,b,c]

varvm=對(duì)于直接的數(shù)組替換，v-repeat會(huì)進(jìn)行Array-diffing確保盡可能地復(fù)用vm和DOM元素//不會(huì)導(dǎo)致性能問(wèn)題喲vm.items=vm.items.filter(fn)*即使用含有全新數(shù)據(jù)對(duì)象的數(shù)組替換，只要對(duì)象有uid也可以通過(guò)比較uid來(lái)達(dá)成有效復(fù)用。33對(duì)于直接的數(shù)組替換，//不會(huì)導(dǎo)致性能問(wèn)題喲*即使用含有全//如果data上不存在prop屬性，//則必須要用$set或$add才會(huì)觸發(fā)更新data.$set('prop',value)

data.$add('prop',value)//刪除屬性要用$delete

data.$delete('prop')

//數(shù)組不能用arr[0]=value,要用$set

arr.$set(0,value)ES5的局限：不能偵測(cè)對(duì)象屬性的添加/刪除34//如果data上不存在prop屬性，ES5的局優(yōu)勢(shì)和使用場(chǎng)景35優(yōu)勢(shì)和使用場(chǎng)景35侵入性低不對(duì)整體架構(gòu)做過(guò)多約束，方便與其他庫(kù)或是已有的前端技術(shù)棧整合。36侵入性低不對(duì)整體架構(gòu)做過(guò)多約束，方便與其他庫(kù)或是已有的前端技數(shù)據(jù)持久層DataPersistenceLayer服務(wù)器端數(shù)據(jù)庫(kù)DatabaseViewViewModelModel以POJO作為Model使得Vue對(duì)于數(shù)據(jù)持久層的接口非常靈活Vue+BackboneModelVue+FirebaseVue+Meteor37數(shù)據(jù)持久層服務(wù)器端ViewViewModel以POJO作鼓勵(lì)模塊化基于組件的開(kāi)發(fā)模式有利于將界面代碼自然分割成更容易維護(hù)的模塊38鼓勵(lì)模塊化基于組件的開(kāi)發(fā)模式有利于將界面代碼38基于CommonJS的單文件組件：Vueify通過(guò)Browserify或者Webpack這樣的模塊構(gòu)建工具，將一個(gè)組件的模板、CSS和JS都寫(xiě)在同一個(gè)文件里。/vuejs/vueify39基于CommonJS的單文件組件：Vueify通過(guò)Br輕量+高性能~18kbmin+gzip，無(wú)外部依賴(lài)不依賴(lài)臟檢測(cè)的高效數(shù)據(jù)綁定40輕量+高性能~18kbmin+gzip，無(wú)外部依賴(lài)40Thanks@尤小右@yyx99080341Thanks@尤小右@4Vue.js數(shù)據(jù)驅(qū)動(dòng)+組件化的前端界面開(kāi)發(fā)@尤小右@yyx99080342Vue.js數(shù)據(jù)驅(qū)動(dòng)+組件化的前端界面開(kāi)發(fā)@尤小右@yyVue.js概況2013年底作為個(gè)人實(shí)驗(yàn)項(xiàng)目開(kāi)始開(kāi)發(fā)2014年2月公開(kāi)發(fā)布2014年11月發(fā)布從頭重寫(xiě)的0.11截止2015年1月：3100+StarsonGitHub43Vue.js概況2Vue.js不是一個(gè)框架44Vue.js不是一個(gè)框架3路由視圖管理數(shù)據(jù)持久化45路由4路由視圖管理數(shù)據(jù)持久化靈活的接口46路由靈活的接口5簡(jiǎn)單示例QuickDemo47簡(jiǎn)單示例6核心思想：數(shù)據(jù)驅(qū)動(dòng)組件化48核心思想：7數(shù)據(jù)驅(qū)動(dòng)Data-Driven49數(shù)據(jù)驅(qū)動(dòng)8視圖View用戶行為UserInput數(shù)據(jù)模型Model渲染Render50視圖用戶行為數(shù)據(jù)模型渲染9視圖View用戶行為UserInput數(shù)據(jù)模型Model渲染Render視圖只是數(shù)據(jù)的映射“真相只有一個(gè)”51視圖用戶行為數(shù)據(jù)模型渲染視圖只是數(shù)據(jù)的映射“真相只有一個(gè)”1DOMDOM在單頁(yè)Web應(yīng)用中的問(wèn)題

重新渲染整個(gè)視圖是昂貴的手動(dòng)更新DOM來(lái)保持視圖和數(shù)據(jù)的同步很容易導(dǎo)致bug52DOMDOM在單頁(yè)Web應(yīng)用中的問(wèn)題

11ViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁定實(shí)現(xiàn)自動(dòng)同步53ViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁DOMPOJO(原生JS對(duì)象)VueViewViewModelModel通過(guò)MVVM的數(shù)據(jù)綁定實(shí)現(xiàn)自動(dòng)同步54DOMPOJOVueViewViewModelModel通過(guò)varvm=

new

Vue({

el:'#demo',

data:{

msg:'HelloVue.js!'

}

})<div

id="demo">

<h1>{{msg}}</h1>

</div>JavaScriptHTML55varvm=newVue({

el:'#demvarvm=

new

Vue({

el:'#demo',

data:{

msg:'HelloVue.js!'

}

})<div

id="demo">

<h1>{{msg}}</h1>

</div>JavaScript指令Directive（插值其實(shí)被編譯為v-text指令）ViewModelModelViewHTML56varvm=newVue({

el:'#demViewModelDOMListenersDirectivesViewModel應(yīng)用邏輯全部是數(shù)據(jù)操作DOM操作封裝在指令中57ViewModelDOMListenersDirectiv組件化Component-Oriented58組件化17每一個(gè)應(yīng)用界面都可以看作是組件構(gòu)成的NavContentItemSidebarSideItem59每一個(gè)應(yīng)用界面都可以NavContentItemSideba每一個(gè)組件都可以看做是一個(gè)ViewModelNavContentItemSidebar60每一個(gè)組件都可以看做是一個(gè)NavContentItemSid所以可以把界面抽象為ViewModelTree61所以可以把界面抽象為20在Vue.js中注冊(cè)組件//擴(kuò)展Vue來(lái)自定義一個(gè)可復(fù)用的組件類(lèi)varMyComponent=Vue.extend({template:

'<p>{{msg}}</p>',paramAttributes:['msg']})//全局注冊(cè)該組件Vponent('my-component',MyComponent)62在Vue.js中注冊(cè)組件//擴(kuò)展Vue來(lái)自定義一個(gè)在Vue.js模板中使用組件<my-component

msg="Hello!"></my-component>my-component組件的模板將會(huì)被填充到該元素中，而msg則會(huì)被作為數(shù)據(jù)傳入該組件實(shí)例。渲染結(jié)果如下。<my-component><p>Hello!</p>

</my-component>63在Vue.js模板中使用組件<my-component通過(guò)paramAttributes實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞<my-component

msg="{{msgFromParent}}"></my-component>rootmy-componentmsgFromParentmsg雙向綁定每一個(gè)組件都默認(rèn)有自己的獨(dú)立作用域。64通過(guò)paramAttributes<my-componen組件之間也可以通過(guò)事件系統(tǒng)進(jìn)行通信$dispatch()65組件之間也可以通過(guò)$dispatch()24組件之間也可以通過(guò)事件系統(tǒng)進(jìn)行通信$broadcast()66組件之間也可以通過(guò)$broadcast()25一些實(shí)現(xiàn)細(xì)節(jié)67一些實(shí)現(xiàn)細(xì)節(jié)26基于ES5Object.defineProperty實(shí)現(xiàn)對(duì)POJO(原生JS對(duì)象)的觀察和依賴(lài)收集ObjectsettergetterProperty收集依賴(lài)觸發(fā)更新68基于ES5Object.definePropertyObasettergetterbWatchera.b收集依賴(lài)Directivev-text="a.b"DOM{{a.b}}通知更新通知依賴(lài)收集機(jī)制的實(shí)現(xiàn)類(lèi)似Knockout，精確到每一個(gè)屬性，比臟檢測(cè)效率得多，性能不受制于watcher的數(shù)量。69asettergetterbWatcher收集依賴(lài)Direcvm.msg=

'one'

vm.msg=

'two'

vm.msg=

'three'

//只會(huì)觸發(fā)一次DOM更新異步批量更新70vm.msg='one'

vm.msg='two'

varvm=

new

Vue({

data:{

nested:{

a:{

b:'hi!'

}

}

}

})可以直接替換多層嵌套的對(duì)象//直接替換對(duì)象

vm.nested={

a:{

b:'yo!'

}

}71varvm=newVue({

data:{

vardata={

msg:'hi'

}

varvm=

new

Vue({

data:data

})可以直接修改原數(shù)據(jù)對(duì)象//直接修改原對(duì)象

data.msg=

'changed'

//DOM會(huì)在下一幀更新72vardata={

msg:'hi'

}可以直接varitems=[a,b,c]

varvm=

new

Vue({

data:{

items:items

}

})

//下一幀會(huì)觸發(fā)更新

items.reverse()數(shù)組的mutating方法會(huì)觸發(fā)更新73varitems=[a,b,c]

varvm=對(duì)于直接的數(shù)組替換，v-repeat會(huì)進(jìn)行Array-diffing確保盡可能地復(fù)用vm和DOM元素//不會(huì)導(dǎo)致性能問(wèn)題喲vm.items=vm.items.filter(fn)*即使用含有全新數(shù)據(jù)對(duì)象的數(shù)組替換，只要對(duì)象有uid也可以通過(guò)比較uid來(lái)達(dá)成有效復(fù)用。74對(duì)于直接的數(shù)組替換，//不會(huì)導(dǎo)致性能問(wèn)題喲*即使用含有全//如