知識點：

vue.jsj介紹
指令
修飾符
計算屬性
偵聽器
過濾器
生命周期
組件
路由

一、vue.js介紹

vue是一套用于構建用戶界面的漸進式框架
vue的核心只關注視圖層，不僅容易上手，還便于與第三方庫或既有專案整合

二、指令

（一）、指令

本質就是自定義屬性
VUE中指令都是v-開頭

（二）、內置指令

1、v-cloak

防止頁面加載時出現閃爍問題

2、v-text

v-text指令用于將資料填充到標簽中，作用與插值運算式，但是沒有閃動問題

如果資料中有html標簽會將html標簽一并輸出

注意：此處為單向系結，資料物件的值改變，插值會變化；但是當插件發生變化并不會影響資料物件的值

3、v-html

用法和v-text相似，但是他可以將html片段填充到標簽中

可能有安全問題，一般只在可信任內容上使用v-html，永不使用在用戶提交的內容上

它與v-text區別在于v-text輸出是純文本，瀏覽器不會對其在進行html決議，但是v-html會將其當html標簽決議后再輸出

4、v-pre

顯示原始資訊跳過編譯程序

跳過這個元素和他的子元素的編譯程序

一些靜態的內容不需要編譯加這個指令可以加快渲染

5、v-once

執行一次性的插值運算式【當資料改變時，插值出的內容不會繼續更新】

6、v-model

v-model是一個指令，限制在
、components中使用

雙向資料系結：
當資料發生變化的時候，識圖也就發生變化
當識圖發生變化的時候，識圖也會跟著同步變化

7、v-on

用來系結事件的

寫法：v-on：click 縮寫為@click;

8、v-bind

v-bind指令被用來回應地更新html屬性
v-bind：href可以縮寫為 :href;
可以縮寫為<img:src ="imagesrc”>

9、條件判斷 v-if

使用場景

多個元素通過條件判斷展示或隱藏某個元素或者多個元素
進行兩個視圖之間的切換

v-show和v-if區別

v-show本質就是標簽display設定為none ，控制隱藏

v-show只編譯一次，后面的其實就是控制css，而v-id不停的銷毀和創建，所以v-show性能更好一些，

v-if是動態向dom樹內添加或著洗掉DOM元素，

v-if切換有一個區域編譯/卸載的程序，切換程序中合適的銷毀和創建內部事件的監聽和子組件

10、回圈結構 v-for

用于回圈陣列里面的值可以是物件，也可以是普通元素

key的作用

key來給每一個節點作為唯一標識
key的作用主要是為了高效的更新虛擬DOM

（三）、自定義指定

介紹

內置指令不能滿足我們特殊的需求
vue允許我們自定義指令

vue.directive注冊全域指令

vue.directive注冊全域指令帶引數

區域指令

區域指令，需要定義在directives的選項中，用法和全域用法一樣

區域指令只能在當前組件里面使用

當全域指令和區域指令同名時一區域指令為準

三、修飾符

1、 事件修飾符

在事件處理程式中呼叫‘event.preventDefault’或’event.stoPropagation（）'是非常常見的需求
vue不推薦我們操作DOM，為了解決這個問題，vue.js為‘v-on’提供了事件修飾符
-修飾符是由點開頭的指令后綴來表示的

2.按鍵修飾符

在做專案的時候，會用到鍵盤事件，在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵， vue允許為‘v-on’添加監聽鍵盤事件時添加鍵盤修飾符

3、自定義按鍵修飾符別名

在vue中可以通過‘config-keyCodes’自定義按鍵別名

4、表單修飾符

1、.number轉換為數值
注：
當開始輸入非數字的字串時，因為vue無法將字串轉化成為數值
所以屬性值將實時更新成相同的字串，即使后面輸入數字，也將被視作字串

2、 .trim 自動過濾用戶輸入的首位空白字符
只能去掉首尾的，不能去掉中間的空格

3、lazy 將input事件切換成為change事件
.lazy修飾符延遲了同步更新屬性值的時機，即將原來系結在input事件的同步邏輯轉化成為系結在change事件上

注：失去焦點或者按下回車鍵的時候才會生效

四、計算屬性

computed
模板中放入太多的邏輯會讓模板過重且難以維護，使用計算屬性可以讓模板更加簡潔

計算屬性是基于它們的回應式依賴進行快取的

computed比較適合對于多個變數或物件進行處理和回傳的一個結果值，也就是樹多個變數中的某個值發生變化，則我們監控的這個值也就會發生變化

五、偵聽器

watch

使用watch來回應資料的變化
一般用于異步或者開銷比較大的操作
watch中的屬性一定是data中已經存在的物件
當需要監聽一個物件的改變時，普通的watch方法無法監聽到物件內部屬性的改變，只有data中的資料才能夠監聽到變化，此時就需要deep屬性對物件進行深度監聽

六、過濾器

vue.js允許自定義過濾器，可被用于一些常見的文本格式化

使用場景：
過濾器可以用在兩個地方：雙花括號和v-bind運算式
過濾器應該被添加在javascript運算式的尾部，由管道符指示
支持級聯操作

注意點：
過濾器不改變真正的’data’，而只是改變渲染的結果，并回傳過濾后的版本
全域注冊時是filter 沒有s的，而區域過濾器是filters ，是由s的

