




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、初識(shí)Vue.js,官網(wǎng):/,2,1,為什么存在框架?,2,2,主流框架分析,純模板引擎:最少的就是純模板引擎,只管狀態(tài)到界面的映射。 React和Vue:其實(shí)這兩者都是非常專注的只做狀態(tài)到界面映射,以及組件。 Backbone:它會(huì)給你多一些架構(gòu)上指導(dǎo),比如它會(huì)讓你分層。 Angular:它做的事情就更多,它有自己的路由,這些都會(huì)包含在里面。 Ember:相比Angular,Ember做得就更加徹底,Ember信奉的是約定優(yōu)于配置,它會(huì)將一切都幫你設(shè)計(jì)好打包好,你就開(kāi)箱用就可以了。 Meteor:Meteor只是一個(gè)極端,它是從前到后全都包含,從前端到數(shù)據(jù)
2、層到數(shù)據(jù)庫(kù),全都幫你打包好。,2,3,React+ & Vue+,2,4,Vue 現(xiàn)狀,2,5,Vue 現(xiàn)狀,2,6,簡(jiǎn)介,Vue.js(讀音 /vju/,類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。Vue 的核心庫(kù)只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面,當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)。,2,7,2,8,MVVM,Demo001,2,9,生命周期,Demo005,每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程。例如,實(shí)例需要配置數(shù)據(jù)觀測(cè)(data observer)、編譯模版
3、、掛載實(shí)例到 DOM ,然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過(guò)程中,實(shí)例也會(huì)調(diào)用一些生命周期鉤子,這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。,2,10,模板語(yǔ)法,Vue.js 使用了基于 HTML 的模板語(yǔ)法,允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。 在底層的實(shí)現(xiàn)上, Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng),在應(yīng)用狀態(tài)改變時(shí), Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。,Demo003,2,11,計(jì)算屬性,模板內(nèi)的表達(dá)式是非常便
4、利的,但是它們實(shí)際上只用于簡(jiǎn)單的運(yùn)算。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。例如 message.split().reverse().join() 對(duì)于復(fù)雜邏輯,使用計(jì)算屬性,Demo008,2,12,指令,指令(Directives)是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式(除了 v-for,之后再討論)。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上。,Demo007,2,13,過(guò)濾器,Vue.js 允許你自定義過(guò)濾器,可被用作一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方:mustache 插值和 v-bind 表達(dá)式。,Demo004,2,14,事件處理,用v-on指令監(jiān)聽(tīng) DOM 事件來(lái)觸發(fā)一些 JavaScript 代碼。許多事件處理的邏輯都很復(fù)雜,所以直接把 JavaScript 代碼寫(xiě)在v-on指令中是不可行的。因此v-on可以接收一個(gè)定義的方法來(lái)調(diào)用。,Demo006,2,15,表單,你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇,但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖,它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù),并特別處理一些極端的例子。,Demo009,2,16,深入響應(yīng)式原理,2,17,
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 母親節(jié)策劃活動(dòng)方案
- 梨園踏青活動(dòng)方案
- 欒城宴會(huì)活動(dòng)方案
- 水果節(jié)日活動(dòng)方案
- 植樹(shù)節(jié)杭州活動(dòng)方案
- 水利系統(tǒng)三八節(jié)活動(dòng)方案
- 汽貿(mào)活動(dòng)策劃活動(dòng)方案
- 民族團(tuán)結(jié)戶外活動(dòng)方案
- 樓盤(pán)泳池活動(dòng)方案
- 汝州市植樹(shù)活動(dòng)方案
- 口腔診所前臺(tái)主管述職報(bào)告
- 2024年廣東“三支一扶”計(jì)劃招募筆試真題
- 2025-2030中國(guó)鋁業(yè)發(fā)展?fàn)顩r與投資戰(zhàn)略研究報(bào)告
- 設(shè)備租賃方案(3篇)
- 公關(guān)費(fèi)用標(biāo)準(zhǔn)管理制度
- 2025-2030年中國(guó)潔凈室風(fēng)扇過(guò)濾單元行業(yè)市場(chǎng)現(xiàn)狀供需分析及投資評(píng)估規(guī)劃分析研究報(bào)告
- AI大模型賦能數(shù)字農(nóng)業(yè)農(nóng)村數(shù)字鄉(xiāng)村建設(shè)方案
- 防汛物資儲(chǔ)備定額編制規(guī)程(SL298-2024)
- 綜合實(shí)踐:畫(huà)數(shù)學(xué)連環(huán)畫(huà)(大單元教學(xué)設(shè)計(jì))一年級(jí)數(shù)學(xué)下冊(cè)北師大版2025
- 2025年大學(xué)英語(yǔ)六級(jí)考試試卷及答案
- 水工程概論課件
評(píng)論
0/150
提交評(píng)論