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