推薦大家安裝的 VScode 中的 Vue 插件

Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace

Vetur Vetur - Visual Studio Marketplace

什么是 vue

構(gòu)建用戶界面

• 用 vue 往 html 頁(yè)面中填充數(shù)據(jù)，非常的方便

框架

• 框架是一套現(xiàn)成的解決方案，程序員只能遵守框架的規(guī)范，去編寫(xiě)自己的業(yè)務(wù)功能！

• 要學(xué)習(xí) vue，就是在學(xué)習(xí) vue 框架中規(guī)定的用法！

• vue 的指令、組件（是對(duì) UI 結(jié)構(gòu)的復(fù)用）、路由、Vuex、vue 組件庫(kù)

• 只有把上面老師羅列的內(nèi)容掌握以后，才有開(kāi)發(fā) vue 項(xiàng)目的能力！

vue 的兩個(gè)特性

數(shù)據(jù)驅(qū)動(dòng)視圖：

• 數(shù)據(jù)的變化會(huì)驅(qū)動(dòng)視圖自動(dòng)更新

• 好處：程序員只管把數(shù)據(jù)維護(hù)好，那么頁(yè)面結(jié)構(gòu)會(huì)被 vue 自動(dòng)渲染出來(lái)！

雙向數(shù)據(jù)綁定：

在網(wǎng)頁(yè)中，form 表單負(fù)責(zé)采集數(shù)據(jù)，Ajax 負(fù)責(zé)提交數(shù)據(jù)。

• js 數(shù)據(jù)的變化，會(huì)被自動(dòng)渲染到頁(yè)面上

• 頁(yè)面上表單采集的數(shù)據(jù)發(fā)生變化的時(shí)候，會(huì)被 vue 自動(dòng)獲取到，并更新到 js 數(shù)據(jù)中

注意：數(shù)據(jù)驅(qū)動(dòng)視圖和雙向數(shù)據(jù)綁定的底層原理是 MVVM（Mode 數(shù)據(jù)源、View 視圖、ViewModel 就是 vue 的實(shí)例）

vue 指令

1. 內(nèi)容渲染指令 (用來(lái)輔助開(kāi)發(fā)者渲染DOM元素的文本類容)

v-text 指令的缺點(diǎn)：會(huì)覆蓋元素內(nèi)部原有的內(nèi)容！

{{ }} 插值表達(dá)式：在實(shí)際開(kāi)發(fā)中用的最多，只是內(nèi)容的占位符，不會(huì)覆蓋原有的內(nèi)容！

v-html 指令的作用：可以把帶有標(biāo)簽的字符串，渲染成真正的 HTML 內(nèi)容！

2. 屬性綁定指令

注意：插值表達(dá)式只能用在元素的內(nèi)容節(jié)點(diǎn)中，不能用在元素的屬性節(jié)點(diǎn)中！

• 在 vue 中，可以使用 v-bind: 指令，為元素的屬性動(dòng)態(tài)綁定值；

• 簡(jiǎn)寫(xiě)是英文的 :

• 在使用 v-bind 屬性綁定期間，如果綁定內(nèi)容需要進(jìn)行動(dòng)態(tài)拼接，則字符串的外面應(yīng)該包裹單引號(hào)，例如：

  <div :title="'box' + index">這是一個(gè) div</div>

3. 事件綁定

v-on: 簡(jiǎn)寫(xiě)是 @

語(yǔ)法格式為：

