vue框架入門PPT

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ì)好打包好，你就開箱用就可以了。 Meteor：Meteor只是一個(gè)極端，它是從前到后全都包含，從前端到數(shù)據(jù)

2、層到數(shù)據(jù)庫，全都幫你打包好。,2,3,React+ & Vue+,2,4,Vue 現(xiàn)狀,2,5,Vue 現(xiàn)狀,2,6,簡介,Vue.js（讀音 /vju/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。,2,7,2,8,MVVM,Demo001,2,9,生命周期,Demo005,每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(data observer)、編譯模版

3、、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過程中，實(shí)例也會(huì)調(diào)用一些生命周期鉤子，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。,2,10,模板語法,Vue.js 使用了基于 HTML 的模板語法，允許開發(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í)際上只用于簡單的運(yùn)算。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。例如 message.split().reverse().join() 對于復(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,過濾器,Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個(gè)地方：mustache 插值和 v-bind 表達(dá)式。,Demo004,2,14,事件處理,用v-on指令監(jiān)聽 DOM 事件來觸發(fā)一些 JavaScript 代碼。許多事件處理的邏輯都很復(fù)雜，所以直接把 JavaScript 代碼寫在v-on指令中是不可行的。因此v-on可以接收一個(gè)定義的方法來調(diào)用。,Demo006,2,15,表單,你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。,Demo009,2,16,深入響應(yīng)式原理,2,17,