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

Vuejsl

Vuejs語法l

vue-cli腳手架l

vue-router路由l

“

”

項目Vue的特點l

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

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

數(shù)據(jù)驅(qū)動思想數(shù)據(jù)到視圖的操作數(shù)據(jù)改變視圖簡化對DOM的操作l

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

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

鉤子函數(shù)：beforeCreate

:

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

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

: 掛載之前mounted

: 掛載之后beforeUpdate

: 更新之前updated

: 更新之后beforeDestroy

: 銷毀之前destroyed

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

動態(tài)的綁定數(shù)據(jù)。簡寫為:

v-on綁定事件

器。簡寫為

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

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

v-else-if

v-else

條件判斷指令v-cloak

隱藏未編譯的Mustache語法，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事件細節(jié)例如：要 冒泡：v-on:click.stop=

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

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

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

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

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

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

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

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

單個slotl

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

Vue

組件的

API

來自三部分Props

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

自定義

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

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

接受一個value屬性l

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

。只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染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

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

/study

/vue-routerl

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

導航和渲染<router-link>

導航

，默認生成a<router-view>