妙味課堂技術(shù)-vue課件

Vuejsl

Vuejs語(yǔ)法l

vue-cli腳手架l

vue-router路由l

“

”

項(xiàng)目Vue的特點(diǎn)l

響應(yīng)式的數(shù)據(jù)綁定l

可組合的視圖組件響應(yīng)式的數(shù)據(jù)綁定一旦修改了數(shù)據(jù)，立馬更新視圖l

數(shù)據(jù)驅(qū)動(dòng)思想數(shù)據(jù)到視圖的操作數(shù)據(jù)改變視圖簡(jiǎn)化對(duì)DOM的操作l

追蹤依賴變化Object.definePropertywatcher實(shí)例對(duì)象可組合的視圖組件把視圖按照功能，切分若干基本單元組件可以一級(jí)一級(jí)組使用組件的好處：可整個(gè)應(yīng)用，形成了倒置的組件樹、可重用、可測(cè)試Vue實(shí)例每個(gè)Vue.js應(yīng)用都是通過(guò)構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)Vue的根實(shí)例啟動(dòng)的new

Vue({//選項(xiàng)})選項(xiàng)參數(shù)：eldatamethodscomputedwatchtemplateVue實(shí)例生命周期Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期l

鉤子函數(shù)：beforeCreate

:

數(shù)據(jù)綁定前created:

數(shù)據(jù)綁定后beforeMount

: 掛載之前mounted

: 掛載之后beforeUpdate

: 更新之前updated

: 更新之后beforeDestroy

: 銷毀之前destroyed

: 銷毀之后指令是V行u間內(nèi)e特指殊的令屬性，以v-開頭，指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到DOM上v-forv-bind

動(dòng)態(tài)的綁定數(shù)據(jù)。簡(jiǎn)寫為:

v-on綁定事件

器。簡(jiǎn)寫為

@循環(huán)數(shù)據(jù)v-model

在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定v-if

v-else-if

v-else

條件判斷指令v-cloak

隱藏未編譯的Mustache語(yǔ)法，css中設(shè)置[v-cloak]{display:none}條件和列表渲染條件渲染v-ifv-else-ifv-else列表渲染v-for

=

"key,value

in

array"v-for

=

"key,value,index

in

object"key值的使用事件處理l

事件綁定v-on:事件名="事件處理函數(shù)"l

事件修飾符methods只有純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細(xì)節(jié)例如：要 冒泡：v-on:click.stop=

"doThis"指定按鍵：v-on:keyup.13="doThis"計(jì)算屬性將模板中的數(shù)據(jù)邏輯

出來(lái)，放在計(jì)算屬性中計(jì)算屬性是依賴數(shù)據(jù)進(jìn)行緩存的，只有數(shù)據(jù)發(fā)生變化，才會(huì)重新求值組件把視圖按照功能，切分若干基本單元l

前端組件化思路就是將一個(gè)巨大復(fù)雜的東西拆分成粒度合理的小東西l

組件的組成樣式結(jié)構(gòu)行為邏輯數(shù)據(jù)單向數(shù)據(jù)流數(shù)據(jù)從父組件流向（傳遞）給子組件，只能單向綁定。在子組件

不應(yīng)該修改父組件傳遞過(guò)來(lái)的數(shù)據(jù)。l

使用prop傳遞數(shù)據(jù)組件實(shí)例的作用域是孤立的。組件間通信l

父組件->子組件使用prop傳遞l

子組件->父組件自定義事件slot分發(fā)內(nèi)容混合父組件的內(nèi)容與子組件自己的模板，這個(gè)過(guò)程被稱為內(nèi)容分發(fā)使用特殊的<slot>元素作為原始內(nèi)容的插槽。l

單個(gè)slotl

具名slot編寫可復(fù)用組件可復(fù)用組件應(yīng)當(dāng)定義一個(gè)清晰的公開接口。l

Vue

組件的

API

來(lái)自三部分Props

傳遞數(shù)據(jù)給組件Events

自定義

子組件變化事件Slots混合模板到子組件中餓了么組件庫(kù)：

/component/installation子組件雙向數(shù)據(jù)綁定要讓組件的v-model生效l

接受一個(gè)value屬性l

在有新的value時(shí)觸發(fā)input事件異步組件可能需要將應(yīng)用拆分為多個(gè)小模塊，按需從服務(wù)器

。只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來(lái)，用于后面的再次渲染ponent(custom-async',

function

(resolve,

reject)

{resolve()})vue-cli腳手架l

vue提供的腳手架工具l

腳手架l

編寫基礎(chǔ)代碼vue-cli腳手架l

生成

結(jié)構(gòu)l

本地開發(fā)調(diào)試l

代碼部署l

熱加載l

單元測(cè)試前端路由前端路由是根據(jù)不同的url地址展示不同的內(nèi)容或頁(yè)面應(yīng)用在SPA單頁(yè)應(yīng)用上

/study

/vue-routerl

配置組件和路由{path:路徑name:路由名component:對(duì)應(yīng)組件children:子路由}l

導(dǎo)航和渲染<router-link>

導(dǎo)航

，默認(rèn)生成a<router-view>