<button @click="add"></button> ? methods: {add() {// 如果在方法中要修改 data 中的數(shù)據(jù)，可以通過(guò) this 訪問(wèn)到this.count += 1} }

$event 的應(yīng)用場(chǎng)景：如果默認(rèn)的事件對(duì)象 e 被覆蓋了，則可以手動(dòng)傳遞一個(gè) $event。例如：

<button @click="add(3, $event)"></button> ? methods: {add(n, e) {// 如果在方法中要修改 data 中的數(shù)據(jù)，可以通過(guò) this 訪問(wèn)到this.count += 1} }

事件修飾符：

• .prevent 阻止事件默認(rèn)行為

  <a @click.prevent="xxx">鏈接</a>

• .stop 阻止冒泡

  <button @click.stop="xxx">按鈕</button>

4. v-model 指令（雙向綁定指令）

input 輸入框

• type="radio"

• type="checkbox"

• type="xxxx"

textarea

select

v-model指令的修飾符

• .number 自動(dòng)將用戶的輸入值轉(zhuǎn)換為數(shù)值類型

  <input v-model.number="age" />

• .trim 自動(dòng)過(guò)濾用戶輸入的首尾空白字符

  <input v-model.trim="msg" />

• .lazy 在“ change ” 時(shí)而非“ input ” 時(shí)更新

  <input v-model.lazy="msg" />

5. 條件渲染指令

v-show 的原理是：動(dòng)態(tài)為元素添加或移除 display: none 樣式，來(lái)實(shí)現(xiàn)元素的顯示和隱藏

• 如果要頻繁的切換元素的顯示狀態(tài)，用 v-show 性能會(huì)更好

v-if 的原理是：每次動(dòng)態(tài)創(chuàng)建或移除元素，實(shí)現(xiàn)元素的顯示和隱藏

• 如果剛進(jìn)入頁(yè)面的時(shí)候，某些元素默認(rèn)不需要被展示，而且后期這個(gè)元素很可能也不需要被展示出來(lái)，此時(shí) v-if 性能更好

在實(shí)際開(kāi)發(fā)中，絕大多數(shù)情況，不用考慮性能問(wèn)題，直接使用 v-if 就好了！！！

v-if 指令在使用的時(shí)候，有兩種方式：

直接給定一個(gè)布爾值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

給 v-if 提供一個(gè)判斷條件，根據(jù)判斷的結(jié)果是 true 或 false，來(lái)控制元素的顯示和隱藏

<p v-if="type === 'A'">良好</p>

6.列表渲染指令

v-for指令需要使用 item in items 的形式的特殊語(yǔ)法

items是待循環(huán)的數(shù)組 item是被循環(huán)的每一項(xiàng)

data:{list:[{id:1,name:'zs'},{id:2,name:'ls'} ] } ? <ul><li v-for="item in list">姓名是:{{item.name}}</li> </ul>

v-for指令還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。 語(yǔ)法格式為(item,index)in items.

3.官方建議：只要用到了v-for指令，那么一定要綁定一個(gè)：key屬性，而且盡量把Id作為key的值

4.官方對(duì)于key的類型是有要求的：字符串或數(shù)字類型。 key值不能重復(fù)，必須具有唯一性

過(guò)濾器

過(guò)濾器的注意點(diǎn)

要定義到 filters 節(jié)點(diǎn)下，本質(zhì)是一個(gè)函數(shù)

在過(guò)濾器函數(shù)中，一定要有 return 值

在過(guò)濾器的形參中，可以獲取到“管道符”(|)前面待處理的那個(gè)值

如果全局過(guò)濾器和私有過(guò)濾器名字一致，此時(shí)按照“就近原則”，調(diào)用的是”私有過(guò)濾器“

watch 偵聽(tīng)器

偵聽(tīng)器的格式

方法格式的偵聽(tīng)器

• 缺點(diǎn)1：無(wú)法在剛進(jìn)入頁(yè)面的時(shí)候，自動(dòng)觸發(fā)！！！

• 缺點(diǎn)2：如果偵聽(tīng)的是一個(gè)對(duì)象，如果對(duì)象中的屬性發(fā)生了變化，不會(huì)觸發(fā)偵聽(tīng)器！！！

對(duì)象格式的偵聽(tīng)器

• 好處1：可以通過(guò) immediate 選項(xiàng)，讓偵聽(tīng)器自動(dòng)觸發(fā)！！！

• 好處2：可以通過(guò) deep 選項(xiàng)，讓偵聽(tīng)器深度監(jiān)聽(tīng)對(duì)象中每個(gè)屬性的變化！！！

watch偵聽(tīng)器允許開(kāi)發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對(duì)數(shù)據(jù)的變化做特定的操作

<div id="app"><input type="text" v-model="username"></div><script>const vm = new Vue({el: '#app',data: {username: 'admin'},// 所有的偵聽(tīng)器，都應(yīng)該被定義到 watch 節(jié)點(diǎn)下watch: {// 偵聽(tīng)器本質(zhì)上是一個(gè)函數(shù)，要監(jiān)視哪個(gè)數(shù)據(jù)的變化，就把數(shù)據(jù)名作為方法名即可// 新值在前，舊值在后username(newVal,oldVal) {console.log(newVal,oldVal)}}})</script>

計(jì)算屬性

定義到computed中

特點(diǎn)：

定義的時(shí)候，要被定義為“方法”

在使用計(jì)算屬性的時(shí)候，當(dāng)普通的屬性使用即可

好處：

實(shí)現(xiàn)了代碼的復(fù)用

只要計(jì)算屬性中依賴的數(shù)據(jù)源變化了，則計(jì)算屬性會(huì)自動(dòng)重新求值！

axios

axios 是一個(gè)專注于網(wǎng)絡(luò)請(qǐng)求的庫(kù)！

axios 的基本使用

發(fā)起 GET 請(qǐng)求：

axios({// 請(qǐng)求方式method: 'GET',// 請(qǐng)求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查詢參數(shù)params: {id: 1} }).then(function (result) {console.log(result) })

發(fā)起 POST 請(qǐng)求：

document.querySelector('#btnPost').addEventListener('click', async function () {// 如果調(diào)用某個(gè)方法的返回值是 Promise 實(shí)例，則前面可以添加 await！// await 只能用在被 async “修飾”的方法中const { data: res } = await axios({method: 'POST', url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}}) ?console.log(res) })

vue-cli 的使用

在終端下運(yùn)行如下的命令，創(chuàng)建指定名稱的項(xiàng)目：

vue cerate 項(xiàng)目的名稱

vue 項(xiàng)目中 src 目錄的構(gòu)成：

? assets 文件夾：存放項(xiàng)目中用到的靜態(tài)資源文件，例如：css 樣式表、圖片資源 components 文件夾：程序員封裝的、可復(fù)用的組件，都要放到 components 目錄下 main.js 是項(xiàng)目的入口文件。整個(gè)項(xiàng)目的運(yùn)行，要先執(zhí)行 main.js App.vue 是項(xiàng)目的根組件。

vue組件

---

1.介紹與使用

• 組件在被封裝好之后，彼此之間是相互獨(dú)立的，不存在父子關(guān)系。

• 在使用組件的時(shí)候，根據(jù)彼此的嵌套關(guān)系，形成父子關(guān)系，兄弟關(guān)系。

• 使用組件的三個(gè)步驟

• 使用import語(yǔ)法導(dǎo)入需要的組件

  import left from '@/components/left.vue'

• 使用components節(jié)點(diǎn)注冊(cè)組件 （通過(guò)components注冊(cè)的是私有組件）

  export default{compoments:{left} }

• 以標(biāo)簽形式使用剛才注冊(cè)的組件

  <div class="box"><left></left> </div>

2.注冊(cè)全局組件

在vue項(xiàng)目的 main.js 入口文件中，通過(guò) vue.components() 方法，可以注冊(cè)全局組件。如下

//導(dǎo)入需要被注冊(cè)的組件 import Count from '@/components/Count.vue'//參數(shù)1：字符串格式，表示組件的“注冊(cè)名稱” //參數(shù)2：需要被全局注冊(cè)的那個(gè)組件Vue.components('MyCount','Count')

3.組件中的props

• props是組件的自定義屬性，在封裝通用組件的時(shí)候，合理地使用props可以極大地提高組件的復(fù)用性！

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數(shù)據(jù)data(){return{}} }

• props中的數(shù)據(jù)，可以直接在模板結(jié)構(gòu)中使用

• props是只讀的，不能直接修改props的值,想要修改props的值，可以吧props的值轉(zhuǎn)存到data中(data中的數(shù)據(jù)都是可讀可寫(xiě)的！)

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數(shù)據(jù)data(){return{count:this.init}} }

• 在聲明自定義屬性時(shí)，可以通過(guò)default來(lái)定義屬性的默認(rèn)值。例如：

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認(rèn)值default:0}} }

4.props的type值類型

• 在聲明自定義屬性時(shí)，可以通過(guò)type來(lái)定義屬性的值類型

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認(rèn)值default:0,//如果傳遞過(guò)來(lái)的值不符合此類型，則會(huì)在終端報(bào)錯(cuò)type:Number}} }

5.required必填項(xiàng)

export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認(rèn)值default:0,//如果傳遞過(guò)來(lái)的值不符合此類型，則會(huì)在終端報(bào)錯(cuò)type:Number,//必填校驗(yàn)項(xiàng),如果不傳init 則終端報(bào)錯(cuò) required:true}} }

6.組件之間的樣式?jīng)_突問(wèn)題

默認(rèn)情況下，寫(xiě)在.vue組件中的樣式會(huì)全局生效,因此會(huì)造成多個(gè)組件之間的樣式?jīng)_突問(wèn)題.

根本原因：

單頁(yè)面應(yīng)用程序中，所有組件的DOM結(jié)構(gòu)，都是基于唯一的index.html頁(yè)面進(jìn)行呈現(xiàn)的

每個(gè)組件中的樣式，都會(huì)影響整個(gè)index.html頁(yè)面中的DOM元素

組件的生命周期

---

1.生命周期&生命周期函數(shù)

• 生命周期（Life Cycle）是指一個(gè)組件從創(chuàng)建->運(yùn)行->銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。

• 生命周期函數(shù)：是由Vue框架提供的內(nèi)置韓式，會(huì)伴隨著組件的生命周期，自動(dòng)按次序執(zhí)行。

• ?

  ?

• <template><div class="test-container"><h3 id="myh3">Test.vue 組件 --- {{ books.length }} 本圖書(shū)</h3><p id="pppp">message 的值是：{{ message }}</p><button @click="message += '~'">修改 message 的值</button></div> </template><script> export default {props: ["info"],data() {return {message: "hello vue.js",// 定義 books 數(shù)組，存儲(chǔ)的是所有圖書(shū)的列表數(shù)據(jù)。默認(rèn)為空數(shù)組！books: [],};},watch: {message(newVal) {console.log("監(jiān)視到了 message 的變化：" + newVal);},},methods: {show() {console.log("調(diào)用了 Test 組件的 show 方法！");},// 使用 Ajax 請(qǐng)求圖書(shū)列表的數(shù)據(jù)initBookList() {const xhr = new XMLHttpRequest();xhr.addEventListener("load", () => {const result = JSON.parse(xhr.responseText);console.log(result);this.books = result.data;});xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");xhr.send();},},// 創(chuàng)建階段的第1個(gè)生命周期函數(shù)beforeCreate() {// console.log(this.info)// console.log(this.message)// this.show()},created() {// created 生命周期函數(shù)，非常常用。// 經(jīng)常在它里面，調(diào)用 methods 中的方法，請(qǐng)求服務(wù)器的數(shù)據(jù)。// 并且，把請(qǐng)求到的數(shù)據(jù)，轉(zhuǎn)存到 data 中，供 template 模板渲染的時(shí)候使用！this.initBookList();},beforeMount() {// console.log('beforeMount')// const dom = document.querySelector('#myh3')// console.log(dom)},// 如果要操作當(dāng)前組件的 DOM，最早，只能在 mounted 階段執(zhí)行mounted() {// console.log(this.$el)// const dom = document.querySelector('#myh3')// console.log(dom)},beforeUpdate() {// console.log('beforeUpdate')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},// 當(dāng)數(shù)據(jù)變化之后，為了能夠操作到最新的 DOM 結(jié)構(gòu)，必須把代碼寫(xiě)到 updated 生命周期函數(shù)中updated() {// console.log('updated')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},beforeDestroy() {console.log("beforeDestroy");this.message = "aaa";console.log(this.message);},destroyed() {console.log("destroyed");// this.message = 'aaa'}, }; </script><style lang="less" scoped> .test-container {background-color: pink;height: 200px; } </style>

2.組件之間的數(shù)據(jù)共享

• 組件之間的關(guān)系（常見(jiàn)關(guān)系）

• 父子關(guān)系

• 兄弟關(guān)系

• 組件之間的數(shù)據(jù)共享

  1.父組件向子組件共享數(shù)據(jù)需要使用自定義屬性。

  2.子組件向父組件共享數(shù)據(jù)需要使用自定義事件。

• 兄弟組件之間的數(shù)據(jù)共享

  在vue.2x中，兄弟組件之間數(shù)據(jù)共享的方案是EventBus

  EventBus 的使用步驟

• 創(chuàng)建eventBus.js模塊，并向外共享一個(gè)Vue的實(shí)力對(duì)象

• 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit 方法觸發(fā)自定義事件

• 在數(shù)據(jù)接收方，調(diào)用 bus.$on 方法注冊(cè)一個(gè)自定義事件

?

ref引用

1.ref引用DOM

ref用來(lái)輔助開(kāi)發(fā)者在不依賴jQuery的情況下，獲取DOM元素或組件的引用

<p ref="myp"></p>export default{methods:{this.$refs.myp.style.color = 'red'} }

2.ref引用組件實(shí)例

可以用this.$refs.引用的名稱 來(lái)引用組件的實(shí)例

3.this.$nextTick(cb)方法

組件的$nextTick(cb) 方法，會(huì)把cb回調(diào)推遲到下一個(gè)DOM更新周期之后執(zhí)行。

通俗的理解是：等組件的DOM更新完成之后，在執(zhí)行cb回調(diào)函數(shù)。從而能保證cb 回調(diào)函數(shù)可以操作到最新的DOM元素。

動(dòng)態(tài)組件

1.實(shí)現(xiàn)動(dòng)態(tài)組件渲染

vue提供了一個(gè)內(nèi)置的<component>組件，專門(mén)用來(lái)渲染實(shí)現(xiàn)動(dòng)態(tài)組件的渲染

<template><div class="app-container"><h1>App 根組件</h1><hr /><button @click="comName = 'Left'">left</button><button @click="comName = 'Right'">right</button><div class="box"><!-- 渲染 Left 組件和 Right 組件 --><component :is="comName"></component></div></div> </template><script> import Left from "@/components/Left.vue"; import Right from "@/components/Right.vue"; export default {data() {return {comName: "",};},components: {Left,Right,}, }; </script>

2.使用keep-alive 保持狀態(tài)

keep-alive 可以把內(nèi)部的組件進(jìn)行緩存，而不是銷毀組件

<keep-alive><component :is="comName"></component> </keep-alive>

3. keep-alive 對(duì)應(yīng)的生命周期函數(shù)

當(dāng)組件被緩存時(shí)，會(huì)自動(dòng)觸發(fā)組件的deactivated 生命周期函數(shù)

當(dāng)組件被激活時(shí)，對(duì)自動(dòng)觸發(fā)組件的activated 生命周期函數(shù)

4. keep-alive 的include屬性

<keep-alive include="Left,Right"> //指定哪些組件需要被緩存 <component :is="comName"></component> </keep-alive>

插槽

1.什么是插槽

插槽（slot）是vue為組件的封裝者提供的能力。允許開(kāi)發(fā)者在封裝組件時(shí)，把不確定的、希望用戶指定的部分定義為插槽。

?

vue官方規(guī)定：每一個(gè) slot 插槽，都要有一個(gè) name 名稱

如果省略了 slot 的 name 屬性，則有一個(gè)默認(rèn)名稱叫做 default

2.v-slot指令

1. 如果要把內(nèi)容填充到指定名稱的插槽中，需要使用 v-slot：這個(gè)指令 2. v-slot：后面要跟上插槽的名字 3. v-slot：指令不能用在元素身上，必須用在template標(biāo)簽上 4. template這個(gè)標(biāo)簽，它是一個(gè)虛擬標(biāo)簽，只起到包裹性的作用 5. v-slot的簡(jiǎn)寫(xiě)是#

3.后備內(nèi)容

封裝組件時(shí)，可以為預(yù)留的<slot>插槽提供后備內(nèi)容。如果組件的使用者沒(méi)有為插槽提供任何內(nèi)容，則后備內(nèi)容會(huì)生效。

4.作用域插槽

在封裝組件時(shí)，為預(yù)留的<slot>提供屬性對(duì)應(yīng)的值，這種用法，叫做 “ 作用域插槽 ”。

<Left><template #con="obj"><h3>pppppp</h3><p>{{ obj.msg }}</p></template></Left><slot name="con" msg="hello"> </slot>

自定義指令

1.vue中的自定義指令分為兩類

• 私有自定義指令

• 全局自定義指令

2.私有自定義指令

在每個(gè)vue組件中，可以在directives節(jié)點(diǎn)下聲明私有自定義指令。

//私有指令節(jié)點(diǎn)directives: {color: {bind(el) {el.style.color = "red";// console.log(111);},},}

3.鉤子函數(shù)

指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：

• bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。

• inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。

• update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下）。

• componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。

• unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

接下來(lái)我們來(lái)看一下鉤子函數(shù)的參數(shù) (包括 el，binding，vnode，oldVnode) 。

鉤子函數(shù)被賦予了以下參數(shù)：

• el: 指令所綁定的元素，可以用來(lái)直接操作 DOM 。

• binding

  : 一個(gè)對(duì)象，包含以下屬性：

  • name: 指令名，不包括 v- 前綴。

  • value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。

  • oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。

  • expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

  • arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。

  • modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }。

• vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)，查閱 VNode API 了解更多詳情。

• oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，盡量不要修改他們。如果需要在鉤子之間共享數(shù)據(jù)，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。

一個(gè)使用了這些參數(shù)的自定義鉤子樣例：

<div id="hook-arguments-example" v-demo:hello.a.b="message"></div> Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })new Vue({el: '#hook-arguments-example',data: {message: 'hello!'} })

name: "demo" value: "hello!" expression: "message" argument: "hello" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, child, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce

4.函數(shù)簡(jiǎn)寫(xiě)

大多數(shù)情況下，我們可能想在 bind 和 update 鉤子上做重復(fù)動(dòng)作，并且不想關(guān)心其它的鉤子函數(shù)。可以這樣寫(xiě):

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value })

