Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架

特點：易用、靈活、高效

全家桶：vue + components（vue element / iview...） + vue-router + vuex + vue-cli

類庫 vs 外掛 vs 元件 vs 框架

類庫：jquery、zepto、underscore...外掛：dialog、banner、drag、tab、iscroll...元件：bootstrap、swiper...框架：backbone、angular、vue、react、uni-app、react native、flutter...

宣告式和命令式

指令式程式設計：命令“機器”如何去做事情(how)，這樣不管你想要的是什麼(what)，它都會按照你的命令實現，例如for迴圈宣告式程式設計：告訴“機器”你想要的是什麼(what)，讓機器想出如何去做(how)，例如陣列內建方法forEach等

MVC & MVVM

new Vue(options)

返回值vm（viewModel）el：不能掛載到html或者body上 =>querySelectordata資料值對於物件來說要先宣告，否則新增屬性無效（可以基於vm.$set處理）vm.arr[0]=xxx 改變陣列中的某一項檢視不會渲染，需要基於內建的方法，例如：push...物件或者陣列可以整體替換值實現資料變檢視也變...

mustache（[ˈmʌstæʃ]） 小鬍子語法

valueJS表示式

常用的指令（directive）

v-modelv-html / v-text：取消小鬍子語法重新整理中的閃爍問題v-bind（縮寫 :）v-oncev-if 和 v-showv-forfor in迴圈 & for of迴圈遍歷資料型別的範圍原型上方法遍歷（或者陣列新增的xxx:xxx屬性遍歷）......Symbol.iteratoer：Array、Set、Map、String、Arguments、NodeList...v-on 事件繫結v-on:xxxmethods ：和data類似，都會把方法掛載到vm例項上（this都是當前例項）@xxx@xxx="func" & @xxx="func($event,...)"

directive自定義指令

