相對代碼知識點，可以對比每次 git 的提交的注釋。搭建了一個中小型 vue 項目的基本框架。傳送門：?https://github.com/carrotlsp/vue-initialize

第一章

1.vue.js是一套構(gòu)建用戶界面 的漸進式JavaScript框架 。

2.文檔對象模型（DOM）將 web 頁面與到腳本或編程語言連接起來。

第二章

1.面向DOM編程，變成了面向數(shù)據(jù)編程

2.代碼習(xí)慣：事件處理命名方式 handleBtnClicked 用handle來命名事件方法

3.v-model：可以實現(xiàn)數(shù)據(jù)的雙向綁定，常用于 input 框內(nèi)。

4.MVP編程模式，也就是之前jQuery的編程方式M（模型層）V（視圖層）P（控制層）；M ? P ?? V；這種編程模式，大部分代碼都是在 js 里面，而且 js 70%~80% 又是在操作 DOM。

5.mvvm是vue 采用的設(shè)計模式：M（模型層）V（視圖層） VM（data 綁定和 DOM 監(jiān)聽：主要由 vue 這個框架實現(xiàn)），這種設(shè)計模式，讓開發(fā)著能更專注于業(yè)務(wù)的編寫大大簡化繁瑣的 DOM 操作。

6.父組件向子組件傳值通過:content="item"/> 子組件通過props:["content"]來接收。

7.子組件向父組件傳值通過@delete="handleItemDelete"/> 子組件this.$emit('delete');

8.JavaScript 中快速刪除數(shù)組中指定下表的元素this.list.splice(index, 1)?

第三章

1.生命周期函數(shù)：就是在 vue 的生命周期中的某個時間點會自動執(zhí)行的函數(shù)。

2.計算屬性（寫法簡單，有緩存機制）優(yōu)于 監(jiān)聽器（可做緩存機制，寫法復(fù)雜） 優(yōu)于 方法（沒有緩存機制）

3.計算屬性強大好用：掌握計算屬性的get和set方法。

4.vue 中的樣式綁定主要掌握兩種：:class=“{class-one:isActived}”?方式二：:class=“[class-one, class-two]”

5.js 中的等于‘==’ 抽象相等計算符（可能會進行類型轉(zhuǎn)換后再比較）‘===’嚴格相等計算符（會先比較類型，后比較值）。盡量使用嚴格相等來判斷，減少模糊性。

6.vue 中v-for=“(item, index) in array” 可以取得 index 值。

7.vue 中要實現(xiàn) data 里面的數(shù)組內(nèi)容變化了，頁面也跟著變化的效果。首先，直接改變 list[4]=“aa” 數(shù)組下標這種方式是無效的，需要使用數(shù)組操作方法來改變數(shù)組，有七個變異方法可以讓數(shù)據(jù)和頁面同步 push pop splice shift unshift reverse sort?；蛘咧苯痈淖円??；蛘哂?Vue.set()方法。

8.Vue.set()方法，可以實現(xiàn) data 里面無論數(shù)組還是對象的改變，都和頁面產(chǎn)生聯(lián)動。對于數(shù)組 Vue.set(this.list, index, value)對于對象Vue.set(this.obj, key,value)。

9.<template></template>是一個 Vue 占位標簽，可以寫代碼邏輯，而且不會被渲染到頁面上。

第四章

1.為什么 子組件的 data 要是一個 function 呢？因為子組件會被多次調(diào)用，而子組件不希望多次調(diào)用使用的是同一個 data 的數(shù)據(jù)，所以用一個 function 來 return 保證各自獨立數(shù)據(jù)存儲。而根組件可以 data 是一個對象，因為根組件只會被調(diào)用一次。

2.Vue 中有一個單向數(shù)據(jù)流的概念，父組件向子組件傳遞的 props ，子組件不允許去直接修改。（假設(shè)能直接修改，那么子組件改掉了父組件的值，那就容易造成代碼混亂。如果同時向多個子組件傳一個值呢？）

3.如何給自定義組綁定原生事件呢？

