當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue2.0知识点

發布時間：2024/1/8 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue2.0知识点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue2.0指令：

v-text指令：內容渲染指令，它會覆蓋元素內部原有的內容。

{{}}語法：插值表達式，專門用來解決v-text會覆蓋默認文本內容的問題，v-text和插值表達式只能渲染純文本內容，插值表達式不能用到屬性節點。

v-html指令：可以把包含HTML標簽的字符串渲染為頁面的HTML元素。

v-bind指令：屬性綁定指令，用于給元素的屬性動態綁定數據。它可以簡寫為 : ,在使用v-bind的時候，如果綁定的內容需要拼接，則字符串的外面應該包裹一對單引號。例如：<div :title=" 'box
'+ index ">這是一個 div</div>,? 其中box代表一個字符串，后面的index是一個變量，但是這個變量的值回到data里面去找。

v-on指令：事件綁定值令，用來為元素綁定事件，例如：v-on:click="add(n)",n是調用add()方法時傳遞的參數。在綁定事件的時候可以通過()來傳遞參數。v-on指令可以簡寫為@.在一個函數中，e.target就能拿到綁定這個函數的dom元素。Vue提供了一個內置對象$event,它就是原生dom的事件對象e。如果在方法中要修改data中的數據就要用到this來訪問。

v-model指令: 雙向數據綁定指令，用來輔助開發者在不操作DOM的前提下，快速獲取表單的數據。它和input，textarea，select等表單元素表單元素一起使用才有意義，并且使用v-model指令時里面不能有this,否則就不能實現雙向數據綁定了。

v-if和v-show條件渲染指令：條件渲染指令用來輔助開發者按需控制DOM的顯示與隱藏。v-show的原理是:動態為元素添加或移除display:none樣式，來實現元索的顯示和隱藏。如果要頻繁的切換元索的顯示狀態，用v-show性能會更好。v-if的原理是:每次動態創建或移除元索，實現元索的顯示和隱藏。如果剛進入頁面的時候,某些元索默認不需要被展示，而且后期這個元素很可能也不需要被展示出來，此時v-if性能更好。在實際開發中，絕大多數情況，不用考慮性能問題，直接使用v-if就好了! ! !
v-else-if指令：顧名思義，充當v-if的"else-if 塊" ,可以連續使用，注意: v-else-if 指令必須配合v-if指令一起使用，否則它將不會被識別!

v-for列表渲染指令：vue提供了v-for列表渲染指令,用來輔助開發者基于一個數組來循環渲染一個列表結構。v-for 指令需要使用item in items形式的特殊語法,其中:●items 是待循環的數組，●item 是被循環的每一項。要循環哪個dom元素就給哪個dom元素加v-for。官方建議:只要用到了v-for 指令，那么一定要綁定一個:key 屬性，而且盡量把id作為key的值。官方對key的值類型，是有要求的:字符串或數字類型，key的值是千萬不能重復的，否則會終端報錯

事件修飾符(加在事件綁定后面的)：

.prevent :阻止默認行為

.stop :阻止事件冒泡

v-model指令特有的修飾符：

.number 自動將用戶的輸入值轉為數值類型<input v-model.number="age" />

.trim 自動過濾用戶輸入的首尾空白字符<input v-model.trim="msg" />

按鍵修飾符：

@keyup.esc="函數名"或者@keyup.enter="函數名"等

私有過濾器：

過濾器(Filters) 是vue為開發者提供的功能，常用于文本的格式化。它本質上就是函數，但是過濾器必須要有返回值。過濾器可以用在兩個地方:插值表達式，和v-bind屬性綁定。過濾器函數必須被定義到data節點平級的filters:{}節點之下。注意:過濾器函數形參中的val, 永遠都是“管道符”前面的那個值。過濾器應該被添加在JavaScript表達式的尾部，由“管道符”進行調用，示例代碼如下:

全局過濾器：

