1.插槽
1.1匿名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>52-Vue組件-匿名插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是插槽? 默認(rèn)情況下使用子組件時(shí)在子組件中編寫(xiě)的元素是不會(huì)被渲染的 如果子組件中有部分內(nèi)容是使用時(shí)才確定的, 那么我們就可以使用插槽 插槽就是在子組件中放一個(gè)"坑", 以后由父組件來(lái)"填" 1.什么是匿名插槽 沒(méi)有名字的插槽, 會(huì)利用使用時(shí)指定的內(nèi)容替換整個(gè)插槽 注意點(diǎn): 如果有多個(gè)匿名插槽, 每一個(gè)匿名插槽都會(huì)被指定的內(nèi)容替換 雖然寫(xiě)多個(gè)匿名插槽不會(huì)報(bào)錯(cuò), 但是在企業(yè)開(kāi)發(fā)中推薦只能有一個(gè)匿名插槽 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <!--需求: 在使用子組件的時(shí)候給子組件動(dòng)態(tài)的添加一些內(nèi)容--> <son> <!--注意點(diǎn): 默認(rèn)情況下是不能在使用子組件的時(shí)候, 給子組件動(dòng)態(tài)的添加內(nèi)容的 如果想在使用子組件的時(shí)候, 給子組件動(dòng)態(tài)的添加內(nèi)容, 那么就必須使用插槽--> <div>我是追加的內(nèi)容1</div> <div>我是追加的內(nèi)容2</div> <div>我是追加的內(nèi)容3</div> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <!--這里的slot標(biāo)簽就是插槽, 插槽其實(shí)就是一個(gè)坑 只要有了這個(gè)坑, 那么以后使用者就可以根據(jù)自己的需要來(lái)填這個(gè)坑--> <!--注意點(diǎn): 插槽可以指定默認(rèn)數(shù)據(jù), 如果使用者沒(méi)有填這個(gè)坑, 那么就會(huì)顯示默認(rèn)數(shù)據(jù) 如果使用者填了這個(gè)坑, 那么就會(huì)利用使用者填坑的內(nèi)容替換整個(gè)插槽--> <!--匿名插槽的特點(diǎn): 有多少個(gè)匿名插槽, 填充的數(shù)據(jù)就會(huì)被拷貝幾份,如下會(huì)將son中追加的內(nèi)容填寫(xiě)兩份 雖然我們可以指定多個(gè)匿名插槽, 但是在企業(yè)開(kāi)發(fā)中推薦只寫(xiě)一個(gè)匿名插槽--> <slot>我是默認(rèn)數(shù)據(jù)</slot> <slot>我是默認(rèn)數(shù)據(jù)</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.2 具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53-Vue組件-具名插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是具名插槽 默認(rèn)情況下有多少個(gè)匿名插槽, 我們填充的數(shù)據(jù)就會(huì)被拷貝多少份 這導(dǎo)致了所有插槽中填充的內(nèi)容都是一樣的 那么如果我們想給不同的插槽中填充不同的內(nèi)容怎么辦呢? 這個(gè)時(shí)候就可以使用具名插槽 2.具名插槽使用 通過(guò)插槽的name屬性給插槽指定名稱(chēng) 在使用時(shí)可以通過(guò)slot="name"方式, 指定當(dāng)前內(nèi)容用于替換哪一個(gè)插槽 注意點(diǎn): 如果沒(méi)有指定要替換哪個(gè)插槽中的內(nèi)容, 則不會(huì)被替換 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!--這里通過(guò)slot屬性告訴Vue,當(dāng)前的內(nèi)容是要填充到哪一個(gè)插槽中的--> <div slot="one">我是追加的內(nèi)容1</div> <div slot="one">我是追加的內(nèi)容11</div> <div slot="two">我是追加的內(nèi)容2</div> <div slot="two">我是追加的內(nèi)容22</div> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <!--可以在定義插槽的時(shí)候給插槽添加一個(gè)name屬性, 通過(guò)這個(gè)name屬性來(lái)指定插槽的名稱(chēng) 如通插槽指定了名稱(chēng), 那么我們就稱(chēng)之為具名插槽--> <!--注意點(diǎn): 默認(rèn)情況下填充的內(nèi)容是不會(huì)被填充到具名插槽中的, 只有給填充的內(nèi)容指定了要填充到哪一個(gè)具名插槽之后, 才會(huì)將填充的內(nèi)容填充到具名插槽中--> <slot name="one">我是默認(rèn)內(nèi)容</slot> <slot name="two">我是默認(rèn)內(nèi)容</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.3 v-slot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-Vue組件-v-slot指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-slot指令? v-slot指令是Vue2.6中用于替代slot屬性的一個(gè)指令 在Vue2.6之前, 我們通過(guò)slot屬性告訴Vue當(dāng)前內(nèi)容填充到哪一個(gè)具名插槽 從Vue2.6開(kāi)始, 我們通過(guò)v-slot指令告訴Vue當(dāng)前內(nèi)容填充到哪一個(gè)具名插槽 注意點(diǎn): v-slot指令只能用在template標(biāo)簽上 可以使用#號(hào)替代v-slot: --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!-- <template v-slot:one> <div>我是追加的內(nèi)容1</div> <div>我是追加的內(nèi)容11</div> </template> <template v-slot:two> <div>我是追加的內(nèi)容2</div> <div>我是追加的內(nèi)容22</div> </template> --> <!--v-bind: : v-on: @--> <template #one> <div>我是追加的內(nèi)容1</div> <div>我是追加的內(nèi)容11</div> </template> <template #two> <div>我是追加的內(nèi)容2</div> <div>我是追加的內(nèi)容22</div> </template> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <slot name="one">我是one默認(rèn)內(nèi)容</slot> <slot name="two">我是two默認(rèn)內(nèi)容</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.4 作用域插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>55-Vue組件-作用域插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是作用域插槽 作用域插槽就是帶數(shù)據(jù)的插槽, 就是讓父組件在填充子組件插槽內(nèi)容時(shí)也能使用子組件的數(shù)據(jù) 2.如何使用作用域插槽 2.1在slot中通過(guò) v-bind:數(shù)據(jù)名稱(chēng)="數(shù)據(jù)名稱(chēng)" 方式暴露數(shù)據(jù) 2.2在父組件中通過(guò) <template slot-scope="作用域名稱(chēng)"> 接收數(shù)據(jù) 2.3在父組件的<template></template>中通過(guò) 作用域名稱(chēng).數(shù)據(jù)名稱(chēng) 方式使用數(shù)據(jù) 3.通過(guò)v-slot來(lái)使用作用域插槽 在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。 它取代了 slot 和 slot-scope 也就是說(shuō)我們除了可以不僅可以通過(guò)v-slot指令告訴Vue內(nèi)容要填充到哪一個(gè)具名插槽中 還可以通過(guò)v-slot指令告訴Vue如何接收作用域插槽暴露的數(shù)據(jù) v-slot:插槽名稱(chēng)="作用域名稱(chēng)" --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!-- 1.使用slot-scope來(lái)接收數(shù)據(jù) slot-scope="abc"作用: 接收子組件插槽暴露的數(shù)據(jù) 作用域插槽的應(yīng)用場(chǎng)景: 子組件提供數(shù)據(jù), 父組件決定如何渲染 --> <template slot-scope="abc"> <li v-for="(name, index) in abc.names">{{name}}</li> </template> <!-- 2.使用v-slot來(lái)接收數(shù)據(jù) 作用域插槽的應(yīng)用場(chǎng)景: 子組件提供數(shù)據(jù), 父組件決定如何渲染 --> <template #one="abc"> <li v-for="(name, index) in abc.names">{{name}}</li> </template> </son> </div> </template> <template id="son"> <div> <div>我是頭部 {{names}}</div> <!-- v-bind:names="names"作用: 將當(dāng)前子組件的names數(shù)據(jù)暴露給父組件 --> <slot v-bind:names="names">我是默認(rèn)內(nèi)容 {{names}}</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", data:function () { return { names: ["zs", "ls", "ww", "zl"] } } } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>
2.Vuex--共享數(shù)據(jù)
2.1 傳統(tǒng)傳遞數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>57-Vuex-基本使用</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是Vuex? vuex 是 Vue 配套的 公共數(shù)據(jù)管理工具，它可以把一些共享的數(shù)據(jù)，保存到 vuex 中， 方便整個(gè)程序中的任何組件直接獲取或修改我們的公共數(shù)據(jù) 注意點(diǎn): 只有需要共享的才放到vuex上, 不需要共享的數(shù)據(jù)依然放到組件自身的data上 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son1 @parentchange="change"></son1> <son2 :parentnum="num"></son2> </div> </template> <template id="son1"> <div> <!--需求: 在第一個(gè)子組件中添加兩個(gè)按鈕和一個(gè)輸入框, 要求通過(guò)按鈕控制輸入框中的數(shù)據(jù)+1和-1--> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="count"> </div> </template> <template id="son2"> <div> <!--需求: 在第二個(gè)子組件中展示第一個(gè)子組件中的數(shù)據(jù)--> <!-- 注意點(diǎn): 1.如果想要在子組件中使用父組件中的數(shù)據(jù), 那么必須通過(guò)父組件傳遞 2.如果想要在子組件中使用祖先組件中的數(shù)據(jù), 那么就必須一層一層的傳遞 3.兄弟組件之間不能直接傳遞數(shù)據(jù), 如果兄弟組件之間想要傳遞數(shù)據(jù), 那么就必須借助父組件 --> <!-- 注意點(diǎn): 雖然通過(guò)借助父組件能夠?qū)崿F(xiàn)兄弟組件之間的數(shù)據(jù)傳遞, 但是這種方式非常的復(fù)雜, 非常的不推薦 那么當(dāng)前在企業(yè)開(kāi)發(fā)中我們遇到了兩個(gè)問(wèn)題: 1.如果想要在子組件中使用祖先組件中的數(shù)據(jù), 那么就必須一層一層的傳遞(非常麻煩) 2.兄弟組件之間不能直接傳遞數(shù)據(jù), 如果兄弟組件之間想要傳遞數(shù)據(jù), 那么就必須借助父組件(非常麻煩) 解決方案: 使用Vuex --> <p>{{parentnum}}</p> </div> </template> <script> // 爸爸組件 Vue.component("father", { template: "#father", data: function(){ return { num: 0 } }, methods: { change(newCount){ this.num = newCount; } }, // 兒子組件 components: { "son1": { template: "#son1", data: function () { return { count: 0 } }, methods: { add(){ /* 如何實(shí)現(xiàn)兒子中的數(shù)據(jù)和父親中的數(shù)據(jù)同步 1.父親給兒子傳遞一個(gè)方法 2.在兒子中修改數(shù)據(jù) 3.兒子中修改完數(shù)據(jù), 調(diào)用父親傳遞過(guò)來(lái)的方法, 并且將修改之后的數(shù)據(jù)傳遞給父親的方法 4.在父親的方法中保存最新的數(shù)據(jù) * */ this.count = this.count + 1; this.$emit("parentchange", this.count); }, sub(){ this.count = this.count - 1; this.$emit("parentchange", this.count); } } }, "son2": { template: "#son2", props: ["parentnum"] } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { } }); </script> </body> </html>2.2 通過(guò)Vuex來(lái)共享數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>58-Vuex-共享數(shù)據(jù)</title> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vuex--> <!--注意點(diǎn): 在導(dǎo)入Vuex之前必須先導(dǎo)入Vue--> <script src="js/vuex.js"></script> </head> <body> <!-- 1.當(dāng)前在企業(yè)開(kāi)發(fā)中我們遇到了兩個(gè)問(wèn)題: 1.如果想要在子組件中使用祖先組件中的數(shù)據(jù), 那么就必須一層一層的傳遞(非常麻煩) 2.兄弟組件之間不能直接傳遞數(shù)據(jù), 如果兄弟組件之間想要傳遞數(shù)據(jù), 那么就必須借助父組件(非常麻煩) 解決方案: 使用Vuex 注意點(diǎn): 必須在引入Vue之后再引入Vuex 只有需要共享的才放到vuex上, 不需要共享的數(shù)據(jù)依然放到組件自身的data上 --> <!--這里就是MVVM中的View--> <div id="app"> <grandfather></grandfather> </div> <template id="grandfather"> <div> <p>{{this.$store.state.msg}}</p> <father></father> </div> </template> <template id="father"> <div> <!--4.在使用Vuex中保存的共享數(shù)據(jù)的時(shí)候, 必須通過(guò)如下的格式來(lái)使用--> <p>{{this.$store.state.msg}}</p> <son></son> </div> </template> <template id="son"> <div> <p>{{this.$store.state.msg}}</p> </div> </template> <script> // 2.創(chuàng)建Vuex對(duì)象 const store = new Vuex.Store({ // 這里的state就相當(dāng)于組件中的data, 就是專(zhuān)門(mén)用于保存共享數(shù)據(jù)的 state: { msg: "twc" }, }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { "grandfather":{ template:"#grandfather", // 3.在祖先組件中添加store的key保存Vuex對(duì)象 // 只要祖先組件中保存了Vuex對(duì)象 , 那么祖先組件和所有的后代組件就可以使用Vuex中保存的共享 數(shù)據(jù)了 store:store, components:{ "father":{ template:"#father", components: { "son": { template: "#son", } } } } } }, }); </script> </body> </html>2.3 修改Vuex共享數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>59-Vuex-修改共享數(shù)據(jù)</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son1></son1> <son2></son2> </div> </template> <template id="son1"> <div> <!--需求: 在第一個(gè)子組件中添加兩個(gè)按鈕和一個(gè)輸入框, 要求通過(guò)按鈕控制輸入框中的數(shù)據(jù)+1和-1--> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="this.$store.state.count"> </div> </template> <template id="son2"> <div> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="this.$store.state.count"> </div> </template> <script> const store = new Vuex.Store({ // state: 用于保存共享數(shù)據(jù) state: { count: 0 }, // mutations: 用于保存修改共享數(shù)據(jù)的方法 mutations: { // 注意點(diǎn): 在執(zhí)行mutations中定義的方法的時(shí)候, 系統(tǒng)會(huì)自動(dòng)給這些方法傳遞一個(gè)state參數(shù) // state中就保存了共享的數(shù)據(jù) mAdd(state){ state.count = state.count + 1; }, mSub(state){ state.count = state.count - 1; } } }); // 爸爸組件 Vue.component("father", { template: "#father", store: store, // 兒子組件 components: { "son1": { template: "#son1", methods: { add(){ // 注意點(diǎn): 在Vuex中不推薦直接修改共享數(shù)據(jù) //我們可以通過(guò)this.$store.commit("方法名稱(chēng)")來(lái)調(diào)用mutation中的方法 this.$store.commit("mAdd"); }, sub(){ this.$store.commit("mSub"); } } }, "son2": { template: "#son2", methods: { add(){ // 注意點(diǎn): 在Vuex中不推薦直接修改共享數(shù)據(jù) // 如果多個(gè)組件都修改了共享的數(shù)據(jù), 那么后期數(shù)據(jù)發(fā)生了錯(cuò)誤, 我們?nèi)绻枰フ{(diào)試錯(cuò)誤 // 就需要把每一個(gè)修改了共享數(shù)據(jù)的組件都檢查一遍, 這樣非常低效, 非常的不利于我們?nèi)ゾS護(hù) // this.$store.state.count = this.$store.state.count + 1;(不行) this.$store.commit("mAdd"); }, sub(){ // this.$store.state.count = this.$store.state.count - 1; this.$store.commit("mSub"); } } } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { } }); </script> </body> </html>2.4 Vuex中的getter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>60-Vuex-getters</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <!-- 1.什么是Vuex的getters? Vuex的getters屬性就和組件的計(jì)算屬性一樣, 會(huì)將數(shù)據(jù)緩存起來(lái), 只有數(shù)據(jù)發(fā)生變化才會(huì)重新計(jì)算 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <!-- {{this.$store.state.msg}} "www.it666.com"--> <!-- {{this.$store.state.msg}} "www.it666.com"--> <!-- {{this.$store.state.msg}} "www.it666.com"--> {{this.$store.getters.formart}} {{this.$store.getters.formart}} {{this.$store.getters.formart}} </div> </template> <script> const store = new Vuex.Store({ // state: 用于保存共享數(shù)據(jù) state: { msg: "知播漁" }, // mutations: 用于保存修改共享數(shù)據(jù)的方法 mutations: { }, getters: { formart(state){ console.log("getters方法被執(zhí)行了"); return state.msg + "www.it666.com" } } }); // 爸爸組件 Vue.component("father", { template: "#father", store: store, }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { } }); </script> </body> </html>
3.VueRouter
3.1 基本使用(通過(guò)a標(biāo)簽設(shè)置hash)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>61-VueRouter-基本使用</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vue Router--> <!--注意點(diǎn): 必須先導(dǎo)入Vue之后再導(dǎo)入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是Vue Router? Vue Router和v-if/v-show一樣, 是用來(lái)切換組件的顯示的 v-if/v-show是標(biāo)記來(lái)切換(true/false) Vue Router用哈希來(lái)切換(#/xxx) 比v-if/v-show強(qiáng)大的是Vue Router不僅僅能夠切換組件的顯示, 還能夠在切換的時(shí)候傳遞參數(shù) 2.Vue Router使用 2.1導(dǎo)入Vue Router 2.2定義路由規(guī)則 2.3根據(jù)路由規(guī)則創(chuàng)建路由對(duì)象 2.4將路徑對(duì)象掛載到Vue實(shí)例中 2.5修改URL哈希值 2.6通過(guò)<router-view>渲染匹配的組件 --> <!--這里就是MVVM中的View--> <div id="app"> <a href="#/one">切換到第一個(gè)界面</a> <a href="#/two">切換到第二個(gè)界面</a> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個(gè)界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個(gè)界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one" }; const two = { template: "#two" }; // 2.定義切換的規(guī)則(定義路由規(guī)則) const routes = [ // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則 { path: '/one1', component: one }, { path: '/two', component: two } ]; // 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象 const router = new VueRouter({ routes: routes }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上 router: router, // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { one: one, two: two } }); </script> </body> </html>3.2 router-link設(shè)置hash
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>62-VueRouter-基本使用</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } /*.router-link-active{*/ /* background: red;*/ /*}*/ .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vue Router--> <!--注意點(diǎn): 必須先導(dǎo)入Vue之后再導(dǎo)入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是router-link? 通過(guò)a標(biāo)簽確實(shí)能設(shè)置URL的hash,但是這種方式并不專(zhuān)業(yè) 在Vue Router中提供了一個(gè)專(zhuān)門(mén)用于設(shè)置hash的標(biāo)簽 router-link 2.router-link特點(diǎn) 默認(rèn)情況下Vue會(huì)將router-link渲染成a標(biāo)簽, 但是我們可以通過(guò)tag來(lái)指定到底渲染成什么 3.給router-link設(shè)置選中樣式 默認(rèn)情況下我們可以通過(guò)重寫(xiě)router-link-active類(lèi)名來(lái)實(shí)現(xiàn)設(shè)置選中樣式 但是我們也可以通過(guò)linkActiveClass來(lái)指定選中樣式 4.重定向路由 { path: '被重定向值', redirect: '重定向之后的值' } --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <a href="#/one">切換到第一個(gè)界面</a> <a href="#/two">切換到第二個(gè)界面</a>--> <!-- 如果是通過(guò)router-link來(lái)設(shè)置URL的HASH值, 那么不用寫(xiě)#, 那么是通過(guò)to屬性來(lái)設(shè)置HASH值 --> <!-- 默認(rèn)情況下Vue在渲染router-link的時(shí)候, 是通過(guò)a標(biāo)簽來(lái)渲染的 如果在企業(yè)開(kāi)發(fā)中不想使用a標(biāo)簽來(lái)渲染, 那么可以通過(guò)tag屬性來(lái)告訴vue通過(guò)什么標(biāo)簽來(lái)渲染 --> <router-link to="/one" tag="div">切換到第一個(gè)界面</router-link> <router-link to="/two" tag="div">切換到第二個(gè)界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個(gè)界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個(gè)界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one" }; const two = { template: "#two" }; // 2.定義切換的規(guī)則(定義路由規(guī)則) const routes = [ // 重定向路由 //{ path: '/', redirect: '/two' }, // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則 { path: '/one', component: one }, { path: '/two', component: two } ]; // 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象 const router = new VueRouter({ routes: routes, // 指定導(dǎo)航激活狀態(tài)樣式類(lèi)名 linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上 router: router, // 專(zhuān)門(mén)用于定義局部組件的 components: { //one: one, //two: two } }); </script> </body> </html>3.3 傳遞參數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>63-VueRouter-參數(shù)傳遞</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } /*.router-link-active{*/ /* background: red;*/ /*}*/ .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.Vue Router傳遞參數(shù) 只要將Vue Router掛載到了Vue實(shí)例對(duì)象上, 我們就可以通過(guò)vue.$route拿到路由對(duì)象 只要能拿到路由對(duì)象, 就可以通過(guò)路由對(duì)象拿到傳遞的參數(shù) 方式一: 通過(guò)URL參數(shù)參數(shù)(?key=value&key=value), 通過(guò)this.$route.query獲取 方式二: 通過(guò)占位符傳遞(路由規(guī)則中/:key/:key, 路徑中/value/value), 通過(guò)this.$route.params獲取 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- 第一種傳遞參數(shù)的方式: 通過(guò)URL參數(shù)的方式傳遞 在指定HASH的時(shí)候, 通過(guò)?key=value&key=value的方式傳遞 在傳遞的組件的生命周期方法中通過(guò) this.$route.query的方式來(lái)獲取 --> <router-link to="/one?name=lnj&age=33" tag="button">切換到第一個(gè)界面</router-link> <!-- 第二種傳遞參數(shù)的方式: 通過(guò)路由規(guī)則中的占位符傳遞 在指定路由規(guī)則的時(shí)候通過(guò)/:key/:key的方式來(lái)指定占位符 在指定HASH的時(shí)候, 通過(guò)/value/value的方式來(lái)傳遞值 在傳遞的組件的生命周期方法中通過(guò) this.$route.params的方式來(lái)獲取 --> <router-link to="/two/zs/66" tag="button">切換到第二個(gè)界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個(gè)界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個(gè)界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one", created: function () { console.log(this.$route); console.log(this.$route.query.name); console.log(this.$route.query.age); } }; const two = { template: "#two", created: function () { console.log(this.$route); console.log(this.$route.params.name); console.log(this.$route.params.age); } }; // 2.定義切換的規(guī)則(定義路由規(guī)則) const routes = [ // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則 { path: '/one', component: one }, { path: '/two/:name/:age', component: two } ]; // 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', router:router, // 專(zhuān)門(mén)用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>3.4 嵌套路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>64-VueRouter-嵌套路由</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } .onesub1page, .onesub2page{ width: 100%; height: 300px; } .onesub1page{ background: orangered; } .onesub2page{ background: blueviolet; } .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是嵌套路由? 嵌套路由也稱(chēng)之為子路由, 就是在被切換的組件中又切換其它子組件 例如: 在one界面中又有兩個(gè)按鈕, 通過(guò)這兩個(gè)按鈕進(jìn)一步切換one中的內(nèi)容 --> <!--這里就是MVVM中的View--> <div id="app"> <router-link to="/one" tag="button">切換到第一個(gè)界面</router-link> <router-link to="/two" tag="button">切換到第二個(gè)界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個(gè)界面</p> <router-link to="/one/onesub1" tag="button">切換到第一個(gè)子界面</router-link> <router-link to="/one/onesub2" tag="button">切換到第二個(gè)子界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </template> <template id="onesub1"> <div class="onesub1page"> <p>我是第一個(gè)界面子界面1</p> </div> </template> <template id="onesub2"> <div class="onesub2page"> <p>我是第一個(gè)界面子界面2</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個(gè)界面</p> </div> </template> <script> // 1.定義組件 const onesub1 = { template: "#onesub1", }; const onesub2 = { template: "#onesub2", }; const one = { template: "#one", components:{ onesub1:onesub1, onesub2: onesub2 } }; const two = { template: "#two" }; // 2.定義切換的規(guī)則(定義路由規(guī)則) const routes = [ // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則 { path: '/one', component: one, children:[ { // 注意點(diǎn): 如果是嵌套路由(子路由), 那么不用寫(xiě)一級(jí)路徑的地址, 并且也不用寫(xiě)/ path: "onesub1", component: onesub1 }, { // 注意點(diǎn): 如果是嵌套路由(子路由), 那么不用寫(xiě)一級(jí)路徑的地址, 并且也不用寫(xiě)/ path: "onesub2", component: onesub2 } ] }, // { path: '/one/onesub1', component: onesub1 }, // { path: '/one/onesub2', component: onesub2 }, { path: '/two', component: two } ]; // 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上 router: router, // 專(zhuān)門(mén)用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>3.5 命名視圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>66-VueRouter-命名視圖</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 200px; height: 200px; } .onepage{ background: pink; } .twopage{ background: skyblue; } .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導(dǎo)入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是命名視圖? 命名視圖和前面講解的具名插槽很像, 都是讓不同的出口顯示不同的內(nèi)容 命名視圖就是當(dāng)路由地址被匹配的時(shí)候同時(shí)指定多個(gè)出口, 并且每個(gè)出口中顯示的內(nèi)容不同 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <!--和匿名插槽一樣, 如果指定了多個(gè)router-view, 那么當(dāng)路由地址被匹配之后, 多個(gè)router-view中顯示的內(nèi)容是一樣的--> <!--<router-view></router-view> <router-view></router-view>--> <!--和具名插槽一樣, 如果想同時(shí)顯示多個(gè)不同的組件, 那么可以給出口指定名稱(chēng) 1.在路由規(guī)則中給組件起名稱(chēng) 2.在出口中指定顯示哪個(gè)名稱(chēng)的組件--> <router-view name="name1"></router-view> <router-view name="name2"></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個(gè)界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個(gè)界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one", }; const two = { template: "#two" }; // 2.定義切換的規(guī)則(定義路由規(guī)則) const routes = [ // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則 { path: '/', components: { name1: one, name2: two } }, ]; // 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上 router: router, // 這里就是MVVM中的Model data: { }, // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù) methods: { }, // 專(zhuān)門(mén)用于定義計(jì)算屬性的 computed: { }, // 專(zhuān)門(mén)用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>
