1、介紹vue
MVP和MVVM模式！！！
mvp模式，其中m是模型是ajax請求數據， v是視圖層（html），p是控制器，就是使用jq來實現業務邏輯相關操作(DOM操作很多)
MVVM模式，其中M是new實例里面相關操作，v是視圖層，vm即vue自己進行操作轉化！
首先使用vue（mvvm模式）可以通過兩種方式，
第一種：是直接通過引入vue.js的形式，那么這時候的vue直接寫在<script></script>里面，這時候的vue是全局注冊作為全局變量！我們進行全局注冊組件的時候，可以直接引用，如果是進行
<div id="app">
{{ message }} =======》》》》V層
<todo-item></todo-item>
</div>
<script>
//vue中全局注冊組件
Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>",
})
//vue全局實例化
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'， =======》》》》M層
content:"測試全局組件"
}，
method：{
}
})
</script>
2、vue的實例化
3、vue中的基本語法
計算屬性（computed）、方法（methods）、事件監聽（watch）
computed屬性，會有一個緩存機制，計算頁面重新加載，只要計算的屬性沒有發生改變，就不會重復執行computed，而方法methods中，只要頁面有重新加載就會被重復執行，
對於監聽事件（watch），需要監聽的屬性有發生變化時才會執行！！也既有緩存機制，但是相比代碼量會比computed多！！
computed中的get和set函數！！！
類名跟樣式表達式
：class=“{active：isActive}” 這時候，是通過isActive來控制active類名是否要顯示
：class=“[actived]” 這個時候activde的值是通過data里面的值來控制的
樣式表達式
：style=“styleObejt” styleObject的值是通過data來賦值==》styleObject：{color：#fff；}
key值標識唯一性
vue虛擬dom中，會有自帶緩存復用機制，如果它檢測到頁面上相同的東西沒有發生變化，它就會進行有效的復用！
例如：用戶名的時候input的輸入值是小明，當你把用戶名切換為密碼是，input上的值還是小明，這是因為input被復用了
當給下面的兩個input加key值，那么這時候input中的元素就不會被有效地復用！
v-for指令
使用該指令的時候，設置key值是不要使用index來賦值，而是使用后端提供的id，這樣可以保證唯一性跟提高性能
數組操作
在vue中，對數值進行時不能直接通過下標來增加（刪除）數組，通過這種方式增加數組（刪除），數據上是變了，但是頁面上不會變。
例如list[4]={"id":4,name:"55"}這時候頁面上的list元素還是只有三個！
在vue中如果想操作數組的同時，頁面跟着變化。有兩種方法。
第一種是使用數組中的7種編譯方法來操作數組
第二種是直接改變list數據的指定空間來改變
在列表渲染中使用包裹占位符template，來包裹需要循環的列表，這時候template不會被頁面渲染出來！！
對象操作
第一點：遍歷對象的時候，直接往對象里面加值，這時候頁面也是沒有跟着變的，同樣可以改變對象的引用==》數據指向新的引用對象
第二點：用vue中的set方法方法來改變對象（第一個參數是key，第二個參數是name）和數組（第一個參數是下標，第二個參數是對應的值）
對象：
使用vue實例化方法的$set方法！！！！第一個是key，第二個參數是name
3、組件的使用
第一點：全局組件跟局部組件，和子組件與父組件之間的傳值
第二點：使用組件時的一些小細節用法
知識點1：使用table的時候，使用組件會有一個小bug，在渲染的時候table標簽下面只能是<tbody></tbody>下面只能是<tr></tr>,所以要是直接用<row>組件，在頁面渲染出來的<tr>標簽會出現在table外面！這時候在<tr>標簽上是使用is=“row”進行組件渲染符合H5規范，同樣的ul li標簽也適應
知識點2：在組件中使用data，當在跟組件中使用data的時候，data可以是一個對象的形式，因為在根組件中，數據只被調取一次，而在子組件中，數據有可能被調用多次，
這時候，不能data只能用函數，為每個數據都存儲不同的空間。
Vue.component("row",{ data:function(){ return { content:'this is content' } }， //在子組件中data必須以函數的形式並且以return的方式返回數據 template:'<tr><td>{{content}}</td></tr>' }) var vm = new Vue({ el:"#app", data:{} //在根組件中是允許以對象的形式這樣寫的 })
知識點3：
在vue中，如果遇到復雜的操作需要使用dom操作時，可以使用$refs引用屬性來獲取dom元素
<div ref="hello">測試下ref</div> ===>>>>alert(this.$refs.hello.innerHTML) //測試下ref
在組件中使用ref來引用不同的子組件，這是ref指向的是這個組件
知識點4：父子組件傳值
父組件向子組件傳值都是通過屬性的形式傳值的（但是頁面渲染的時候，屬性沒有渲染出來）
<counter count="0"></counter> //傳值的時候，如果count前面沒有加“ ： ” 號，那么這時候傳的0是字符串類型
<counter :count="0"></counter> //傳值的時候，如果count前面有加“ ： ” 號，那么這時候雙引號里面的值是一個js表達式，這時候count傳0的是一個數字類型
單項數據流，子組件只能使用父組件傳過來的值，而不能直接對該屬性值進行直接改變，如果真的要改變，可以在子組件的data里另取一個變量進行賦值修改
父組件向子組件傳count值
子組件接收到后count值后，還需要對count的值進行，修改，這時候把count值賦予新變量number，然后在子組件的data里面對number進行修改
知識點5：組件參數驗證，在子組件接收父組件傳過來的時，props可以對這些值進行一些校驗，除了使用自帶的基本校驗方式，我們還可以自定義validator進行自定義校驗！！！
注意：當用props屬性接收的時候，改屬性不會被渲染出來，如果是沒有用props屬性接收，那么就是非props屬性，
這時候頁面會報錯，子組件沒辦法用到content的值，而且這時候子組件渲染成<div content="hell"></div> content變成了子組件的自定義屬性。
知識點6：給組件綁定原生事件
給組件綁定的事件都是自定義事件，這種事件只能從過子組件來觸發，如果想直接觸發原生事件可以在事件中加native！！
知識點7：非父子組件間傳值（Bus/總線/發布訂閱模式/觀察者模式）
Vue.prototype.bus = new Vue() ====>>>>表示把bus屬性掛載在vue是，這樣每個有用到VUE實例的地方都有bus屬性，而bus屬性又是一個new vue實例，所以也擁有vue的相關屬性！！！
觸發方：this.bus.$emit=('change',this.content)
接收方：this.bus.$on=('change',function(msg){
})
知識點8：插槽（slot）
父組件向子組件優雅傳dom值，使用插槽slot，當子組件中使用插槽slot時，父組件要是有傳值，那么solt上的默認值，就不會被顯示出來，插槽直接渲染父組件傳過來的值，如果沒有，默認值就會被顯示！
沒有給slot取名字的話，slot默認就是父組件插入的所有內容。取名字的話就會對應名字插件進去
知識點9：動態組件切換（v-once）
應用場景，例如我們想要通過點擊一個按鈕，實現不同組件的切換，這時候，我們可以使用兩種方法來實現，一種是使用componet的is屬性，一種是通過v-if，當我們使用v-if進行組件切換時，會對另一個組件進行銷毀，然后切換到的時候再進行創建，但是對於頻繁需要切換的靜態組件很好耗性能，我們可以加v-once，當這個v-once組件被第一次切換的時候，就會被存在內存里面，第二次使用的時候，就會被拿出來，在使用靜態頁組件切換時使用可以提高性能！！！
總結父組件跟子組件之間的相互通訊
<v-select :selectType="selectType"></v-select>
父組件傳值給子組件
export default {
data (){
return {
selectType:true;
}
}
}
子組件通過props的方式從父級接收數據：
props:{
selectType:{
type:Boolean,
default(){
return false;
}
}
}
在父級中：title是在子級中要用的名字，如果fff前面有：那么后面的tit就是個變量，在data中要去定義。如果沒有那么就是普通字符串。
<header :title="tit">
子組件傳值給父組件
子組件：<div class="sureBtn" @click="suremit"></div>
method:{
suremit:function(){
this.$emit('addShop',this.select,this.num);
}
}
父組件：
<v-select @addShop="sureAddShop"></v-select>
method:{
sureAddShop:function(key,num){}
}
4、vue中css的動畫
知識點1：動畫原理
首先，為需要動畫的標簽外層加一個<transition name=“fade”></transition>,然后可以給其設置一個名字，如果沒有設置名字，默認是V
顯示的狀態流程，默認第一幀是fade-enter，然后下一幀的時候fade-enter就會被銷毀，然后fade-enter-active是從第一幀開始就存在，知道結束才銷毀，所以可以用該屬性監聽某個屬性的變化，從而使用transition進行動畫過度效果
隱藏狀態流程，默認第一幀是fade-leave（動畫第一瞬間就存在，所以從顯示到隱藏狀態這個轉態就已經有了），下一幀fade-leave銷毀，fade-leave-to創建，而fade-leave-active從開始到結束一直存在
知識點2：使用@keyframes（css3動畫）和為動畫自定義命名
自定義命名 enter-active-class=“active” ！！！
知識點3：animate動畫庫
我們現在的應用場景是點擊按鈕的時候，動畫才會執行，如果想頁面一加載就有動畫效果，我們可以給transition增加appear屬性並且設置appear-active-class=“animated swing”
知識點4：使用animated動畫庫跟自定義動畫並且設置動畫時長
type="transition"來指定動畫時長是以哪個動畫為准，這邊指的是以transition動畫時長為准！也可以通過設置：duration來設置自定義時間
4、vue中js的動畫與velocity.js結合
通過js來寫動畫效果
velocity.js實現動畫
知識點5：多元素和多組件的切換(狀態過度Tween.js)
多元素的切換，使用mode設置多個元素過度（組件）效果，設置key解除緩存效果，出現動畫效果
當多個元素是用v-for循環出來的時候，可以使用<transition-group></transition-group>來包裹v-for循環元素！！！
動畫封裝
<fade :show="show"></fade>
6、去哪兒項目實戰
知識點1：單頁應用跟多頁應用
多頁應用：頁面的切換是通過請求不同的html頁面，首頁加載比較快，利於seo，缺點是切換頁面比較慢！
單頁應用：頁面之前的切換是通過js來控制渲染，始終都是在同一個頁面，優點是不同頁面之間切換速度快，缺點是首頁加載比較慢，不利於seo優化！！！
知識點2：路徑引用問題(webpack.base.config.js)
在vue中@符號表示的是src目錄下的文件
我們可以在webpack.base.config.js下面進行路徑配置 ，在'styles': resolve('src/assets/styles'),設置完，需要重啟服務器
知識點3：static文件夾的用法
static文件下的東西是用來放靜態的東西，是vue中唯一一個不需要打包編譯就可以被外部訪問的文件夾（通過相應的路徑訪問http://localhost:8088/static/mock/index.json），這里我們可以放模擬的數據！！！！
知識點4：步驟記錄
gitignore文件===》用來增加提交不提交到git倉庫里
知識點5：<keep-alive>（提高網站性能）
使用 <keep-alive>包裹在<router-view>來緩存路由，減少每次切換路由的時候，都請求ajax，但是使用這個緩存路由的時候，數據發送改變時也不會被重新請求路由，這時候需要用到keep-alive提供的方法
activated因為只有該生命周期函數會被執行，在里面判斷前后數據有沒有變，有再重新執行！！
我們可以通過2中方法來使用<keep-alive></keep-alive>來選擇緩存不同的路由頁面
方法一：使用<keep-alive>內封裝的include和exclude兩種方法
<keep-alive include="test-keep-alive"> <!-- 將緩存name為test-keep-alive的組件 --> <component></component> </keep-alive> <keep-alive include="a,b"> <!-- 將緩存name為a或者b的組件，結合動態組件使用 --> <component :is="view"></component> </keep-alive> <!-- 使用正則表達式，需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 動態判斷 --> <keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive> <keep-alive exclude="test-keep-alive"> <!-- 將不緩存name為test-keep-alive的組件 --> <component></component> </keep-alive>
方法二：動態配置路由，在router里面的index.js設置
然后在然后在app.vue文件下修改一下keep-alive組件的用法
知識點6：activated方法和deactivated生命周期鈎子（activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發）
keep-alive會緩存組件，是的每次切換路由的時候，頁面都不會重新請求ajax，而是直接用緩存里面的數據，如果這時候我們的數據發送變化需要重新請求ajax的時候，就需要用到keep-alive提供的activated函數（頁面重新顯示的時候會被執行，可利用前后兩次的數據是否變化來判斷是否重新執行ajax）
activated：keep-alive 組件激活時調用（頁面進入或顯示時失效被執行）
deactivated：keep-alive 組件停用時調用（頁面離開或隱藏時失效被執行）
注意一點：activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在 ！！！
知識點7：打包編譯
知識點1：打包編譯上線，cnpm run build 命令編譯，然后提交dist 文件里面的index跟static文件。到服務端。然后就可以直接用localhost/的后端方式來打開！！！
知識點改變提交給服務端的路徑，這時候需要修改config里面的配置，例如project文件里面
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/project', //把路徑修改為需要更改的路徑
然后重新執行命令cnpm run build然后在生成的dist文件修改問project！
這時候就可以通過localhost/project來訪問網站！！！
知識點8、異步組件調用提高網站加載速度從而提高性能
當路由中是調用組件名時，頁面在加載的時候會默認一次性把所有的組件頁面都加載出來，導致在打開首頁的時候，其它所有頁面一起被加載出來，從而打開速度緩慢！
方法一：在router文件下index。js修改
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' //@表示src目錄下的文件 import City from '@/pages/city/City' import Detail from '@/pages/detail/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home },{
修改為//改為箭頭函數異步加載組件
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home') //改為箭頭函數異步加載組件
}
方法二：在引用組件的時候用箭頭函數
components：{
header：（）=>import('./components/Header')
}
文件打包編譯后會生成下面三個文件，用后端網址打開時會有以下三個文件
異步組件調用拆分后，app.js被拆分成一個個js文件
注意：當app.js文件特別大的時候，使用異步組件，對app.js進行拆分，拆分后每次切換到前面沒有加載過的頁面都相當於是一次http請求（有加載過的話，有緩存不需要重新加載），所以當app.js不是很大的時候，不推薦進行異步組件拆分，直接在進首頁的時候都加載！！！
知識點9、字體圖標的使用
如何使用字體圖標
首先打開iconfont官網，選擇相應的圖標添加購物車，然后加入我的項目，然后下載到本地。解壓，然后選擇如下文件放在自己的目錄下，然后修改iconfont.css下面相應的路徑。
然后在需要用到字體圖標的地方使用
iconfont.css路徑修改
調用文件
<span class="iconfont"></span> //編碼在iconfont我的項目對應圖標那邊復制
如何新增字體圖標
把新增的字體圖標添加到項目后，然后下載到本地，替換四個字體文件，樣式文件不需要替換，但是必須修改下舊的iconfont.css里面的base64位路徑修改為最新下載下來的iconfont.css里面的base64位圖片位置！！
2.在vue中，如果某個函數需要用到ajax返回的data值，那這時候，不能通過在created或者mounted來獲取數據然后調用函數，需要在請求成功時，直接調用傳數據！
3.箭頭函數的使用
在vue中使用cs6語法，直接使用箭頭函數，那么函數所指的作用域直接指向最外層，不用通過_this=this來指向最外層！！！res是函數里面的參數即是返回的結果！！！
4.過濾器的使用
過濾器的使用中，如果沒有帶參數，只需要寫函數名即可，默認第一個參數是val值。{{title | ratefilter}},要是用使用參數則需要用函數的形式來調用過濾器{{title | ratefilter（“元”） }}
5.需要item中的item.check字段， vue中如何來判斷一個ajax字段是否存在，如何給vue中設置需要的字段！！
使用typeof判斷一個字段是否存在，使用vue.$set來為item.check增加字段，同時如果點擊事件的時候要改變列表item中的某個值也需要使用this.$emit ！！！但是如果是在forEach()里面可以直接賦值！！
如果列表是用v-for循環出來的，那么在進行選中判斷的時候，可以使用索引來控制元素有沒有被選中！！其中列表中的每一項使用forEach來循環相應的值，如果不是循環出來的列表，可以通過控制變量來實現選中操作!!!!!
循環出來的列表，控制選中方式！！！
forEach（）循環
循環出來的列表樣式控制
不是循環出來的列表選中方式控制
6.@click事件里面可以直接使用簡單表達式操作，但是在使用vue的過程中，如是在視圖html命令上進行操作元素，不用使用this來指定作用域進行操作，因為在指令里面默認作用域就是當前元素，使用指令會導致出錯！只有在vue實例函數里面，才能使用this進行作用域指定！！！
7.vue中事件處理之事件修飾符@click.prevent.self和@click.self.prevent區別（事件執行的過程中，根據冒泡事件從最里層開始觸發到最外層依次執行）！！！
@click.prevent事件表示，阻止默認事件例如a標簽中<a href="www.baidu.com" @click.prevent ="abc"> 這個時候a鏈接就不會跳轉，而是會執行abc函數！！！！@click.prevent.self事件表示，會阻止所有的點擊。
所以這兩個的區別是@click.self.prevent只會阻止自身的點擊事件，而不會阻止默認事件（跳轉事件）。而@click.prevent.self都會阻止
@click.self.prevent事件表示只會阻止對元素自身的點擊。就是只當在 event.target 即點擊當前元素時觸發處理函數，即如果事件不是自身元素觸發時，而是內部元素點擊冒泡觸發時，改元素的點擊事件不會被執行！！
實例1：@click.self.prevent
<div class="div1" @click="alertf(1)" style="background:#f00">我是第一個div <a class="div2" style="display: block;background:#ccc;width:80%;height:100px;" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一個div2 <div class="div3" style="background:#F1C142;width:70%;height:50px;" @click="alertf(3)">我是第一個div3</div> </a> </div>
上面的代碼中，只有點擊div2的時候alertf(2)才會被觸發同時阻止默認跳轉事件，觸發完冒泡觸發div1的點擊事件alertf(1)，然后div3的點擊事件alertf(3)不會被觸發！！！
點擊div3，會alert3,alert1,跳轉到/#。只阻止了alert(2)。因為會先判斷self，點擊到div3，不是self（即div2自身的點擊），所以不會執行click事件，就不會執行 阻止默認事件和alert(2) ，所以可以跳轉！！！！
實例2：@click.prevent.self
<div class="div1" @click="alertf(1)" style="background:#f00">我是第一個div <a class="div2" style="display: block;background:#ccc;width:80%;height:100px;" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一個div2 <div class="div3" style="background:#F1C142;width:70%;height:50px;" @click="alertf(3)">我是第一個div3</div> </a> </div>
點擊div3，會alert3,alert1。不但阻止了alert(2)，還阻止了a的默認跳轉。
因為點擊的時候會先prevent，阻止默認事件，阻止了跳轉;然后判斷是否是self，因為點擊到的是div3，所以不是self，阻止了alert(2)。