5d5375a0f265da03db076f59#heading-32

vue基礎(chǔ)知識點

1. vue中常見的指令

1.1 數(shù)據(jù)相關(guān)的指令

v-text：
- 主要用來更新textContent
- 雙大括號的方式會將數(shù)據(jù)解釋為純文本践宴，而非HTML

<span v-text="msg"></span>

<!-- 兩者等價 -->
<span>{{msg}}</span>

v-html：
- 命令模式可以解釋html

<div v-html="rawHtml"></div>

v-model：
- 用于在表單上創(chuàng)建雙向數(shù)據(jù)綁定

<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

上面這個例子中直接在瀏覽器input中輸入別的名字胯舷，下面的p的內(nèi)容會直接跟著變。這就是雙向數(shù)據(jù)綁定。

v-model：僅僅是一個語法糖渡贾，相當(dāng)于 :value+@input

input事件：當(dāng)輸入框中的數(shù)據(jù)改變時發(fā)生

1.2屬性相關(guān)的指令：

v-bind ``>
- 用于綁定html標簽中的屬性
  - v-bind:href="數(shù)據(jù)"
  - 簡寫： :href = "數(shù)據(jù)"

<a v-bind:href="hrefname">百度</a>
<a :href="hrefname">百度</a>

<script>
var app = new Vue({
    el:"#app",
    data: {
        hrefname:"http://www.baidu.com",
    }
})    
</script>

1.3 條件指令：

v-if v-if可以實現(xiàn)條件渲染碍扔，Vue會根據(jù)表達式的值的真假條件來渲染元素讨彼。

<a v-if="ok">yes</a>

如果屬性值ok為true乳愉，則顯示。否則千元，不會渲染這個元素苫昌。

v-else v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面幸海，否則不起作用祟身。

<a v-if="ok">yes</a>
<a v-else>No</a

v-else-if v-else-if充當(dāng)v-if的else-if塊，可以鏈式的使用多次物独⊥嗔颍可以更加方便的實現(xiàn)switch語句。

<div v-if="type``='A'">
    A
</div>
<div v-if="type``='B'">
    B
</div>
<div v-if="type``='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根據(jù)條件展示元素挡篓。和v-if不同的是婉陷，如果v-if的值是false，則這個元素被銷毀官研，不在dom中秽澳。但是v-show的元素會始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性戏羽。

注意：v-if有更高的切換開銷 v-show有更高的初始渲染開銷担神。因此，如果要非常頻繁的切換始花，則使用v-show較好妄讯；如果在運行時條件不太可能改變孩锡，則v-if較好

特別提醒

v-show需要放到一個真實的dom上押赊，不能放在template上面

1.4 循環(huán)指令：

v-for 遍歷數(shù)組

 <p v-for="(value,index) in links">{{value}}</p>

注意:在使用v-for過程中疼约，要綁定唯一的key，key盡量不要綁定index蹦锋，如果有id盡量綁定id

<p v-for="(value,index) in links" :key="index">{{value}}</p>

特別提醒

建議不要在與v-for相同的元素上使用v-if炕置。因為v-for指令的優(yōu)先級高于v-if當(dāng)它們處于同一節(jié)點荣挨。v-for 的優(yōu)先級比v-if 更高，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中讹俊。

1.5 兩個特殊的屬性：class style

class
- :class="數(shù)據(jù)"
- :class="三元運算符"
- :class="{類名:boolean}"
- :class="{類名1:boolean,類名2:boolean}"
- 類名中有-，需要使用引號包起來
- :class="['類名']"

<style>
    .abc{color: red;}
    .def{background-color: blue;}
    .g-h{color: yellow;}
</style>

<div id="app">
    <p class="abc">這是一個p標簽</p>
    <p :class="className">這是一個p標簽</p>
    <!-- ? :  三元運算符 -->
    <p :class="isPass ? className : ''">這是一個p標簽</p>
    <p :class="{abc:true}">這是一個p標簽</p>
    <p :class="{abc:isPass}">這是一個p標簽</p>
    <p :class="{abc:isPass,def:true}">這是一個p標簽</p>
    <p :class="{'g-h':true}">這是一個p標簽</p>
    <p :class="['abc','def']">這是一個p標簽</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            name:"wangcai",
            className:"abc",
            isPass:true,
        }
    })    