七、生命周期

介紹：
事務從出生到死亡的程序
vue實體從創建到銷毀的程序，這些程序中會伴隨一些函式的自呼叫，我們稱為這些函式為鉤子函式

生命周期函式：

八、組件

1.介紹

組件（component）是vue.js最強大的功能之一
組價可以擴展html元素，封裝可重用的代

2、組件注冊

全域注冊

vue.compoment（"組件名稱”，{ }），第一個引數是標簽名稱，第二個引數是一個選項物件

全域組件注冊后，任何vue實體都可以實作

用法：

注意事項：
組件引數data值必須是函式同時這個函式要求回傳一個物件
組件模板必須是單個根元素
組件模板的內容可以是模板字串

區域注冊

只能在當前注冊他的vue實體中使用

3、vue組件之間傳值

父組件向子組件傳值

父組件發送的形式是以屬性的形式系結到子組件的身上的

子組件用屬性props接收
在props中使用駝峰的形式，模板中需要使用短橫線形式字串的模板中沒有這個性質

子組件向父組件傳值

子組件用‘$emit（）’觸發事件

‘$emit（）’第一個引數為自定義的事件名稱，第二個引數為需要傳遞的資料

父組件用v-on監聽子組件的事件

兄弟之間的傳遞

兄弟之間傳遞資料需要借助于事件中心，通過事件中心傳遞資料
提供事件中心 var hub = new Vue()
傳遞資料方，通過一個事件觸發hub. e m i t ( 方 法 名 ， 傳 遞 的 數 據 ) 接 收 數 據 方 ， 通 過 m o u n t e d ( ) 鉤 子 中 觸 發 h u b . emit(方法名，傳遞的資料) 接收資料方，通過mounted(){} 鉤子中 觸發hub. emit(方法名，傳遞的數據)接收數據方，通過mounted()鉤子中觸發hub.on()方法名
銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞資料

組件插槽

介紹

組件最大的特點就是復用性，而且好插槽能大大提高組件的可復用能力

匿名插槽

具名插槽

具有名字的插槽
使用中的“name屬性系結元素

”

作用域插槽

父組件對子組件加工處理
既可以復用子組件的slot 又可以說使slot內容不一致

九、路由

1、概念

路由的本質就是一種對應關系，比如說我們的URL
地址中輸入我們訪問的url地址之后，瀏覽器要去請求這個URL地址對應的資源
那么url地址和真是的資源之間就有一種對應關系，就是路由

路由分為前端路由和后端路由

后端路由是由服務器端實作的，并完成資源的分發，后端路由性能相對前端路由來說比較低，所以我們接下來要學的是前端路由

前端路由是依靠hash值（錨鏈接）的變化進行實時變化的
前端路由：根據不同事件來顯示不同的頁面內容，即事件與事件處理函式之間對應關系
前端路由主要做的事情就是監聽事件并分發執行事件處理函式

2、 vue-router

簡介

他是一個vue.js官方提供的路由管理器，是一個功能更加強大的前端路由器，推薦使用
vue-router和vue.js非常契合，可以方便的實作SPA（單頁應用程式）應用程式的開發

vue Router的引入依賴vue 所以需要先引vue 在引入vue router

vue-router的特性

支持h5歷史模式或者hash模式
支持嵌套路由
支持路由引數
支持編程式路由
支持命名路由
支持路由導航衛士
支持路由過度影片特效
支持路由懶加載
支持路由滾動行為

vue router的使用步驟

1、匯入js檔案

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2、添加路由鏈接:是路由中提供的標簽，默認會被渲染為a標簽，to屬性默認被渲染為href屬性，to屬性的值會被渲染為#開頭的hash地址

<router-link to="/user">User</router-link>

3、添加路由填充位（路由占位符）

<router-view></router-view>

4、定義路由組件：

var User = { template:"<div>This is User</div>" }

5、配置路由規則并創建路由實體：

var myRouter = new VueRouter({
    //routes是路由規則陣列
    routes:[
        //每一個路由規則都是一個物件，物件中至少包含path和component兩個屬性
        //path表示  路由匹配的hash地址，component表示路由規則對應要展示的組件物件
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

6、將路由掛載到Vue實體中;

var myRouter = new VueRouter({
    //routes是路由規則陣列
    routes: [
        //path設定為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址，設定為一個路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

分類

嵌套路由

嵌套路由最關鍵的代碼在于理解子級路由的概念：
比如我們有一個/login的路由
那么/login下面還可以添加子級路由，如:
/login/account
/login/phone

動態路由

補充：

1.我們可以通過props來接收引數

2、還有一種情況，我們可以將props設定為物件，那么就直接將物件的資料傳遞給
組件進行使用

3、如果想要獲取傳遞的引數值還想要獲取傳遞的物件資料，那么props應該設定為
函式形式，

命名路由

給路由取別名

編程式導航

呼叫js的方法實作導航

this.$router.push("hash地址");

this.$router.push("/login");

this.$router.push({ name:'user' , params: {id:123} });

this.$router.push({ path:"/login" });

this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n為數字，參考history.go

this.$router.go( -1 );

至此，vue基礎結束

碼字不易，大佬點個贊在走吧