基礎知識:
vue的生命週期: beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、 beforeDestory/destoryedcss
vue經常使用指令: v-for、 v-bind(縮寫形式 :prop)、 v-on(縮寫形式 @click=’sss')、 v-if/v-else/v-else-if、 v-model、 v-once、 v-html、 v-show…html
vue自定義組件: Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'})vue
vue經常使用實例方法和屬性: data/$data、 methods/$methods、 $el、 computed(計算屬性)、 $watch、 $set、 $event、 $emit…node
若是須要更新的屬性須要緩存,則使用計算屬性的方式,不然可使用 methods裏的方法來更新屬性( methods裏的方法每次從新渲染都會執行)react
計算屬性默認提供了 getter,你還能夠給它設置 setterwebpack
當你數據變化是異步或者開銷較大時,可使用 watch偵聽器來響應數據的變化web
v-bind:class的值能夠是一個對象,可實現相似 react中 classnames模塊的功能vue-router
自定義組件上的 class會被渲染拼接到 template的根節點的 class屬性上(自定義組件上可以使用 v-bind:class來作class的判斷顯示邏輯)vuex
v-bind:style能夠用來綁定內聯樣式,這個內聯樣式的值能夠由一個對象來定義(相似css in js的模式),且能夠被定義爲數組(多個樣式對象)vue-cli
v-bind:style可使用多重值的形式: <div:style=「display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>
v-if/v-else/v-else-if的時候,能夠用key來管理可複用的元素
v-if是’真正’的渲染,它會確保在切換條件過程當中條件塊內的元素的事件監聽器和子組件適時的銷燬和重建
v-if是惰性的,初始爲假,什麼也不作,直到爲真的時候才渲染元素
v-show老是渲染元素,只是簡單的進行切換
v-if的切換開銷大, v-show則是初始渲染開銷大,頻繁切換使用 v-show,運行時常常改變則使用 v-if
v-if和 v-for一塊兒使用時, v-for的優先級更高
v-for可遍歷數組,第二個參數是索引
v-for可遍歷對象,第二個參數是 key,第三個參數是索引
v-for和 <template>搭配可減小渲染次數
v-for和自定義組件使用時,須要使用 props來傳遞值
儘量的爲遍歷子元素加上 key,得到渲染優化
數組變異方法: push/pop/unshift/shift/splice/sort/reverse改變原始數組
數組非變異方法: filter/concat/slice 不改變原始數組,老是返回新數組
Vue不能檢測到數組索引賦值(使用 vm.$set解決)和修改 length長度賦值(使用 splice解決)的狀況
Vue不能檢測對象屬性的添加和刪除(使用 vm.$set或 Object.assign)
is=「todo-item」這種屬性的寫法比較適合DOM模板
事件修飾符,它們可串聯使用: .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤爲適合移動端)
.passive不用同時和 .prevent使用,後者會被忽略
按鍵修飾符: .enter、 .tab、 .delete、 .esc、 .space、 .up、 .down、 .left、 .right
系統按鍵修飾符: .ctrl、 .alt、 .shift、 .meta(⌘|⊞|◆)、 .exact(容許精確控制系統修飾符組合鍵觸發)
鼠標修飾符: .left、 .right、 .middle
v-model會忽略表單元素的 value、 checked、 selected,僅僅使用實例中的數據做爲數據源
表單事件修飾符: .lazy、 .number、 .trim
組件是可複用的vue實例,具備vue實例大多數屬性和方法
組件可複用,每一個組件有獨立的空間
組件上的data必須是一個函數,這樣作避免影響了其餘組件
經過 Vue.component()全局註冊的組件可在其被註冊後的任何經過 newVue()建立的實例所使用,包含其組件樹中的全部組件
經過插槽 <slot>分發內容(其實就是相似於react的children)
動態組件 <component>配合屬性 is來實現
解析DOM模板時須要注意下可能會有不生效的狀況,須要使用is來傳遞組件
Vue組件
全局註冊/局部註冊
局部註冊組件在子組件中不可用
全局註冊的行爲必須在根Vue實例建立以前發生
camelCase的屬性能夠在組件中使用 kebab-case
能夠以對象的模式指定每個 props屬性的類型
父級 props的更新會向下流動,反之則不行
因爲JavaScript對象和數組是引用傳入的,因此當子組件對props的改變將會影響到父組件
props類型校驗能夠是原生構造對象的中的任意一個,也能夠自定義檢驗類型,經過 instanceof檢查
對於絕大多數特性來講,外部傳入的值會替換掉組件內部設置好的值,如input的type屬性,但有的屬性則是會進行合併,如class
inhertAttrs:false設置不但願根元素繼承特性,可使用 $attrs屬性來設置繼承的目標元素
v-on在設置事件監聽器時,會把事件名所有轉換成小寫,推薦始終使用 kebab-case的事件名
v-model可使用自定義組件中的 model屬性自定義
父組件模板的全部東西都會在父級做用域內編譯,子組件的全部內容都會在子組件做用域內編譯
插槽( <slot></slot>)/具名插槽( <slotname=「header"></slot>)/做用域插槽( slot/slot-scope)
<keep-alive>組件可用來緩存被切換後隱藏的組件的狀態
$root訪問根實例, $parent訪問父組件實例(不推薦)
父組件訪問子組件,使用 $refs屬性來獲取設置了 ref屬性的子組件
provide屬性容許咱們指定要分享給後代組件使用的方法,而後後代組件使用 inject屬性來得到祖先組件分享的方法(依賴注入)
事件偵聽器( $emit派發的事件)
v-on 指令偵聽
$on 偵聽一個事件
$once 一次性偵聽一個事件
$off 中止偵聽一個事件
慎用遞歸組件
儘可能避免組件的循環引用
優先使用 template來定義模板,而不是 inline-template
$forceUpdate來強制更新view
組件包含大量靜態內容時,可以使用 v-once來標記,緩存靜態內容
過渡 & 動畫
transition組件控制過渡動畫,能夠給任何元素和組件添加進入/離開過渡
當插入或刪除 transition中的元素時,vue會作以下處理
自動嗅探元素是否使用了css過渡和動畫,適當時機添加/刪除類名
元素的鉤子函數會在適當時機被調用
元素既沒有鉤子函數也沒有css動畫,插入和刪除操做在下一幀當即執行(瀏覽器逐幀動畫機制)
過渡的類名
v-enter/v-enter-active/v-enter-to
v-leave/v-leave-active/v-leave-to
css動畫用法同css過渡,區別是類名 v-enter不會在DOM插入後當即刪除,而是在 animationend事件觸發時刪除
自定義過渡類名,使用如下屬性指定:
enter-class/enter-active-class/enter-to-class
leave-class/leave-active-class/leave-to-class
自定義類名優先級高於普通的類名
使用 type屬性設置 transition或 animation來申明vue使用的動畫類型
transition組件上使用 duration來設置動畫執行的時間
可使用鉤子函數
beforeEnter/enter/afterEnter/enterCancelled
beforeLeave/leave/afterLeave/leaveCancelled
鉤子函數使用 v-on指令綁定
鉤子和結合過渡和動畫使用,也能夠單獨使用
在 enter/leave中,必須使用 done()來進行回調,不然會同步調用,過渡或動畫會當即完成
對於純使用JavaScript來進行的動畫,推薦使用 v-bind:css=「false」來取消css的檢測,減小css的影響
可以使用 apear設置初始渲染的過渡
apear/apear-active/apear-to
beforeApear/apear/afterApear/apearCancelled
多元素過渡,設置惟一 key
過渡模式:
In-out 新元素先過渡,完成後當前元素過渡離開
out-in 當前元素先過渡,完成後新元素過渡進入
默認行爲:進入和離開同時發生
多個組件過渡使用動態組件實現
列表過渡 <transition-group>
以真實元素呈現,默認爲 <span>,可以使用tag更改呈現標籤
過渡模式不可用
內部須要惟一 key
列表排序過渡,使用的是 FLIP動畫,使用類名 v-move來定義class
可複用性 & 組合
mixins混入屬性發生衝突時,以組件數據優先(一層屬性深度淺合併)
mixins混入方法發生衝突時,會將函數合併爲一個數組,優先執行混入方法,其次執行組件方法
Vue.extend策略和 mixins相同
慎用全局混入
合併策略能夠自定義(參考 vuex的具體實現: Vue.config.optionMergeStrategies)
全局自定義指令: Vue.directive()
局部自定義指令:屬性 directives,類型爲 Object
鉤子函數
bind 指令第一次綁定到元素時調用,只執行一次,可用於一次性初始化設置
inserted 元素插入父節點時調用
update 全部VNode更新時調用,可能發生在子VNode以前
componentUpdated 指令所在組件在VNode和其子VNode更新後調用
unbind 指令與元素解綁時調用
鉤子函數都會被傳入如下參數:
el 指令綁定元素,可操做DOM
binding 指令描述對象
vnode Vue生成的虛擬節點
oldVnode 上一個 Vnode,僅在 update和 componentUpdated中使用
指令接受全部合法的JavaScript表達式
渲染函數 & JSX
render函數接受 createElement方法做爲參數
createElement方法的做用是建立一個虛擬節點(VNode)
createElement參數比較複雜,參照官網:參數
組件樹中的 VNodes必須惟一
render中的 v-if/v-for可使用 if/else和 map重寫
插槽使用 this.$slot.default訪問,做用域插槽使用 this.$scopeSlots.default訪問和設置
可使用插件 babel-plugin-transform-vue-jsx支持JSX語法
將h做爲 createElement的別名是Vue生態的一個慣例,也是JSX要求的
函數式組件 關鍵詞:functional
函數式組件渲染開銷低,但相應的,它不會出如今Vue devtools的組件樹裏邊
函數式組件要求你本身實現同名特性的替換與智能合併
Vue的模板實際編譯成了 render方法實現的 VNode,可使用 Vue.compile()方法來輸出編譯結果
插件
插件會爲vue提供全局的功能,包括但不限於如下幾種:
添加全局的屬性或方法,如vue-custom-element
添加全局的資源(指令、過濾器、過渡等),如:vue-touch
經過全局 mixins添加一些組件選項,如:vue-router
添加Vue實例方法,經過添加到 Vue.prototype上實現
一個獨立的庫,同時有本身的API,又實現以上部分功能,如:vue-router
Vue插件有一個公開的方法 install,第一個參數是Vue構造器,第二個參數是一個可選對象
插件的使用經過全局方法 Vue.use(MyPlugin)使用,只會註冊一次插件
在CommonJS中,應該始終顯式的調用 Vue.use方法
社區插件列表awesome-vue
過濾器
{{msg|filter}}
<divv-bind=「msg|filter"></div>
全局過濾器使用Vue.filter()建立
局部過濾器使用對象屬性filters建立
過濾器函數老是接收表達式的值做爲第一個參數,過濾器能夠有多個,值依次向後傳遞
過濾器能夠接收額外的參數
構建 & 部署
<script>標籤引入 [vue.min.js](https://vuejs.org/js/vue.min.js)
使用 vue-cli
webpack + vue-loader
browserify + vueify
rollup + rollup-plugin-vue
利用鉤子函數 Vue.config.errorHandler定義配置來跟蹤運行時錯誤,能夠搭配 [Sentry](https://sentry.io/)使用(集成配置)