</script>

style的用法

<div id="app">
    <p :style="myStyle">這是一個p標簽</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            myStyle:{color:'red',backgroundColor:'blue'}
        }
    })    
</script>

2. vue 中掛載的屬性及方法

2.1 el

el指定app管理的邊界

面試題

如何通過$el獲取到更新后的dom元素煌抒？答：在下一下事件環(huán)中得到更新后dom元素

2.2 data

數(shù)據(jù)模型

2.3 methods

2.4 computed

計算屬性,依賴于data中的數(shù)據(jù)

計算屬性和方法的區(qū)別：

1仍劈，它們兩個本質(zhì)都是函數(shù)
2，用的時候寡壮，方法需要調(diào)用贩疙，計算屬性是當(dāng)成數(shù)據(jù)來使用
3，方法沒有緩存况既，計算屬性有緩存

2.5 filters

過濾器

過濾器的簡單使用：

2.6 components

組件：三部曲

定義組件

注冊組件

使用組件

組件的簡單使用：

2.7 鉤子函數(shù)

生命周期方法

2.8 $watch

$watch可以監(jiān)控Data中的數(shù)據(jù),通過$watch得到值这溅，肯定是更新后的值使用

vm.$watch( "name", function(newValue,oldValue){ } )

2.9 $nextTick()

vue中的$nextTick主要涉及到vue中DOM的異步更新 nextTick應(yīng)用場景及原因

在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中

原因：在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞棒仍，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調(diào)函數(shù)中悲靴。與之對應(yīng)的就是mounted()鉤子函數(shù)，因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成莫其，此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題癞尚。

在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時候乱陡，這個操作都應(yīng)該放進Vue.nextTick()的回調(diào)函數(shù)中浇揩。

Vue的官方文檔中詳細解釋

Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化憨颠，Vue 將開啟一個隊列胳徽，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā)爽彤，只會被推入到隊列中一次养盗。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后适篙，在下一個的事件循環(huán)“tick”中爪瓜，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel匙瘪，如果執(zhí)行環(huán)境不支持铆铆，會采用 setTimeout(fn, 0)代替蝶缀。

例如，當(dāng)你設(shè)置vm.someData = 'new value'薄货，該組件不會立即重新渲染翁都。當(dāng)刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個“tick”更新谅猾。多數(shù)情況我們不需要關(guān)心這個過程柄慰，但是如果你想在 DOM 狀態(tài)更新后做點什么，這就可能會有些棘手税娜。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅(qū)動”的方式思考坐搔，避免直接接觸 DOM，但是有時我們確實要這么做敬矩。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM 概行，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback)。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用弧岳。

2.10 $set

$set可以給data中動態(tài)地添加一個數(shù)據(jù)凳忙，前提是只能給對象中添加數(shù)據(jù)

示例

3. 事件模型

事件三要素： 事件源，事件類型禽炬，監(jiān)聽器

語法：v-on: 處理事件或 @處理事件

3.1 事件類型

鼠標事件：
- click：單擊事件
- dblclick：雙擊事件
- mouseover：鼠標進入事件
- mouseout：鼠標移開事件
- mouseenter：鼠標進入事件
- mouseleave：鼠標離開
- mousedown：鼠標按下
- mousemove：鼠標移動
- mouseup：鼠標抬起
鍵盤事件：
- keyup：鍵盤抬起
- keypress：按鍵并產(chǎn)生第一個字符時
- keydown：鍵盤按下
UI事件：
- scroll：滾動條事件
- resize：瀏覽器窗口改變
- load：文檔加載完畢
- unload：文檔未加載
焦點事件：
- focus：焦點事件
- blur：失去焦點
表單事件：
- change：數(shù)據(jù)發(fā)生改變時
- submit：提交

注意:mouseover / mouseout 與 mouseenter / mouseleave的區(qū)別

當(dāng)綁定事件的元素里面沒有子元素的時候涧卵，兩組觸發(fā)效果是一致的。