4.Vue.property.bug = new Vue(); （總線，發(fā)布訂閱模式，觀察者模式）

5.Vue 中的插槽slot（無名插槽只能一個，具名插槽可以多個）。

6.Vue 中的作用域插槽父組件的寫法 {{props.item}}子組件的寫法 這種模式用于子組件的數(shù)據(jù)展示模式由父組件決定的情況。

7.Vue 中的動態(tài)組件? “type”的值決定了這個組件是啥組件。

8.Vue 中通過 v-once 可以提升一些靜態(tài)內(nèi)容來回切換的展示效率。

第五章

1.Vue 中的 css 動畫（也叫做過渡動畫） transation 會依次給 child 添加 css 樣式。第一幀 fade-enter fade-enter-active 第二幀fade-enterfade-enter-to 最后一幀fade-enter-active fade-enter-to?里面的關(guān)鍵原理就是使用css transation 來實現(xiàn)的。

2.掌握用@keyframes寫css動畫。

3.掌握應(yīng)用animation.css庫來展示動畫。

4.動畫組合duration type appear-active-class，在5-3詳細講解了這些動畫如何組合，有需要重復(fù)觀看。

5.Vue中的js動畫以及velocity.js動畫庫的使用。

6.Vue中多個元素或者組件的過渡動畫怎么實現(xiàn)？注意設(shè)置 key

第六章

1.什么是路由？就是根據(jù)網(wǎng)址的不同，返回給用戶不同的內(nèi)容。

2.什么是單頁面應(yīng)用？就是首次加載 html 和 比較多的js，接下來由 js 來擦除和渲染其他子頁面，不請求 html 頁面了。 優(yōu)點是切換流程， 缺點是首次加載慢 SEO 識別度差。

3.什么是多頁面應(yīng)用？就是每個頁面都從服務(wù)端請求 html 頁面。優(yōu)點是 SEO 識別度高 并且 首次加載快。缺點是切換頁面可能出現(xiàn)卡頓效果。

4.項目初始化要引入的東西？reset.css（用于保證項目在每個瀏覽器運行效果相同）border.css（用于保證一些二倍三倍屏幕里面1px 能顯示真實的1px）fastclick（用于解決一些項目中 click 事件會延遲300ms 的問題。）在 index.html里面讓整個程序不能用手勢進行縮放。

第七章

1.移動端項目最好使用 rem 作為單位。html{font-size:1px}? ? body{font-size:14rem},這樣日后調(diào)整整體字的大小非常方便

2.import ‘@/assets/images/xxx.png’ @表示什么，為什么可以這樣簡寫呢？這是因為在webpack.base.conf.js中默認resolve配置了‘@’: resolve(’src’).我們也可以在里面定義自己的快捷目錄，來簡化代碼。但是在css里面@import要變成@import(‘~@/assets/css/xxx.css’)。

3.第三方庫 vue-awesome-swiper 一個好用的輪播庫，試下怎么樣用，還可以做 icons 滑動板塊。

4.父組件的有 scoped 控制樣式如何穿透控制子組件的樣式呢？這在改變第三方庫組局的時候十分好用。 .wrapper >>> .swiper-pagination-bullet-active 這樣就可以控制.wrapper下所有指定樣式都生效。.wrap /deep/ .child-css

5.在哪個函數(shù)中進行網(wǎng)絡(luò)數(shù)據(jù)請求呢？在 mouted(){} 生命周期方法里面進行。

第八章

1.導(dǎo)航欄高度，導(dǎo)航欄標題色，主題色，等等，這些常用變量，如何統(tǒng)一控制？這時候就是 stylus 的好處了，可以存一個 variable ，然后各個 css 里面去獲取。日后改的時候，非常方便。

2.用 betterScroll 制作一個城市選擇列表頁面，第一了解 betterScroll 的使用，第二了解Vue 中通過this.refs[key] 獲取 dom 元素并進行操作的流程 第三 了解@touchStart @touchMove @touchEnd 的使用 https://www.youtube.com/watch?v=xjrfQT2orvM&t=12s

