Vuejsl

Vuejs語法l

vue-cli腳手架l

vue-router路由l

“

”

項目Vue的特點l

響應式的數據綁定l

可組合的視圖組件響應式的數據綁定一旦修改了數據，立馬更新視圖l

數據驅動思想數據到視圖的操作數據改變視圖簡化對DOM的操作l

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

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

鉤子函數：beforeCreate

:

數據綁定前created:

數據綁定后beforeMount

: 掛載之前mounted

: 掛載之后beforeUpdate

: 更新之前updated

: 更新之后beforeDestroy

: 銷毀之前destroyed

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

動態的綁定數據。簡寫為:

v-on綁定事件

器。簡寫為

@循環數據v-model

在表單控件元素上創建雙向數據綁定v-if

v-else-if

v-else

條件判斷指令v-cloak

隱藏未編譯的Mustache語法，css中設置[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:事件名="事件處理函數"l

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

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

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

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

組件的組成樣式結構行為邏輯數據單向數據流數據從父組件流向（傳遞）給子組件，只能單向綁定。在子組件

不應該修改父組件傳遞過來的數據。l

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

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

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

單個slotl

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

Vue

組件的

API

來自三部分Props

傳遞數據給組件Events

自定義

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

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

接受一個value屬性l

在有新的value時觸發input事件異步組件可能需要將應用拆分為多個小模塊，按需從服務器

。只在組件需要渲染時觸發工廠函數，并且把結果緩存起來，用于后面的再次渲染ponent(custom-async',

function

(resolve,

reject)

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

vue提供的腳手架工具l

腳手架l

編寫基礎代碼vue-cli腳手架l

生成

結構l

本地開發調試l

代碼部署l

熱加載l

單元測試前端路由前端路由是根據不同的url地址展示不同的內容或頁面應用在SPA單頁應用上

/study

/vue-routerl

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

導航和渲染<router-link>

導航

，默認生成a<router-view>