當(dāng)綁定事件的元素里面有子元素的時候腹尖，鼠標經(jīng)過綁定mouseover的當(dāng)前元素以及它里面的子元素的時候柳恐，都會觸發(fā)，而經(jīng)過綁定mouseenter的元素時热幔，只會在鼠標剛進入的時候觸發(fā)胎撤，當(dāng)進入其子元素的時候，是不會再觸發(fā)的了断凶。

總結(jié)：

不論鼠標指針穿過被選元素或其子元素伤提，都會觸發(fā) mouseover 事件。對應(yīng)mouseout
只有在鼠標指針穿過被選元素時认烁，才會觸發(fā) mouseenter 事件肿男。對應(yīng)mouseleave

3.2 事件對象

當(dāng)事件發(fā)生時，事件對象中保存了很多信息却嗡，如點擊的坐標舶沛。 $event 固定的名字

示例：

3.3 事件修飾符

stop：阻止冒泡
prevent：阻止默認事件
capture：冒泡改為捕獲
self：只處理發(fā)生在自己身上的事件，不理會冒泡或捕獲（把self放到誰的身上窗价，誰就不會觸發(fā)）
once：只執(zhí)行一次

示例：

3.4 鍵盤事件修飾符

keyCode 鍵盤修飾符

示例：

自定義按鍵名稱

// 自定義按鍵名稱
Vue.config.keyCodes.ent = 13;

// 頁面引用
<input type="text" @keyup.ent="enter_click"/>

4. 組件

4.1 全局組件

全局組件 : 定義全局組件如庭，在每個組件中都可以進行引用

語法：

Vue.component("組件名",{template:"組件內(nèi)容"})

示例：

4.2 局部組件：

組件：三部曲

定義組件

注冊組件

使用組件

示例：

5. 組件之間的數(shù)據(jù)傳遞

5.1 父傳子

父傳子 : 父中有數(shù)據(jù)，傳遞給子,

步驟：

1撼港，確定父中有數(shù)據(jù) 2坪它，在父組件的模板中通過屬性綁定把數(shù)據(jù)綁到子組件上 3骤竹，在子組件中定義props屬性，用來接收父傳遞過來的數(shù)據(jù) 4往毡，在子組件的模板就可以使用接收過來的數(shù)據(jù)了

示例:

屬性校驗：

總結(jié)：

父綁定數(shù)據(jù) 子接收數(shù)據(jù)

5.2 子傳父

過程：

在父組件模板中蒙揣，給子組件添加一個事件監(jiān)聽

在子組件中，某個時間通過this.$emit發(fā)出這個事件开瞭，發(fā)出事件的同時就可以攜帶數(shù)據(jù)

當(dāng)父中的方法觸發(fā)懒震，數(shù)據(jù)作用這個方法的第一個參數(shù)

示例：

6. vue腳手架

6.1 腳手架的安裝

安裝node

2. 安裝nrm

npm i nrm -g

切換安裝源
- 查看安裝源
  nrm ls
  
  切換安裝源 nrm use taobao
安裝vue的腳手架

npm i -g @vue/cli

創(chuàng)建vue項目

vue create myvue

進入項目

cd myvue

啟動項目

npm run serve

6.2 組件的使用

組件的定義

2. 組件的使用（main.js主接口）

7. router(路由)的使用

7.1 基本路由

html代碼


<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導(dǎo)航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

script代碼


// 1\. 定義 (路由) 組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2\. 定義路由
// 每個路由應(yīng)該映射一個組件嗤详。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器个扰，
// 或者，只是一個組件配置對象葱色。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3\. 創(chuàng)建 router 實例递宅，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當(dāng)于 routes: routes
})

// 4\. 創(chuàng)建和掛載根實例冬筒。
// 記得要通過 router 配置參數(shù)注入路由恐锣，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現(xiàn)在茅主，應(yīng)用已經(jīng)啟動了舞痰！

通過路由

我們可以在任何組件內(nèi)通過 this.$router 訪問路由器，也可以通過 his.$route 訪問當(dāng)前路由：

7.2 嵌套路由

嵌套路由的組件

router的注冊

7.3 動態(tài)路由

list列表需要動態(tài)跳轉(zhuǎn)的列表

router.js中對路由進行相關(guān)的配置

調(diào)轉(zhuǎn)頁面對數(shù)據(jù)進行獲取