3.update(){}這個生命周期函數(shù)會在數(shù)據(jù)更新以及頁面完成渲染之后調(diào)用。

4.因為 @touchMove 的執(zhí)行頻率非常高，所以需要進行函數(shù)節(jié)流 節(jié)流使用 this.timer = setTimeout(()=>{執(zhí)行代碼}, 16) 這樣能控制代碼最快只能16毫秒執(zhí)行一次。（始終不太理解）

5.學(xué)會使用 indexof 來判斷字符串里面是否存在 key。在做城市搜索的時候非常好用。

6.-> state -> component -> action -> mutation -> 這是一個循環(huán)。如果沒有復(fù)雜異步邏輯操作，可以直接跳過 action 使用是沒問題。

7.使用localStorage的時候要使用 try{ localStorage }catch(e){}?

1.vuex的使用要學(xué)會拆分 index.js state.js mutation.js action.js getter.js

1.vuex學(xué)會使用computed:{ …mapState …mapGetter }? method: { …mapMutation …mapAction }來極大簡化 state 的操作代碼。

8.<keep-alive>是干啥的呢？keep-alive 可以讓路由加載一次之后，就把它放到內(nèi)存里面，不需要重新渲染頁面和執(zhí)行生命周期函數(shù)，可以直接使用內(nèi)存把以前內(nèi)容拿出來就行了。這個可以從 network -> XHR 加載數(shù)據(jù)情況來觀察效果。

9.如上面所述，那是否存在一個問題？我需要刷新數(shù)據(jù)的咋整呢？這個時候會多出來一個生命周期函數(shù) activated(){} ，懂了吧？

第九章

1.防止圖片加載之前沒高度和加載完成之后有高度會抖動的好辦法，巧妙的設(shè)置圖片的 class {over-flow:hidden; padding-bottom:100px; height:0px;}?

2.如何給內(nèi)容背景加一個漸變色？background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))

3.window.addEventListener(‘scroll’, this.handleScroll)會造成全局污染一般寫在 actived(){} ;那怎么辦呢？在 deactived 方法中window.removeEventListener(‘scroll’, thie.handleScroll) 進行解綁。

4.遞歸組件的使用 。 遞歸展示數(shù)據(jù)。

5.動態(tài)路由的獲取辦法 this.$route.params.id（詳情頁開發(fā)比較好用）

6.keep-alive 也可以讓指定頁面不緩存? exclude=“Detail”

7.有時候多個頁面都存在滾動的時候，會相互影響，這時候要在 router 里面加 scrollBehavior(){}控制

8.嘗試封裝一個 fade 漸漸隱藏和顯示的動畫組件，去包裹其他需要動畫的組件。

第十章

1.在 terminal 終端中輸入 ifconfig 查看本機在局域網(wǎng)的 ip 地址。

2.webpack 默認不支持從 ip 地址里面去訪問其他地址。如果需要的話，在 package.json 的 dev 項里面加入 “webpack-dev-server —host 0.0.0.0” 既可以真機調(diào)試了

3.在真機調(diào)試里面 AZIndex 手指去滾動會滾動整個頁面，功能就出問題了。這時候要 @touchstart.prevent =“”加一個? prevent 修飾詞。

4.android 手機可能出現(xiàn)白屏的情況之一 安裝 babel-polyfill 這個庫

5.異步加載，當我們項目非常大的時候，考慮異步加載組局，不一次性加載結(jié)束。 () => import(‘./components/Swiper’)?

6.封裝 axios 就是把網(wǎng)絡(luò)層獨立出來，統(tǒng)一處理錯誤代碼https://www.mmxiaowu.com/article/589af8cde9be1c5b21ef8e9c

7.兩個好用的函數(shù) @click.native 使用原生點擊，有時候一些組件添加@click無效的時候。 @touchStart.prevent 阻止事件向父組件傳遞，截斷事件。

想學(xué)習(xí)該 vue 教程的同學(xué)，我留下傳送門，碼子不易，如果文章對你有幫忙，點個贊唄。