5.對(duì)象字面量

如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對(duì)象字面量。記住，指令函數(shù)能夠接受所有合法類型的 Javascript 表達(dá)式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!" })

路由

1.前端路由的工作方式

用戶點(diǎn)擊了頁(yè)面上的路由鏈接

導(dǎo)致URl地址欄中的Hash值發(fā)生了變化

前端路由監(jiān)聽(tīng)到了Hash地址變化

前端路由把當(dāng)前的 Hash 地址對(duì)應(yīng)的組件渲染到瀏覽器中

?

2.底層原理

利用 windows.onhashchange 來(lái)監(jiān)聽(tīng)hash地址的變化，綁定動(dòng)態(tài)組件實(shí)現(xiàn)路由效果

3.路由配置安裝

//導(dǎo)入Vue和 VueRouter 的包 import Vue from 'vue' import VueRouter from 'vue-router' //調(diào)用Vue.use()函數(shù)，把VueRouter 安裝為 Vue 的插件 Vue.use(VueRouter)//創(chuàng)建路由的實(shí)例對(duì)象 const rooter = new VueRouter()//向外共享 export default rooter //main.js import Vue from 'vue' import App from './App.vue' //導(dǎo)入路由模塊，拿到實(shí)例對(duì)象//在進(jìn)行模塊導(dǎo)入的時(shí)候，如果給定的是文件夾，則默認(rèn)導(dǎo)入這個(gè)文件夾下，名字叫做index.js的文件import router from '@/router/index.js'// 導(dǎo)入 bootstrap 樣式 import 'bootstrap/dist/css/bootstrap.min.css' // 全局樣式 import '@/assets/global.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),//把路由實(shí)例對(duì)象掛載router: router }).$mount('#app')