7.4 編程路由

格式

router.push(location, onComplete?, onAbort?)

注意：

在 Vue 實例內(nèi)部诀姚，你可以通過 $router訪問路由實例响牛。因此你可以調(diào)用 this.$router.push。

示例：

7.5 重定向

示例：

8. axios的使用

安裝axios

npm install axios

引入axios

import axios from 'axios';

axios的簡單使用

9. vue中的生命周期方法

當(dāng)vue的實例創(chuàng)建時赫段，會伴隨一系列的方法運行呀打，稱作生命周期函數(shù)

9.1 beforeCreate()

這是第一個生命周期函數(shù)，表示實例完全被創(chuàng)建之前會被執(zhí)行
該方法執(zhí)行時糯笙，data和methods中的數(shù)據(jù)還沒有初始化

9.2 created()

該方法執(zhí)行時贬丛，data與mathods中的數(shù)據(jù)已經(jīng)初始化好了
要操作data,methods中的數(shù)據(jù)，最早只能在該處進行操作

9.3 beforeMount()

表示模板已經(jīng)在內(nèi)存中編輯完成给涕，但尚未將模板渲染到頁面中
該方法執(zhí)行時豺憔，頁面中的元素沒有真正替換過來，只是一些模板字符串

9.4 mounted()

表示內(nèi)存中的模板够庙，已經(jīng)掛載到頁面中恭应，用戶可以看到渲染后的頁面
如果通過某些插件操作頁面上的DOM節(jié)點，最早在該方法中執(zhí)行

9.5 beforeUpdate()

表示：當(dāng)前頁面沒有更新耘眨，但是數(shù)據(jù)已經(jīng)更新

9.6 updated()

表示：頁面和數(shù)據(jù)均已經(jīng)更新

9.7 beforeDestory()

實例從運行階段進入銷毀階段昼榛，此時實例中的東西仍處于可用狀態(tài)

9.destoryed()

所有組件完全被銷毀

10. vue中組件之間的傳值方式

10.1 props 與 $emit

父組件向子組件傳遞數(shù)據(jù)是通過prop傳遞的，子組件傳遞數(shù)據(jù)給父組件是通過$emit觸發(fā)事件來做到的剔难。

props 與 $emit的簡單使用

注意： 使用$emit 觸發(fā)父類綁定的方法時胆屿，觸發(fā)的名稱必須全部是小寫奥喻，若父類綁定使用到小駝峰，則在觸發(fā)時莺掠，全部變成小寫衫嵌，駝峰之間用-隔開

10.2 attrs和listeners

可以實現(xiàn)父組件與孫子組件之間的數(shù)據(jù)的傳遞 this.attrs如果子接受的數(shù)據(jù)沒有用到，把數(shù)據(jù)保存在attrs中

$attrs的簡單使用

特別提醒

父組件中所綁定的傳給父組件的屬性彻秆，都存放在$attrs中楔绞，若在子組件中不接收，直接進行綁定唇兑，可以使用：

v-bind="this.$attars"

$listenners的簡單使用

觸發(fā)父傳遞的click事件： @click="listeners.click()"觸發(fā)父傳遞多個事件：v-on="listeners"

10.3 parent與children

$parent 獲取父組件的實例酒朵，可以以此來調(diào)用父組件中的方法。
- 示例：
- this.$parent.cut();
$children 獲取所有的兒子, 可以以此來獲取子組件中的數(shù)據(jù)
- 示例：
- this.$children[0].msg = "張三"

特別提醒

parent: 獲取的是父親的實例children：獲取的是所有的子組件的實例
children：獲取的是所有子組件的實例

10.4 provice 與 inject的使用

10.5 refs的使用

ref 與refs是成對使用 ref 用于定義 $refs用戶獲取

10.6 自定義$dispatch

$dispatch 是掛載到Vue實例上的一個方法扎附，自動向上父類中查找觸發(fā)的方法蔫耽，如果該方法存在就觸發(fā)

示例

10.7 事件總線`eventBus`

原理

事件總線是，在vue的原型上留夜，掛載一個$eventBus事件(名字自己起)匙铡，通過$on進行綁定事件，先在事件中心中注冊一些事件在需要的位置就可以通過$emit去發(fā)布事件(觸發(fā)事件)