Vue.directive([指令名，省略v-], function(el,bindings,vnode){}el當前元素bindings包含很多資訊name：指令名，不包括 v- 字首value：指令的繫結值oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用expression：字串形式的指令表示式arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"modifiers：包含修飾符的物件。例如：my-directive.foo.bar 中，修飾符物件 { foo: true, bar: true }vnode虛擬DOMctx = vnode.context 獲取當前元素所在的上下文ctx[bindings.expression]=xxx 獲取上下文中的表示式變數，並且把指定的值賦值給它鉤子函式bind：當用戶繫結指令時生效（只調一次）update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前（一個函式的方式就是把bind和update合在一起的寫法）componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫unbind：只調用一次，指令與元素解綁時呼叫inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)小練習：建立一個自定義指令控制文字框的校驗

事件修飾符

常規：.stop / .prevent / .once ...按鍵：.enter 或者 .13 / .up / .down / .left / .right ...組合修飾符...

表單元素的處理

普通文字框 或者 文字域單選框複選框下拉框小案例：全選和非全選

計算屬性、過濾器、監聽器

methods 普通方法filters 過濾器只能應用到鬍子語法和v-bind中小練習：輸入內容的單詞首字母大寫computedgetter & setter相對於普通方法來講，計算屬性是基於它們的響應式依賴進行快取的依賴data中的資料變數小練習：輸入內容的單詞首字母大寫小練習：全選和非全選watch當需要在資料變化時執行非同步或開銷較大的操作時應用監聽器小練習：全選和非全選小練習：資料非同步繫結的處理

data(){  return {    checked:false, //是否全選    checkModel:[]  }},watch:{  checkModel(){    if(this.checkModel.length==this.list.length){      this.checked=true;    }else{      this.checked=false;    }  }}...複製程式碼

class和style繫結

class的處理（物件語法、陣列語法）內聯樣式的處理...

生命週期函式（鉤子函式）

beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestory...

常用的屬性方法

$set : 設定響應式資料$el : 掛載的元素$destroy : 銷燬vue的例項；同時呼叫beforeDestroy destroyed$mount : 掛載真實DOM的方法$data : 響應式的物件$options: 是Vue的建構函式的引數$refs : 可以用來獲取指定的元素物件 （非受控元件）$on : 訂閱$emit : 釋出$watch：監控...

案例：選項卡

案例：購物車計算器

案例：商城類別篩選

雙向資料繫結的實現原理

Object.defineProperty實現的底層原理

//observer:觀察者function observer(obj) {\tif (obj && typeof obj === 'object') {\t\tfor (let key in obj) {\t\t\tif (!obj.hasOwnProperty(key)) break;\t\t\tdefineReactive(obj, key, obj[key]);\t\t}\t}}function defineReactive(obj, key, value) {\tobserver(value);\tObject.defineProperty(obj, key, {\t\tget() {\t\t\treturn value;\t\t},\t\tset(newValue) {\t\t\tobserver(newValue);\t\t\tif (value === newValue) return;\t\t\tvalue = newValue;\t\t}\t});}function $set(data, key, value) {\tdefineReactive(data, key, value);}

Vue 主要通過以下 4 個步驟來實現資料雙向繫結的：實現一個監聽器 Observer：對資料物件進行遍歷，包括子屬性物件的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個物件的某個值賦值，就會觸發 setter，那麼就能監聽到了資料變化。實現一個解析器 Compile：解析 Vue 模板指令，將模板中的變數都替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，呼叫更新函式進行資料更新。實現一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑 ，主要的任務是訂閱 Observer 中的屬性值變化的訊息，當收到屬性值變化的訊息時，觸發解析器 Compile 中對應的更新函式。實現一個訂閱器 Dep：訂閱器採用 釋出-訂閱 設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。

VUE中的元件（component）

元件的特點是：

每個元件就是一個自定義標籤可複用方便維護方便拆分每個元件作用域隔離（互不干擾）有完整的生命週期有自己的響應式資料和各種方法（事件）...

1.全域性元件 & 元件的基本語法

在任何元件中可以直接使用（不需要引入，直接在元件模板中呼叫即可） Vue.component(componentName,options)

元件名字中的一點規範kebab-case：只能呼叫PasalCase：既可類似前種方式呼叫，也可以方式呼叫呼叫元件的細節規範採用雙閉合方式單閉合方式不符合w3c規範（只能識別一個）template每個元件只能有一個根元素模板字串方式template標記方式slot插槽處理基礎操作多插槽的指定data必須是一個函式，保證不同元件之間的資料互不干擾（返回的物件中初始化資料）...<my-component>\t<template v-slot:xxx 或者 #xxx>\t\t珠峰培訓\t</template></my-component>{\ttemplete:`<div>\t\t<slot name='xxx'></slot>\t</div>`}

2.區域性元件

建立元件：let componenName={...}基於components屬性宣告元件：想用哪個元件需要先宣告使用元件

3.元件資訊通訊之父傳子：props屬性傳遞

父元件呼叫到的時候<my-component aa='zhufeng' :bb='xxx'></my-component>子元件中基於props宣告需要接收的屬性值Vue.component('my-component',{\tprops:['aa','bb'],\t...})props中宣告的屬性和data一樣，是響應式資料，掛載到vm例項上，可控制檢視渲染props中的一些細節問題命名大小寫：傳遞的是kebab-case格式，props中獲取的是camelCase駝峰命名指定屬性的型別：props:{xxx:String,...}指定屬性的預設值：props:{xxx:{type:String,default:'xxx',required:true}}type如果是一個數組，意為指定的多型別皆可以default可以是一個函式，函式返回值是預設值validator自定義驗證規則函式：必須符合函式中指定的規則，返回true/false傳遞的屬性值預設都是字串格式，如果想要讓傳遞的值是數字、布林、陣列、物件等格式，我們需要使用v-bind處理樣式和class自動合併問題

4.vue的單向資料流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。

Vue 的父元件和子元件生命週期鉤子函式執行順序可以歸類為以下 4 部分：

載入渲染過程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子元件更新過程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated父元件更新過程：父 beforeUpdate -> 父 updated銷燬過程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在一個子元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。子元件想修改時，只能通過 $emit 派發一個自定義事件，父元件接收到後，由父元件修改。有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子元件接下來希望將其作為一個本地的 prop 資料來使用。 在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性

5.元件資訊通訊之子改父：this.$emit

訂閱自定義事件：呼叫元件的時候基於屬性傳遞一個方法 （父）<my-component @func='xxx'></my-component>new Vue({\tmethods:{\t\txxx(value){\t\t\t//=>value是this.$emit時候傳遞的第二個引數值\t\t}\t}});通知自定義事件執行 （子）{\tmethods:{\t\txxx(){\t\t\tthis.$emit('func',10);\t\t}\t}}也可以基於此方法實現兄弟元件（父子元件、隔代元件）之間的資訊通訊let eventBus=new Vue; //=>建立事件匯流排//A元件eventBus.$on('xxxA',this.func);//B元件eventBus.$emit('xxxA');

6.基於ref實現父子元件資訊通訊

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項，基於此可以快速獲取和操作子元件中的資料parent和children是獲取元件和子元件的例項，只不過$children是一個數組集合，需要我們記住元件順序才可以

7.基於provide和inject實現祖先與後代的通訊

祖先元件基於provide註冊需要供後代元件使用的資料{\tprovide:{ //=>物件或者返回物件的函式都可以（屬性值如果是data中的資料，則必須使用函式的方法進行處理）\t\tname:'zhufeng',\t\tyear:10\t},\t...}後代元件基於inject宣告需要使用的資料並調取使用{\tinject:['name'],\tmethods:{\t\tfunc(){\t\t\tlet name=this.name;\t\t}\t}}

VUE中的TRANSITION動畫

1. 什麼情況下會用動畫

條件渲染 v-if條件展示 v-show動態元件 例如：vue-router控制組件渲染...

2. 如何實現動畫

修改元素的樣式：style & class使用JS實現動畫（前兩週在某些場景下都需要自己直接去操作DOM或者更加的麻煩）使用vue內建的transition & transition-group

3. transition的基礎使用

v-enter：定義進入過渡的開始狀態，在元素被插入之前生效，在元素被插入之後的下一幀移除v-enter-active：定義進入過渡生效時的狀態，在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除v-enter-to: 定義進入過渡的結束狀態，元素被插入之後下一幀生效 ，在過渡/動畫完成之後移除v-leave: 定義離開過渡的開始狀態，在離開過渡被觸發時立刻生效，下一幀被移除v-leave-active：定義離開過渡生效時的狀態，在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除v-leave-to: 定義離開過渡的結束狀態，在離開過渡被觸發之後下一幀生效，在過渡/動畫完成之後移除基於 transiton 標記中的 name 屬性來進行動畫樣式區分.demo-enter 等自定義過渡類名（例如：結合animate.css使用）<transitionenter-active-class="animated xxx" leave-active-class="animated xxx"

4.JAVASCRIPT中的動畫鉤子函式

Velocity.js函式<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" ...></transition>methods:{\t beforeEnter: function (el,done) { \t }, ...}

5. transition-group 處理多組元素動畫

如果在transition-group中使用v-for，需要設定:key唯一值小練習：關鍵詞模糊匹配搜尋

綜合實戰案例

1. 輪播圖的實現

2. TASK OA任務管理系統（俗稱TODO）

連結：https://juejin.im/post/5daf2b925188256b6c3866ef