? ????????????????????? Vue知識點的總結
Vue中的指令及其基本語法：
第一步：從官網上下載vue開發版本的js文件
引入js文件
語法：
??? Varvm=new Vue({
??????? El:”#app”,//el相當于element查找方式為queryselector方式
??? //注意用逗號隔開
??????? Data:{
},
Methods:{
},
Computed:{}
})
具體指令：
??? 1,v-text:這個指令相當于js中innertext，且只對元素起作用，不對屬性起作用
??? 2，v-html：這個指令相當于js中innerHTML
??? 3,v-show:這個指令返回的是一個布爾值，當v-show=”false”時，相當于給元素添加了一個display:none;的屬性。當v-show=‘true’時顯示元素。且當元素切換時觸發過渡效果。
??? 4，v-if，v-else，v-else-if：相當于js中的if條件語句是一樣的。可以用if來做一些頁面的切換。但是明顯后面會有更好的方法。這里我就不早說了。
??? 5，v-on：事件：
@是它的縮寫，on中其實自帶很多事件修飾符：
??? .stop-調用event.stopPropagation()阻止冒泡事件
??? .prevent–調用eveent.preventDefault()阻止默認事件
??? .capture–添加事件偵聽器時使用capture模式
??? .self? 只當事件是從偵聽器綁定的元素本身觸發時才會觸發回調
??? .{keyCode| keyAlias} –只當事件是從特定鍵觸發時才會觸發回調
??? .native–監聽組件根元素的原生事件
??? .once–只觸發一次回調
??? .left–只當點擊鼠標左鍵才會觸發
??? .right? -只當點擊鼠標右鍵才會觸發
??? .middle–只當鼠標點擊中鍵才會觸發
??? .passive? -這個需要再網上搜一下
v-bind：
??? 縮寫：‘：’，
參數：AttrOrProp(optional)
修飾符：
.prop?被用于綁定DOM屬性
動態地綁定一個或多個特性，或一個組件prop到表達式
在綁定class或style特性時，支持其它類型的值，如數組或對象。
v-model：
預期：隨表單控件類型不同而不同，雙向綁定
使用限制：
Components
修飾符：
.lazy 取代input 監聽change事件
.number 輸入字符串轉為數字
.trim 暑促首尾空格過濾
用于表單控件或者組件上雙向綁定
V-pre：不需要表達式
用法：跳過這個元素和它的子元素的編程過程。可以用來顯示原始mustache標簽。跳過大量沒有指令的節點時會加快編譯速度。簡單來理解就是，組件和子元素加了這個東西就不會被編譯
V-cloak：不需要表達式（中文意思是掩飾，你應該知道用法了吧？）
用法：這個指令保持在元素上直到關聯實例結束編譯
v-once：只執行一次
es6新特性：object.assign()；
//參數1：對象，目標對象
//剩余參數：對象，源對象
//方法的作用：將源對象上的所有對象拷貝到目標對象上
語法：obj.assign（obj，obj1，obj2，obj3，obj4）//意思是將obj1，obj2，obj3，obj4都賦值給obj目標對象
Computed方法和methods方法的區別：
[if !supportLists]1， [endif]調用方式不一樣：computed是屬性的調用，methods是函數的調用
[if !supportLists]2， [endif]計算屬性會緩存，如果值沒有改變，就算引用再多次，也只會執行一次，其他的調用都是通過緩存來引用的。而methods不一樣，methods是方法的引用，不會緩存，且調用幾次運行幾次。
生命周期函數（鉤子函數）；
描述的是實例從創建到銷毀的過程。Vue給我們提供生命周期鉤子，vue實例的生命周期函數一共有8個，非常簡單，分別是：
[if !supportLists]1， [endif]創建前后：beforecreate??? created
[if !supportLists]2， [endif]掛載前后：beforemount???? mounted
[if !supportLists]3， [endif]數據更新前后：beforeupdata?? updated
[if !supportLists]4， [endif]實例銷毀前后：?? boforedestroy? destroyed
注意vue組件的生命周期則要多三個生命周期：分別為
當組件出現 ‘keep-alive’時的deactivated? activated
Vue2.0中新出的一個異常處理的鉤子函數：errorCaptured；
類型（err：error，vm：component，info：string）=>？boolean
當捕獲到一個來自子孫組件的錯誤時調用，收到三個參數：錯誤對象，發生錯誤的組件實例，以及一個包含錯誤來源信息的字符串，當返回false時，可以阻止它向上傳播。
自我對生命周期的理解：（自我話語概括）：
Vue實例生命周期鉤子：
BeforeCreate：在實例初始化之后，數據觀測（data observer）和event/watch事件配置之前調用。
Created：在實例創建完成之后被立即調用。在這步，實例已完成一下的配置：數據觀測（data observer），屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒有開始，$el還不可見。
BeforeMount：在掛載開始之前被調用：相關的render函數首次被調用。
注意，該鉤子在服務器端渲染期間不被調用。
Mounted：el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子。如果root實例掛載了一個文檔內元素，當mounted被調用時，vm.$el也在文檔內
注意mounted不會承諾所有的子組件也都被一起掛載。如果你希望等到整個視圖都渲染完畢，可以用vm.$nextTick替換掉mount：這是什么意思呢？意思是mounted有可能沒有等到所有子組件都掛載渲染完成之后才調用，如果希望是全部掛載完之后調用的話其實你可以用：
Mounted：function（）｛
??? This.$nextTick（function（）｛
｝）
｝來替換mounted鉤子函數。但是實際上我覺得還是給mounted上加東西唄。。。
BeforeUpdata：數據更新時調用，發生在虛擬DOM打補丁之前，這里適合在更新之前訪問現有的DOM，比如手動移除已添加的事件監聽器。（注意，該鉤子函數在服務器渲染期間不被調用，因為只有初次渲染會在服務端進行），簡單來說就是數據改變了需要重新渲染
Updated:由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子
當這個鉤子被調用時，組件DOM已經更新，所以你現在可以執行依賴于DOM的操作。然后在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或watch取而代之。（注意，updated 不會承諾所有子組件也都一起被重繪，如果你希望等到整個視圖都重繪完畢，可以用vm.$nextTick替換掉updated）
如下：（題外。。。這個$nextTick()方法挺有意思的，beforeupdata和updated都用到它）
Updated：function（）｛
??? This.$nextTick（function（）｛
｝）
｝
Activated;組件生命周期函數鉤子，在keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用。
Deactivated：組件生命周期鉤子函數，在keep-alive組件停用時調用。該鉤子在渲染期間不調用
BeforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用
Destroyed：vue實例銷毀后調用。調用后，vue實例指示的所有東西都會解綁定，所有的事件監聽器都會被移除，所有的子實例也會被移除。該鉤子在渲染期間不被調用
ErrorCaptured：vue2.5.0+中新增的一個組件生命周期鉤子函數，類型當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象，發生錯誤的組件實例以及一個包含錯誤來源信息的字符串，此鉤子可以返回false以阻止該錯誤繼續向上。。
什么叫模塊化開發：
每個js都有自己的獨立作用域。
作用：將各個功能點一個一個的分割開。
思考，如果沒有commit規范，webpack，cmd，amd等模版插件你怎么進行模塊化開發？
答：思考，怎么讓js擁有獨立作用域？可以用匿名函數自執行。匿名函數自執行可以讓每個js都有自己的獨立作用域。
緩存的最基本的標準：
首先，緩存的路徑需要是一樣的。
Webpack的功能：
[if !supportLists]1， [endif]編譯模塊化的js代碼
[if !supportLists]2， [endif]編譯模塊化的css代碼
使用loader將css語法轉為js的語法
（css-loader，style-loader）
不是webpack自帶的，所以我們要
Npm install css-loader style-loader –D去下載
配置webpack的編譯：比如圖片的編譯：
[if !supportLists]3， [endif]編譯文件路徑：
使用file-loader/url-loader
Npm installfile-loader -D
并且需要配置webpack的編譯
4,配置本地服務器
??? Npminstall webpack-dev-server@2 –g(全局安裝)
??? Npminstall webpack-dev-server@2 –D(局部安裝)
啟動服務器：
??? Webpack-dev-server
[if !supportLists]4， [endif]編譯es6語法
Cnpm install babel-loader babel-core –D
Es6的模塊化方式:匿名函數自執行，然后模塊化開發就是讓每個文件都有它自己的文件作用域。
Vue路由：
路由的創建方式：
先在需要用到的地方引入vue文件，在index.js中import去引入vue的路由組件
然后在需要用的地方添加一個
路由的重定向：
｛
??? Path：‘**’，
??? Redirect：‘/to=>{}’重定向到指定頁面
｝
路由跳轉的方法總結：
[if !supportLists]1， [endif]js中的：window.localhost.hash=path.通過一個變量去使得文件動態的加載出來。
[if !supportLists]2， [endif]使用vue中的自帶方法：
[if !supportLists]1， [endif]this.$router.push([string]|[object]);進入下一頁
[if !supportLists]2， [endif]this.$router.back():返回上一頁
[if !supportLists]3， [endif]this.$router.forword():前進一頁
[if !supportLists]4， [endif]this.$router.replace();進入下一頁，然后上一個歷史記錄將不會再出現
[if !supportLists]5， [endif]this.$router.go(number);去以當前頁面為準的第幾個頁面，可以為負。
什么叫動態路由？
額，給路由的路徑傳一個變量唄，然后路由就變成了動態路由了
路由守衛（重點）：
什么是路由守衛？路由在跳轉前做的一些驗證，比如登錄驗證，是網站中普遍需求。
對此，vue-router提供的beforeRouteUpdate可以方便地實現導航守衛（navigation-guard）。
使用方法：
你可以使用router.beforeEach注冊一個全局前置守衛：
Const router=new VueRouterheight（{…}）
Router.beforeEach((to,form,next)=>{
})
當一個導航觸發時，全局前置守衛按照創建順序調用，守衛是異步解析執行，此時導航在所有守衛resolve完之前一直處于等待中。
每個守衛方法接收三個參數：
To：router： 即將要進入的目標路由對象。
From：router：當前導航正要離開的路由。
Next：function：一定要調用該方法來resolve這個鉤子，執行效果依賴next方法的調用參數。
Next（），進行管道中下一個鉤子，如果全部鉤子執行完了，則導航的狀態就是confirmed
Next（false）：中斷當前的導航，如果瀏覽器的url改變了（可能是用戶手動或者瀏覽器后退按鈕），那么url地址會重置到form路由對應的地址中。
??? 路由守衛的總結：（路由級別的）（全局&路由獨享）
Router.beforeEach
??? 全局前置守衛
Router.BeforeResolve
??? 全局解析守衛
Router.afterEach
??? 全局后置守衛鉤子
BeforeEnter
可直接定義在路由配置上，和beforeEach方法參數，用法相同
組件內的路由守衛：
[if !supportLists]1， [endif]beforeRouterEnter
在渲染該組件的對應路由被確認前調用，用法和參數與beforeEach類似
[if !supportLists]2， [endif]beforeRouteUpdate
在當前路由改變，并且該組件被復用時調用，可以通過this訪問實例，next需要被主動調用，不能傳
[if !supportLists]3， [endif]beforeRouteLeave
導航要離開該組件的對應路由時調用，可以調用，可以訪問組件實例this，next需要被主動調用，不能傳回調。
全局前置守衛：beforeEach
路由beforeEnter守衛
組件路由守衛beforRouteEnter，此時this并不指向該組件實例
全局解析守衛：beforeResolve
全局后置守衛：afterEach
組件生命周期：beforeCreate
組件生命周期：created
組件生命周期：beforeMount
組件生命周期：mounted
組件路由守衛：beforeRouteEnter的next回調
Vue數據的雙向綁定的原理：
Vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現，那么vue的雙向綁定進行數據劫持。
在vue實例中，data中的屬性都有相應的geter，seter方法，vue通過object.defineProperty（1）來實現數據的劫持。
Object.defineproperty()可以用來控制一個對象屬性的一些特有的操作。
發布訂閱者模式就是指：
[if !supportLists]1， [endif]實現一個監聽器observer，用來劫持并監聽所有屬性。如果有變動沒救通知訂閱者
[if !supportLists]2， [endif]實現一個訂閱者watcher，可以用來收到屬性的變化通知并執行相應的函數，從而更新視圖
[if !supportLists]3， [endif]實現一個解析器compile，可以掃描和解析每個節點的相關指令，并根據初始化模版數據以及初始化相應的訂閱器。
找了一下午，頭還是懵的，vue的雙向綁定這么6的么。。。數據挾持，發布者訂閱模式
defineProperty去實現數據挾持，然后
vue路由實現原理：
??? 前端路由是直接找到與地址匹配的一個組件或對象并將其渲染出來。改變瀏覽器地址而不向服務器發出請求有兩種方式：
??? 1；在地址中加入#以欺騙瀏覽器，地址的改變是由于正在進行頁內導航
??? 2：使用H5的window.history功能，使用URL的Hash來模擬一個完整的URL
Vuex知識點總結：
[if !supportLists]1， [endif]vuex是什么？
Vuex是一個專門為vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
這是官方對于vuex的解釋，對于我這個菜鳥來說，完全聽完就是一頭霧水。還是用簡單點的話來解釋吧，想象一下，如果當有多個對象都依賴于同一個數據時，我們是不是希望不需要寫多次數據，而是將數據設置在所有對象都可以訪問到的作用域中，vuex便是這種思想。
它解決的是多個視圖依賴于同一狀態以及來自不同視圖的行為需要變更同一狀態的問題，使我們不需要將精力放在組件之間數據的傳遞上，而只需關心數據是如何更新的。
[if !supportLists]2， [endif]vuex包含了哪些東西？
（1），state
State是vuex存儲數據的倉庫，是store中唯一的數據源，類似vue組件中的data函數。
（2），getters
Getters好比vue中計算屬性，相當于對state中的數據進行再次的處理，比如篩選數據，計算多個數據的操作。
（3），mutaions
改變state中數據的唯一方式，并且是同步的，它類似vue中函數的功能。
（4），actions
用于提交mutation來改變狀態，解決了mutation不能處理異步事件的問題
（5），modules
用于項目中各個模塊的分離，每個模塊各自擁有自己的state，mutation等，便于精確查找各個模塊擁有的state，方便快速的定位問題。
vue中過渡及動畫效果：
??????? 關鍵字：transition
Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡
[if !supportLists]1， [endif]條件渲染（使用v-if）
[if !supportLists]2， [endif]條件展示（使用v-show）
[if !supportLists]3， [endif]動態組件
[if !supportLists]4， [endif]組件根節點
當插入或刪除包含在transition組件中的元素時，vue將會做以下處理：
[if !supportLists]1， [endif]自動嗅探目標元素是否應用了css過渡或動畫，如果是，在恰當的時機添加/刪除css類名
[if !supportLists]2， [endif]如果過渡組件提供了javascript鉤子函數，這些鉤子函數將在恰當的時機被調用。
[if !supportLists]3， [endif]如果沒有找到javascript鉤子并且也沒有檢測到css過渡/動畫，DOM操作（插入/刪除）在下一幀立即執行
Transition封裝組件為我們提供了6個過渡的類名
在進入/離開的過渡中，會有6個class切換。
1，v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除
2，v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
3，v-enter-to：2.1.8版本及以上定義進入過渡的結束狀態。在元素被插入之后下一幀生效。
4，v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時生效，下一幀被移除。
5，v-leave-active：定義離開過渡生效時的狀態，在整個離開離開過渡的階段中應用，在離開過渡被觸發時生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
6，v-leave-to：在離開過渡被觸發之后下一幀生效（與此同時v-leaver被刪除），在過渡/動畫完成之后移除。
如果兩個組件中，一個組件包含另一個組件的話，那么需要父調用子組件，可以通過$slot來管理
對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的，則v-是這些類名的默認前綴，如果你使用了
name=’my-transition’>,那么v-enter會替換為my-transition-enter。
v-enter-active和v-leave-active可以控制進入/離開過渡的不同的緩和曲線。
Css動畫和過渡；
Css動畫用法同css過渡，區別是在動畫中v-enter類名在節點插入DOM后不會立即刪除，而是在animationend事件觸發時刪除
深入式相應原理；
Vue最獨特的特征之一，是其非侵入性的相應式系統。數據模型僅僅是普通的javascript對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解其工作原理同樣重要，這樣你可以回避一些常見的問題。在這個章節，我們將進入一些vue響應式系統的底層細節。
如何追蹤變化
??? 當你把一個普通的javascript對象傳給vue實例的data選項，vue將遍歷此對象所有的屬性，并使用Object.defineProperty把這些屬性全部轉為getter/setter。
??? Object.defineproperty是ES5中一個無法shim的特性，這也就是為什么vue不支持IE8以及更低版本瀏覽器的原因。
講到這里，還是來擴展一下Object.defineproperty（）這個方法吧。
Object.defineproperty（）方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回這個對象。
語法
Object.defineProperty（obj，prop，descriptor）
參數
Obj：要在其上定義屬性的對象
Prop：要定義或修改的屬性的名稱
Descriptor：將被定義或修改的屬性描述符。
感興趣自己了解，太多啦，太多啦。。。
當你把一個普通的javascript對象傳給vue實例的data選項，vue將遍歷此對象所有的屬性，并使用Objec.defineProperty把這些屬性全部轉為getter/setter。
Object.defineProperty是ES5中一個無法shim的特征，這也就是為什么vue不支持IE8及一下版本的原因。
??? 這些getter/setter對用戶來說是不可見的，但是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數據對象時getter/setter的格式化并不同，所以你可能需要安裝vue-devtools來獲取更加友好的檢查接口。
??? 每個組建實例都有相應的watcher實例對象，它會在組件渲染過程中把屬性記錄為依賴，之后當依賴項的setter被調用時，會通知watcher重新計算，從而致使它關聯的組件得以更新。