示例

10.8 數(shù)據(jù)傳遞的語法糖

在數(shù)據(jù)進行傳遞的時候碍粥，數(shù)據(jù)的傳遞與觸發(fā)的方法結(jié)合鳖眼，可以有比較簡便的語法糖，更加方便程序的開發(fā)嚼摩，但是與此同時也有一定的難度钦讳，不是很容易懂。下面就簡單的介紹幾種語法糖枕面。

10.8.1 `.sync`語法糖

.sync是@update:data的語法糖愿卒，data是vue中data中的數(shù)據(jù)

在給子類傳遞數(shù)據(jù)的時候，通過.sync對屬性進行限定潮秘，在子類中可以直接觸發(fā)update:數(shù)據(jù)名稱來修改父類中對應(yīng)的數(shù)據(jù)琼开，該方法可以省去父類中修改屬性的方法。

沒有使用.sync之前

傳遞數(shù)據(jù)枕荞，綁定屬性
修改數(shù)據(jù)值柜候，綁定修改的方法
觸發(fā)綁定的修改方法，調(diào)用修改方法

示例

使用.sync之后

傳遞數(shù)據(jù)买猖，綁定屬性.sync
觸發(fā)update:數(shù)據(jù)名改橘，直接修改數(shù)據(jù)

沒有簡化：簡化后：

示例

特別注意

update是規(guī)定的觸發(fā)的方法，update冒號后面跟的必須是父類中要修改的數(shù)據(jù)的數(shù)據(jù)名

10.8.2 `v-model`語法糖

v-model是:value和@input的語法糖,綁定的屬性必須是value

在給子類傳遞數(shù)據(jù)的時候玉控，直接使用v-model進行綁定飞主，在子類中，可以觸發(fā)input事件，來達到修改數(shù)據(jù)的目的

示例

特別注意

v-model 相當(dāng)于 :value + @input 相當(dāng)于上述方法的簡寫

11 vue中數(shù)據(jù)監(jiān)控的原理（數(shù)據(jù)劫持）

數(shù)據(jù)監(jiān)控： : 監(jiān)控數(shù)據(jù)的獲取與改變碌识，可以簡稱為數(shù)據(jù)劫持碾篡。

vue中data數(shù)據(jù)的監(jiān)控原理：

代碼如下：

// 數(shù)據(jù)的監(jiān)控，監(jiān)控數(shù)據(jù)的獲取與改變
// vue中data數(shù)據(jù)的監(jiān)控原理
obj = {
    name: "wangcai",
    age:18
};

function obServe(obj){
    if(typeof obj ``= "object"){
        for(key in obj){
            defineReactive(obj,key,obj[key]);
        }
    }
}

function defineReactive(obj,key,value){
    obServe(value);
    Object.defineProperty(obj,key,{
        get(){
            console.log("get...");
            return value;
        },
        set(val){
            console.log('set... :');
            obServe(val);
            value = val;
        }
    })
}

// defineProperty是數(shù)組是無效的
//解決方式如下：
// vue中封裝了數(shù)據(jù)的所有的方法筏餐，此處只做列舉
let arr = ["push","slice","shift","unshift"]
arr.forEach(method=>{
    let old = Array.prototype[method];
    Array.prototype[method] = function(value){
        console.log("set...")
        old.call(this,value)
    }
})
//-----------------------------------------------------------
// 測試數(shù)組
// observer(obj)
// obj.age = [1,2,3] // set..
// obj.age.push(4)  // 設(shè)置值  defineProperty對數(shù)據(jù)是無效的
//-----------------------------------------------------------------
// 測試簡單的對象
// obServe(obj)
// console.log(obj.name)    //get...
// obj.name = "hello"       // set...

// 測試嵌套的對象
// observer(obj)
// obj.name  // get...
// obj.name = "hello" // set...
// obj.age = { k:"kkkk" }  // set...
// obj.age.k = "mmmm"  // set...

12. 路由跳轉(zhuǎn)的傳值方式

在vue的路由跳轉(zhuǎn)中有兩種方式开泽，分別是問號模式，和冒號模式魁瞪，兩者不能進行混合使用穆律，