如果全局過濾器和私有過濾器名字一致, 此時按照就近原則",調用的是“私有過濾器”?。

監聽器：

watch偵聽器允許開發者監視數據的變化,從而針對數據的變化做特定的操作。監聽器本質上是一個函數，定義在與data:{}平級的watch:{}節點下，要監聽誰就把誰作為方法名。
語法格式如下:
?

函數格式的監聽器無法在剛一進入頁面就觸發，如果偵聽的是一個對象，如果對象中的屬性發生了變化，不會觸發偵聽器。而對象格式的偵聽器，可以通過immediate選項，讓偵聽器在剛一進入頁面的時候就自動觸發! 用handler(){}來指定監聽器處理函數。

immediate默認值為false,改為true就會使監聽器在剛進入頁面的時候自動執行一次。

對象格式的監聽器可以通過deep選項,讓偵聽器深度監聽對象中每個屬性的變化!?

計算屬性：

計算屬性指的是通過一系列運算之后,最終得到一個屬性值。這個動態計算出來的屬性值可以被模板結構或methods方法使用。所有的計算屬性，都要定義到computed 節點之下，計算屬性在定義的時候，要定義成“方法格式”。動態屬性在用的時候就當作一個普通的屬性來用，示例代碼如下:

axios的基本用法:先導入axios庫文件。調用axios方法得到的返回值是Promise 對象。

axios在請求到數據之后，在真正的數據之外，套了一層殼。

{

config: {},
data: {真實的數據},
headers: {},
request: {},
status: xxx,
statusText: ''

}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? axios傳遞參數：get請求傳參用params:{},post請求傳參用data:{}

使用解構賦值，從axios 封裝的大對象中，把data 屬性解構出來
把解構出來的data 屬性，使用冒號進行重命名，一般都重命名為 { data: res}?

vue-cli的使用:

在終端下運行如下的命令，創建指定名稱的項目:vue create 項目的名稱

vue項目中src目錄的構成:assets文件夾:存放項目中用到的靜態資源文件，例如: css樣式表、圖片資源.components文件夾: 程序員封裝的、可復用的組件，都要放到components 目錄下。main.js是項目的入口文件。整個項目的運行，要先執行main.js。APP.vue是項目的根組件。

vue項目的運行流程：
在工程化的項目中，vue要做的事情很單純:通過main.js把App.vue里面定義的UI解構渲染到index.html的指定區域中。

Vue實例的$mount() 方法，作用和el屬性完全一樣!

什么是組件化開發?

組件化開發指的是:根據封裝的思想，把頁面上可重用的UI結構封裝為組件，從而方便項目的開發和維護。vue是一個支持組件化開發的前端框架。vue中規定:組件的后綴名是.vue。之前接觸到的App.vue文件本質上就是一個vue的組件。每個.vue組件都由3部分構成，分別是:template ->組件的模板結構，script ->組件的JavaScript行為，style ->組件的樣式。

在組件中， this就表示當前組件的實例對象。

<template></template>里面只能有一個根元素。

組件之間的父子關系：

組件在被封裝好之后，彼此之間是相互獨立的,不存在父子關系。在使用組件的時候，根據彼此的嵌套關系，形成了父子關系、兄弟關系。

使用組件的三個步驟：

@代表src這層路徑

通過components注冊的是私有子組件，例如:在組件 A的components節點下，注冊了組件F。
則組件F只能用在組件A中;不能被用在組件C中。

注冊全局組件：一次注冊到處使用

組件的props: props是組件的自定義屬性，在封裝通用組件的時候,合理地使用props可以極大的提高組件的復用性!

props是"自定義屬性”，允許使用者通過自定義屬性，為當前組件指定初始值
自定義屬性的名字，是封裝者自定義的(只要名稱合法即可)。

props里面的數據可以像data里面的數據一樣去渲染，不能直接修改props里面的值。vue規定:組件中封裝的自定義屬性是只讀的，程序員不能直接修改props的值。