4.路由的重定向

路由的重定向指的是：用戶在訪問(wèn)地址A的時(shí)候，強(qiáng)制用戶跳轉(zhuǎn)到地址C，從而展示特定的組件頁(yè)面。通過(guò)路由規(guī)則的redirect屬性，指定一個(gè)新的路由地址，可以很方便地設(shè)置路由的重定向。

const router = new VueRouter({routes: [//當(dāng)用戶訪問(wèn) / 的時(shí)候，通過(guò)redirect 屬性跳轉(zhuǎn)到 /home 對(duì)應(yīng)的路由規(guī)則{path:'/',redirect:'/home'},{ path: '/home', component: Home },{ path: '/movie', component: Movie },{ path: '/about', component: About }] })

5.嵌套路由

通過(guò)children 屬性聲明子路由規(guī)則

//index.js{path: '/about',component: About,redirect: '/about/tab1',//子路由規(guī)則children: [{ path: 'tab1', component: Tab1 },{ path: 'tab2', component: Tab2 }]} //about.vue<router-link to="/about/tab1">Tab1</router-link><router-link to="/about/tab2">Tab2</router-link><hr /><router-view></router-view>

默認(rèn)子路由：如果 children 數(shù)組中，某個(gè)路由規(guī)則的 path 值為空字符串，則這條路由規(guī)則，叫做 “ 默認(rèn)子路由 ”

6.動(dòng)態(tài)路由匹配

動(dòng)態(tài)路由匹配 | Vue Router

{ path: 'userinfo/:id', component: UserDetail, props: true } //動(dòng)態(tài)參數(shù)項(xiàng) props傳值

7.聲明式導(dǎo)航&編程式導(dǎo)航

1.在瀏覽器中，點(diǎn)擊鏈接實(shí)現(xiàn)導(dǎo)航的方式，叫做聲明式導(dǎo)航。

2.在瀏覽器中，調(diào)用API方法實(shí)現(xiàn)的導(dǎo)航的方式，叫做編程式導(dǎo)航。例如

在普通網(wǎng)頁(yè)中調(diào)用location.href跳轉(zhuǎn)到新頁(yè)面的方式，屬于編程式導(dǎo)航。

vue-router 中的編程式導(dǎo)航API

this.$router.push('hash地址')

跳轉(zhuǎn)到指定的地址，并增加一條瀏覽記錄

this.$router.replace('hash地址')

跳轉(zhuǎn)到指定的地址，并替換掉當(dāng)前的瀏覽記錄

this.$router.go(數(shù)值n)

可以在瀏覽歷史中前進(jìn)和后退

如果前進(jìn)、后退的層數(shù)超過(guò)最大限制，則原地不動(dòng)

this.$router 的簡(jiǎn)化用法

$router.back() $router.forward()

導(dǎo)航守衛(wèi)

1.全局前置守衛(wèi)

每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時(shí)，都會(huì)觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對(duì)每個(gè)路由進(jìn)行訪問(wèn)權(quán)限的控制：

const router = new VueRouter({...})//調(diào)用路由實(shí)例對(duì)象的 beforeEach 方法，即可聲明“全局前置守衛(wèi)” //每次發(fā)生路由跳轉(zhuǎn)的時(shí)候，都會(huì)自動(dòng)觸發(fā) fn 這個(gè)“回調(diào)函數(shù)” router.beforeEach(fn)

2.回調(diào)函數(shù)中接受的三個(gè)實(shí)參

router.beforeEach((to,from,next)=>{//to 是將要訪問(wèn)的路由的信息對(duì)象//from 是將要離開(kāi)的路由的信息對(duì)象//next 是一個(gè)函數(shù)，調(diào)用next()表示放行，允許這次路由導(dǎo)航 })

?

總結(jié)

以上是生活随笔為你收集整理的Vue2学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。