12.1 問號傳值方式

格式

傳值： <router-link to="/user/detail?id=1">用戶1</router-link> 獲取值： {{this.$route.query.id}}

注意：使用問號進行傳值的時候不需在router中特別設(shè)置路由

12.2 冒號傳值方式

格式

傳值： <router-link to="/user/detail/2">用戶2</router-link> 配置router路由文件 path:"detail/:id", 獲取值： {{this.$route.params.id}}

13. 路由的生命周期方法

13.1 全局路由守衛(wèi)

在全局中有三個路由守衛(wèi)，分別是beforeEach,beforeResolve,afterEach

beforeEach
- 路由正在開始發(fā)生改變的時候開始調(diào)用导俘。
- 格式：
- router.beforeEach((to, from, next) => {}
beforeResolve
- 所有組件中的路由守衛(wèi)解析完畢之后峦耘，被調(diào)用
- 格式：
- router.beforeResolve((to, from, next) => {}
afterEach
- 當(dāng)前的路由進入完畢之后，被調(diào)用
- 全局后置鉤子旅薄，不接受next函數(shù)
- 格式：
- router.afterEach((to, from) => {}

13.2 路由獨享的守衛(wèi)

beforeEnter
- 當(dāng)進入到路由的配置中辅髓，被調(diào)用

格式：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

13.3 組件內(nèi)的守衛(wèi)

在組件的內(nèi)部存在整合三個路由組件，分別是beforeRouteEnter少梁、beforeRouteUpdate 洛口、beforeRouteLeave

beforeRouteEnter
- 在進入組件之前，被調(diào)用凯沪，
- 此時的組件實例沒有被創(chuàng)建第焰，不能獲取組件實例this
- 示例：

beforeRouteUpdate
- 當(dāng)前路由發(fā)生改變的時候，
- 舉例來說著洼，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id樟遣，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候而叼，
- 可以訪問組件實例 this
- 格式：
- beforeRouteUpdate ((to, from, next) => {}
beforeRouteLeave
- 當(dāng)離開該組件的時候被調(diào)用身笤，
- 可以訪問組件實例 this
- 格式：
- beforeRouteLeave((to, from, next) => {}

13.4 總結(jié)

導(dǎo)航被觸發(fā)。 beforeEach
在失活的組件里調(diào)用離開守衛(wèi) beforeRouterLeave葵陵。
調(diào)用全局的 beforeEach 守衛(wèi)液荸。
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
在路由配置里調(diào)用 beforeEnter脱篙。
解析異步路由組件娇钱。
在被激活的組件里調(diào)用 beforeRouteEnter。
調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)绊困。
導(dǎo)航被確認文搂。
調(diào)用全局的 afterEach 鉤子。
觸發(fā) DOM 更新秤朗。
用創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)煤蹭。

14 vue.config的簡單配置

14.1 vue的簡單配置+前端代理解決跨域

源碼

// 基于node的 node不支持import語法
// 默認環(huán)境變量 NODE_ENV 生產(chǎn)環(huán)境   production development
let path = require('path');
module.exports = {

    // 配置開發(fā)環(huán)境(npm run serve)或生產(chǎn)環(huán)境(npm run build)url
    publicPath:process.env.NODE_ENV ``= 'production'? 'http://www.abcd.cn':'/',

    //打包后的資源放入的文件夾,默認未放入文件夾
    assetsDir:'asserts',

    //打包后生成的文件夾，默認是dist
    outputDir:'./dist',

    // 是否使用自己的內(nèi)部模板 一般不使用
    runtimeCompiler:false,

    // 打包后刪除生成的.map文件 不再使用sourcemap
    productionSourceMap:false,

    chainWebpack:config=>{
        // 可以獲取到webpack的配置 在增加一些自己的邏輯
        // 配置目錄別名 別名叫+
        config.resolve.alias.set('_c',path.resolve(__dirname,'src/components'));
        config.resolve.alias.set('_v',path.resolve(__dirname,'src/views'));
    },

    //webpack配置，到時候會合并到默認的webpack中硝皂。
    configureWebpack:{ // webpack-merge
        plugins:[],
        module:{}
    },

    // 開發(fā) 服務(wù)時使用  上線時不需要 解決跨域的問題
    devServer:{
        proxy:{
            '/api/getUser':{
                target:'http://localhost:3000',
                pathRewrite:{
                    '/api':''
                }
            }
        }
    },

    //第三方插件的配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname,'src/assets/common.less')
            ]
        }
    }
}