可以把props里面的值轉存到data里面的數據身上，不去直接修改props里面的值：

數組格式的props無法定義默認值，只有對象格式的props才能定義默認值default。

在聲明自定義屬性時，可以通過type來定義屬性的值類型。示例代碼如下:

默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式沖突問題。

在<style></style>里面加上scoped。

?組件的生命周期
生命周期和生命周期函數
生命周期(Life Cycle)是指一個組件從創建->運行->銷毀的整個階段,強調的是一個時間段。

組件生命周期的第1個階段：組件創建之前->組件創建好了->組件渲染到頁面之前->組件渲染好了

beforeCreate(){}生命周期函數，組件的props/data/methods，尚未被創建，都處于不可用狀態.

created(){}生命周期函數，組件的props/data/methods已創建好，都處于可用的狀態。經常在這個函數里面發起AJAX請求，但是組件的模板結構尚未生成!

beforeMount(){}生命周期函數，將要把內存中編譯好的HTML結構渲染到瀏覽器中。此時瀏覽器中還沒有當前組件的DOM結構。

mounted(){}生命周期函數，已經把內存中的HTML結構，成功的渲染到了瀏覽器之中。此時瀏覽器中已然包含了當前組件的DOM結構。

父組件向子組件傳值：通過 props聲明自定義屬性傳遞過來的值

步驟：

1、先在父組件data中定義好要傳遞的數據，再通過v-bind(v-bind用于動態的綁定屬性)把父組件中需要傳遞的數據的形式傳遞給子組件，給子組件使用。

App.vue組件中(父組件)： <template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left :msg="message" :user="userinfo"></Left><Right></Right></div></div> </template><script> import Left from '@/components/Left.vue'; import Right from '@/components/Right.vue'; export default {data(){return{message:'hello 我是App.vue組件里面的message',userinfo:{name:'App.vue組件里的吳奕陽',age:18}}},components:{Left,Right},methods:{}} } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style>

2、在子組件內部通過props來獲取父組件傳遞過來的屬性名(props是單向向下綁定的，可以通過父組件中改變而同時改變下級的內容,但是反過來會報錯)，用插值表達式去使用即可。?

Left.vue子組件中： <template><div class="left-container"><h3>Left 組件</h3><p>父組件中message的值是：{{msg}}</p><p>父組件中userinfo的值是：{{user}}</p></div> </template><script> export default {props:['msg','user'],data(){ return{}},methods:{} } </script><style lang="less"> .left-container {padding: 0 20px 20px;background-color: orange;min-height: 250px;flex: 1; } </style>

?子組件向父組件傳值：????????子組件通過this.$emit()的方式將值傳遞給父組件