14.2 后端代理解決跨域問題

源碼

let express = require('express');
let app = express();

// 在后端配置常挚，讓所有的人都可以訪問我的api接口
app.use('*', function (req, res, next) {
    // 允許哪些客戶端來訪問我
    res.setHeader("Access-Control-Allow-Origin","*");
    // 允許可以添加哪些頭，然后來訪問我
    res.setHeader("Access-Control-Allow-Headers","*");
    // res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');

    // 允許哪些方法來訪問我
    res.setHeader("Access-Control-Allow-Methods","OPTIONS,PUT,DELETE");
    // res.header('Access-Control-Allow-Methods', '*');

    // 可以每隔半小時稽物，來發(fā)送一個options請求--試探請求
    res.setHeader("Access-Control-Max-Age","1800");

    // 請求的類型編碼
    res.header('Content-Type', 'application/json;charset=utf-8');

    // 允許客戶端攜帶憑證,處理cookie信息奄毡，如果有，并且不對每次請求都新開一個session
    res.setHeader("Access-Control-Allow-Credentials",true);
    next();
});

15. 路由元信息

路由的元信息一般可用于權(quán)限的校驗

定義路由的時候可以配置 meta 字段

配置meta字段贝或，該字段配置為對象信息

一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組吼过。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段咪奖。

示例：

</article>

vue講解基礎(chǔ)知識點總結(jié)

https://juejin.im/post/5d5375a0f265da03db076f59#heading-32

vue基礎(chǔ)知識點

1. vue中常見的指令

1.1 數(shù)據(jù)相關(guān)的指令

1.2屬性相關(guān)的指令：

1.3 條件指令：

1.4 循環(huán)指令：

1.5 兩個特殊的屬性：class style

2. vue 中掛載的屬性及方法

2.1 el

2.2 data

2.3 methods

2.4 computed

2.5 filters

2.6 components

2.7 鉤子函數(shù)

2.8 $watch

2.9 $nextTick()

2.10 $set

3. 事件模型

3.1 事件類型

3.2 事件對象

3.3 事件修飾符

3.4 鍵盤事件修飾符

4. 組件

4.1 全局組件

4.2 局部組件：

5. 組件之間的數(shù)據(jù)傳遞

5.1 父傳子

5.2 子傳父

6. vue腳手架

6.1 腳手架的安裝

6.2 組件的使用

7. router(路由)的使用

7.1 基本路由

7.2 嵌套路由

7.3 動態(tài)路由

7.4 編程路由

7.5 重定向

8. axios的使用

9. vue中的生命周期方法

9.1 beforeCreate()

9.2 created()

9.3 beforeMount()

9.4 mounted()

9.5 beforeUpdate()

9.6 updated()

9.7 beforeDestory()

9.destoryed()

10. vue中組件之間的傳值方式

10.1 props 與 $emit

10.2 attrs和listeners

10.3 parent與children

10.4 provice 與 inject的使用

10.5 refs的使用

10.6 自定義$dispatch

10.7 事件總線eventBus

10.8 數(shù)據(jù)傳遞的語法糖

10.8.1 .sync語法糖

10.8.2 v-model語法糖

11 vue中數(shù)據(jù)監(jiān)控的原理（數(shù)據(jù)劫持）

12. 路由跳轉(zhuǎn)的傳值方式

12.1 問號傳值方式

12.2 冒號傳值方式

13. 路由的生命周期方法

13.1 全局路由守衛(wèi)

13.2 路由獨享的守衛(wèi)

13.3 組件內(nèi)的守衛(wèi)

13.4 總結(jié)

14 vue.config的簡單配置

14.1 vue的簡單配置+前端代理解決跨域

14.2 后端代理解決跨域問題

15. 路由元信息

10.7 事件總線`eventBus`

10.8.1 `.sync`語法糖

10.8.2 `v-model`語法糖