Right.vue子組件 <template><div class="right-container"><h3>Right 組件---{{count}}</h3><button @click="add">+1</button></div> </template><script> export default {data(){return{// 子組件自己的數據希望把值傳給父組件count:0,}},methods:{add(){this.count+=1,//子組件向父組件傳值:要用到自定義事件，分成3步來使用//第一步，調用$emit()方法//把count值傳給父組件用$emit()方法，第一個參數是自定義事件名(這個自定義事件名一旦確定//，那么在父組件中用@綁定自定義事件的時候，也應與其名稱一致)//，第二個參數是要傳遞的數據(它會被自動傳遞給父組件中事件處理函數的參數val)this.$emit('numChange',this.count);}} } </script><style lang="less"> .right-container {padding: 0 20px 20px;background-color: lightskyblue;min-height: 250px;flex: 1; } </style> App.vue父組件： <template><div class="app-container"><h1>App 根組件---count:{{countFromSun}}</h1><hr /><div class="box"><Right @numChange="getNewCount"></Right></div></div> </template><script> import Left from '@/components/Left.vue'; import Right from '@/components/Right.vue'; export default {data(){return{//countFromSun用于接收Right子組件傳過來的countcountFromSun:0}},components:{Right},methods:{// 第三步獲取子組件傳遞過來的是數據(通過val來接收),并轉存到父組件的data中getNewCount(val){console.log('numChange事件被觸發咯，val:'+val);this.countFromSun=val}} } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style>

兄弟組件之間的傳值：?在 vue2.x 中，兄弟組件之間數據共享的方案是 EventBus。組件與組件嵌套的比較深的話也可以用EvenBus來傳值。

EventBus 的使用步驟：

① 創建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象 ② 在數據發送方，調用 bus.$emit('事件名稱', 要發送的數據) 方法觸發自定義事件 ③ 在數據接收方，調用 bus.$on('事件名稱', 事件處理函數) 方法注冊一個自定義事件

eventBus.js// 兄弟組件之間傳值 // 導入vue構造函數 import Vue from 'vue' // 創建vue實例，并把它共享出去 export default new Vue(); Left組件（數據發送方） <template><div class="left-container"><h3>Left 組件</h3><button @click="send">把left組件里面的str傳到right組件</button></div> </template><script> // 1.兄弟組件之間的傳值，導入eventBus.js import bus from './eventBus.js' export default {data(){ return{str:'黑云壓城城欲摧(left組件str)',}},methods:{//2. 兄弟組件之間傳值(這里left組件是數據發送方，right是數據接收方),通過eventBus來發送數據給Right組件send(){//兄弟組件之間傳值,用$emit()函數，第一個參數是數據接收方要為bus去綁定的自定義事件名稱，第二個參數是需要傳遞的數據bus.$emit('share',this.str)}} } </script><style lang="less"> .left-container {padding: 0 20px 20px;background-color: orange;min-height: 250px;flex: 1; } </style> Right組件（數據接收方）： <template><div class="right-container"><p>{{msgFromLeft}}</p></div> </template><script> // 1.兄弟組件之間的傳值 import bus from './eventBus.js' export default {data(){return{//兄弟組件之間傳值msgFromLeft:''}},created(){//2.要在created(){}里面，為bus綁定自定義事件 $on()是用來綁定事件的，固定寫法bus.$on('share',(val)=>{console.log(val);console.log('在Right組件中定義的share被觸發了');this.msgFromLeft=val;})}} </script><style lang="less"> .right-container {padding: 0 20px 20px;background-color: lightskyblue;min-height: 250px;flex: 1; } </style>

vue2.0 ref引用dom元素??

ref 用來輔助開發者在不依賴于 jQuery 的情況下，獲取 DOM 元素或組件的引用。

每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的 DOM 元素或組件的引用。默認情況下，組件的 $refs 指向一個空對象。

<template><div class="app-container"> 要想直接拿到dom元素的引用，第一步：給那個元素加一個ref=""屬性，并起個名字。第二步通過this來拿 --><h1 ref="myh1">App 根組件</h1></div> </template><script> export default {data(){return{}},methods:{showThis(){console.log(this);//當前App組件的實例對象console.log(this.$refs.myh1);// 修改字體文字this.$refs.myh1.style.color='red'} },components:{Left } } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style>

在父組件中如果需要調子組件里面的方法就用 $refs對象

App.vue父組件 <template><div class="app-container"><h1 ref="myh1">App 根組件</h1><button @click="onReset">重置left組件的count值為0</button><div class="box"><Left ref="comLeft"></Left></div></div> </template><script> import Left from '@/components/Left.vue'export default {data(){return{}},methods:{//點擊按鈕，重置Left組件的count值onReset(){//this.$refs.comLeft.resetCount()this.$refs.comLeft.count=0},},components:{Left } } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style> Left.vue組件 <template><div class="left-container"><h3>Left 組件----{{count}}</h3><button @click="count+=1">+1</button><button @click="resetCount">重置count</button></div> </template><script> export default {data(){return{count:0}},methods:{resetCount(){this.count=0}} } </script><style lang="less"> .left-container {padding: 0 20px 20px;background-color: orange;min-height: 250px;flex: 1; } </style>

?this.$nextTick(cb)方法:把回調函數的里面的代碼，延遲到dom重新渲染完畢之后再去執行.通俗的理解是：等組件的DOM 更新完成之后，再執行 cb 回調函數。從而能保證 cb 回調函數可以操作到最新的 DOM 元素。

動態組件：? 動態組件指的是動態切換組件的顯示與隱藏。vue 提供了一個內置的 <components> 組件，專門用來實現動態組件的渲染。<components>標簽是VUE內置的，作用就是作為組件的占位符。is屬性的值就表示要渲染的組件的名字。

<keep-alive><components :is="組件名"></components></keep-alive>保證組件哪怕被隱藏了也不會被銷毀。

keep-alive標簽可以把內部的組件進行緩存，而不是銷毀組件。keep-alive標簽對應的生命周期函數：當組件被緩存時，會自動觸發組件的deactivated生命周期函數。當組件被激活時，會自動觸發組件的activated生命周期函數。當組件第一次被創建的時候，既會執行created生命周期函數，也會執行activated生命周期函數。當組件被激活的時候，只會觸發activated 生命周期函數，不再觸發created。因為組件沒有被重新創建。

如果在“聲明組件”的時候，沒有為組件指定name名稱(沒有給該組件的name屬性賦值)，則組件的名稱默認就是“注冊時候的名稱”。當為組件提供了name屬性值之后，組件的名稱，就是name屬性的值。組件的“注冊名稱”的主要應用場景是:以標簽的形式，把注冊好的組件，渲染和使用到頁面結構之中。組件聲明時候的“name” 名稱的主要應用場景:結合<keep-alive> 標簽實現組件緩存功能。

<template><div class="app-container"><h1>App 根組件</h1><hr /><button @click="comName='Left'">展示Left組件</button><button @click="comName='Right'">展示Right組件</button><div class="box"><keep-alive include="Left,Right"><components :is="comName"></components></keep-alive></div></div> </template><script> import Left from '@/components/Left.vue' import Right from '@/components/Right.vue' export default {data(){return {//comName表示要展示的組件的名字comName:'Left'}},components:{Left,Right} } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style>

插槽：

聲明一個插槽區域， Vue官方規定每一個<slot></slot>插槽都要有一個name名稱，如果省略了<slot></slot>的name屬性，則會有一個默認名稱叫做default,默認情況下，在使用組件的時候提供的內容都會被填充到名字為default的插槽之中。只要slot有自己的名字就叫具名插槽，名字叫default的插槽就叫默認插槽。在封裝組件時為預留的<slot></slot>提供屬性對應的值(這里是msg屬性)，這種用法叫做作用域插槽。想指名道姓的告訴Vue要把某個內容放到某個指定的插槽里面去可以用v-slot:xxx,xxx就是插槽的名字。v-slot指令的簡寫是#，v-slot指令不能直接用到元素身上，必須用到<template></template>標簽身上。<template></template> 這個標簽，它是一個虛擬的標簽，只起到包裹性質的作用，但是不會被渲染為任何實質性html元素。

App根組件 <template><div class="app-container"><h1>App 根組件</h1><Article><template #title><h3>一首詩</h3></template><template #content="{msg,user}"><p>床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉</p><p>{{msg}}</p><p>{{user.name}}</p></template><template #author><div>李白</div></template></Article><div class="box" style="display:none"><Left><template v-slot:default><p>這是在Left組件的內容區域使用的p標簽</p></template></Left></div></div> </template><script> import Left from '@/components/Left.vue' import Article from '@/components/Article.vue' export default {data(){return{color:'blue'}},components:{Left,Article}, } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style> <template><div class="article-container"><h3 v-colorchange="'pink'">Article.vue組件</h3><div class="header-box"><slot name="title"></slot></div><div class="content-box"><slot name="content" msg="hello vue" :user="userinfo"></slot></div><div class="footer-box"><slot name="author"></slot></div></div> </template><script> export default{//首字母要大寫name:'Article',data(){return{//用戶信息對象userinfo:{name:'zs',age:20}}} } </script><style scoped lang="less"> .article-container{>div {min-height: 150px;}.header-box{background-color: pink;}.content-box{background-color: lightblue;}.footer-box{background-color: lightsalmon;} } </style>

自定義指令：?

vue中的自定義指令分為兩類，分別是:私有自定義指令,全局自定義指令。

在每個vue組件中，可以在directives節點下聲明私有自定義指令。

<template><div class="app-container"><h1 v-color="color">App 根組件</h1><p v-color="'red'">自定義指令的學習</p><button @click="color='green'">改變color的顏色值</button><hr /></div> </template><script> import Left from '@/components/Left.vue' import Article from '@/components/Article.vue' export default {data(){return{color:'blue'}},components:{Left,},// 在每個 vue 組件中，可以在 directives 節點下聲明私有自定義指令。 directives:{}私有自定義指令節點directives:{// 定義名為color的自定義指令(在定義指令的時候不用加v-前綴,自定義指令名不能有大寫字母)，指向一個配置對象。當自定義指令color第一次被綁定到元素的時候，就會立即觸發自定義指令的方法，叫bind()方法，//bind()方法只會調用一次，當dom更新時bind()方法不會被觸發，它有個形參//叫el,el就代表當前指令所綁定到的那個dom元素對象。使用binding.value獲取指令綁定的值color:{bind(el,binding){console.log('你觸發了v-color的bind()方法');el.style.color=binding.valueconsole.log(binding);},//update(){}函數會在每一次dom更新時被調用update(el,binding){console.log('你觸發了v-color的update(){}方法');el.style.color=binding.valueconsole.log(binding);}}} } </script><style lang="less"> .app-container {padding: 1px 20px 20px;background-color: #efefef; } .box {display: flex; } </style>

全局自定義指令：需要定義在main.js里面

把axios掛載到Vue的原型上并配置請求根路徑:

在main.js文件里加一行代碼：Vue.prototype.XXX?= axios，以后在各組件中發起請求就不用導入

axios了，發起請求的方式如下：XXX可以自定義一般寫成$http

在main.js中全局配置axios 的請求根路徑：axios.defaults. baseURL='根路徑'? 配置完成之后就不用在每個get()里面寫完整的url路徑了。但是，把axios掛載到Vue 原型上，有一個缺點:不利于API 接口的復用!

前端路由的概念與原理：
SPA與前端路由：SPA指的是一個web網站只有唯一的一個HTML頁面，所有組件的展示與切換都在這唯一的一個頁面內完成。此時，不同組件之間的切換需要通過前端路由來實現。結論:在SPA項目中，不同功能之間的切換，要依賴于前端路由來完成!
什么是前端路由：通俗易懂的概念:Hash地址(url地址里面#往后的部分包括#)與組件之間的對應關系。

前端路由的工作方式:①用戶點擊了頁面上的路由鏈接(a鏈接)，②導致了URL地址欄中的Hash地址發生了變化.③前端路由監聽了到Hash地址的變化，④前端路由把當前Hash地址對應的組件渲染都瀏覽器中。path后面的#不用寫了。

什么是vue-router：
vue-router是vue.js官方給出的路由解決方案。它只能結合vue項目進行使用，能夠輕松的管理SPA項目中組件的切換。

vue-router安裝和配置的步驟：
①安裝vue-router包：命令：npm i vue-router@3.5.2 -S
②創建路由模塊：在src源代碼目錄下，新建router/index.js路由模塊，并初始化如下的代碼:

③在main.js里面導入并掛載路由模塊：

④聲明路由鏈接和占位符：只要在項目中安裝和配置了vue-router, 就可以使用router-view這個組件了，它的作用很單純:占位符，點擊a鏈接，就展示相應的組件，就在router-view組件的位置去展示該組件。先在router/index.js里面導入需要使用的組件。如圖：

?當安裝和配置了，vue- router后，就可以使用router-link 標簽，來替代普通的a鏈接了，router-link標簽有一個to屬性，它和a標簽里面的href屬性一樣。router-link路由鏈接里面的地址一定要和對應path里面的地址保持一致！

路由重定向指的是:用戶在訪問地址A的時候，強制用戶跳轉到地址C ,從而展示特定的組件頁面。
通過路由規則的redirect屬性，指定一個新的路由地址，可以很方便地設置路由的重定向：

嵌套路由：
通過路由實現組件的嵌套展示，叫做嵌套路由。通過children屬性聲明子路由規則。
?

演示子路由：?定義子路由規則：默認子路由:如果children 數組中，某個路由規則的path 值為空字符串，則這條路由規則，叫做“默認子路由”。有默認子路由的話一進來就會展示默認子路由對應的組件。

動態路由匹配：把Hash地址中可變的部分定義為參數項,從而提高路由規則的復用性。在vue-router中使用英文的冒號: 來定義路由的參數項。示例代碼如下:

this.$route.params.mid能拿到動態參數的值。在路由規則中params:true,可以為路由規則開啟props 傳參，也能方便的拿到動態參數的值。

注意1:在hash地址中，/ 后面的參數項，叫做“路徑參數”。
在路由“參數對象”中，需要使用this.$route. params來訪問路徑參數
注意2:在hash地址中，?后面的參數項，叫做“查詢參數”。
在路由“參數對象”中，需要使用this. $route.query來訪問查詢參數。

注意3:在this. $route中，path 只是路徑部分; fullPath 是完整的地址。

申明式導航(導航：點鏈接導致組件之間的切換)：在瀏覽器中，點擊鏈接實現導航的方式，叫做聲明式導航。例如:?普通網頁中點擊<a>鏈接、vue項目中點擊<router-link>都屬于聲明式導航。

編程式導航：在瀏覽器中，調用API方法實現導航的方式，叫做編程式導航。例如:
普通網頁中調用location.href跳轉到新頁面的方式，屬于編程式導航。

vue-router中的編程式導航API：vue-router提供了許多編程式導航的API,其中最常用的導航API分別是:①this.$router.push('hash 地址')，跳轉到指定hash地址，并增加一條歷史記錄。②this.$router.replace('hash 地址')，跳轉到指定的hash地址，并替換掉當前的歷史記錄。③this.$router.go(數值 n)，調用this. $router.go()方法，可以在瀏覽歷史中前進和后退。
在行內使用編程式導航跳轉的時候，this必須要省略，否則會報錯!

導航守衛：導航守衛可以控制路由的訪問權限。示意圖如下:

全局前置守衛：每次發生路由的導航跳轉時，都會觸發全局前置守衛。因此，在全局前置守衛中，程序員可以對每個路由進行，訪問權限的控制。? ? ? ? ? ? ? ? ? ? ? ? ? 全局前置守衛的回調函數中接收3個形參,格式為:? ? ? ? ? ? ? ? ? ? ? ? ?next函數的3種調用方式：當前用戶擁有后臺主頁的訪問權限，直接放行: next()
當前用戶沒有后臺主頁的訪問權限，強制其跳轉到登錄頁面: next('/login')
當前用戶沒有后臺主頁的訪問權限，不允許跳轉到后臺主頁: next(false)

安裝和配置Vant,官網：安裝命令：npm i vant@latest-v2

?

總結

以上是生活随笔為你收集整理的Vue2.0知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

知识点

上一篇： JAVA经典面试题（来源于互联网）
下一篇：全双工和半双工的区别？