P8

v-modle雙向綁定

v-for 注意index的使用

v-show 根據(jù)條件顯示（一開始就被創(chuàng)建）

P13

v-if

P13

v-for

*js中的解構(gòu)

v-for中的判斷

p17 模糊查詢

P18 事件對象

P19

事件修飾符

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

多選項

下拉列表

P22

購物車案例

累加

P24

表單修飾符

P25

計算屬性

P26

watch監(jiān)聽

可以處理異步，計算屬性不可以

P42

props傳參

父頁面設(shè)置

子頁面接收和驗證

P43

屬性透傳

父頁面設(shè)置的屬性和事件會在子組件中應(yīng)用，應(yīng)用在子元素的根節(jié)點上。

在子頁面設(shè)置禁止透傳來避免但是↓

可以在子頁面上設(shè)置v-bind來透傳到某個元素上

P44

子傳父

1、在父頁面的子組件上定義自定義四件，

2、在父頁面上定義相應(yīng)的方法，以便子組件做內(nèi)容傳遞

3、子組件的元素上定義事件，用來觸發(fā)子傳父的核心內(nèi)容。↓

4、子組件在事件中執(zhí)行this.$emit("evnet"),"event"為父頁面上定義的自定義事件。

這樣就可以執(zhí)行父頁面上的handlevnet事件。

傳遞參數(shù)

方法1：

子組件設(shè)置參數(shù)內(nèi)容

父組件通過data進行接收

方法2：

直接通過子組件元素$emit傳遞數(shù)據(jù)。

P45 $refs

藍色的獲取當(dāng)前元素的整個對象

獲取整個child的實例對象，可以隨便訪問旗下的內(nèi)容

P47 provide injcet 跨級通訊

↑在頂級頁面中使用provide向外共享數(shù)據(jù)。可以通過this關(guān)鍵字把整個當(dāng)前組件對象共享出去，可以提供修改當(dāng)前組件內(nèi)容的功能。

↑在子頁面上通過inject引用，獲取相關(guān)信息，并可以修改相關(guān)數(shù)據(jù)。

P48 訂閱發(fā)布

訂閱發(fā)布模式↑

發(fā)布者↑

訂閱者↑

P49 動態(tài)組件

藍色為傳統(tǒng)if-else進行組件切換，紅色為動態(tài)組件。↑

通過修改動態(tài)組件的參數(shù)值切換組件↑

keep-alive緩存切換前的數(shù)據(jù)↑

選擇需要進行緩存或不進行緩存的組件↑

需要組件中指定組件名稱與keep-alive中的include的值相同↑

P50 v-model

藍色的內(nèi)容是自己定義 屬性和方法來控制顯示內(nèi)容來實現(xiàn)雙向綁定，但是子組件內(nèi)部就組要定語相應(yīng)的名稱來接收和控制屬性信息，這樣就照成了子組件的重用性降低。通過使用v-model，子組件就只需定語一套屬性信息，提高了重復(fù)利用的效率。↑

子組件需要使用的屬性名稱。↑

v-model被編譯后的內(nèi)容，所以子組件的名稱是這些。↑

v-model可以重新定義名稱。↑

P51 異步組件

v異步組件，按需加載。↑

v可以根據(jù)情況配置等待加載組件和加載失敗組件。↑

P52 插槽

在不使用插槽功能前，父頁面調(diào)用子組件時，在子組件標簽內(nèi)寫入一段HTML代碼，是沒有作用的，顯示的仍然是在子組件內(nèi)的內(nèi)容。↑

在父組件里的子組件標簽內(nèi)的HTML內(nèi)容的作用域是當(dāng)前父頁。

通過在子組件中使用slot標簽，可以把在父組件中寫的html代碼在子組件定義的區(qū)域內(nèi)進行顯示出來。↑

P53 具名插槽

父組件內(nèi)使用v-slot。↑

可以使用#形式。↑

子組件內(nèi)定語name。↑

P54 作用域插槽

子組通過自定義名稱mylist對外暴露出datalist。↑

父組件獲取myprops.mylist獲取子組件作用域里的datalist。↑

P56 生命周期更新階段

任何狀態(tài)信息改變后，updated都會被執(zhí)行

可以通過nexttick函數(shù)來改變這樣情況，比updated執(zhí)行晚，且只會執(zhí)行一次。

P60 swiper組件封裝

作用域問題

slideChange：function（）這種寫法，此函數(shù)內(nèi)使用this關(guān)鍵字，作用域是mySwiper這個實例的作用域。↑

slideChange:()=>的形式的作用域是mounted()一級。↑

P62 指令的應(yīng)用

自定義指令只可以傳遞一個參數(shù)，可以通過傳遞對象的方式，實現(xiàn)多個值傳遞的功能。↑

定義指令，可以分開寫mounted、updated，也可以簡寫形式，直接寫自定義的指令名稱。↑

P67 reactive函數(shù)

一定需要是state.去引用↑

P68 ref函數(shù)

對象包裝、函數(shù)包裝

在input中使用ref，用來獲取當(dāng)前dom對象，并綁定myinput。

P69 toRefs函數(shù)

嘗試違法P67中reactive的使用方法來實現(xiàn)雙向綁定。不使用const定義的reactive的名稱引用reactive中的屬性，想通過賦值的形式做引用。↓

這種嘗試是錯誤的！如果非得想不通過reactvie定語的函數(shù)名點屬性名的形式，那可以通過使用torefs轉(zhuǎn)變一下ref來使用↑。

知識點：展開合并↑

P77 單文件組件使用VCA的語法糖

案例：點擊列表項展示詳細信息。↑

動態(tài)組件：在父頁面中定義which變量來控制組件的切換，當(dāng)是list時顯示list列表，當(dāng)false時顯示detail。↑

通過provide來和子組件數(shù)據(jù)傳遞。子組件通過inject來獲取which并修改。

在子組件中，當(dāng)點擊觸發(fā)handleclick方法時修改which的值，實現(xiàn)組件切換。list.vue子組件↓

當(dāng)點擊觸發(fā)list.vue的方法后需要展示詳細信息，因為是單頁面組件就需要隱藏其他信息，方便詳情展示。所以detail.vue子組件控制首頁的nevibar的隱藏，到了當(dāng)前子組件會自動執(zhí)行onMounted生命周期函數(shù)↓

定義全局指令。↓

定義局部指令，注意名稱匹配的時候的區(qū)分。↓

P83 動態(tài)路由匹配

重要

1. 詳情頁到list頁的回退
2. 詳情頁到其他詳情頁的跳轉(zhuǎn)

如果使用方法二，需要參數(shù)名稱與路由中的配置一致。獲取整個路由對象，模版中使用路由對象。↓

第三種處理方式路由配置。↓

第三種處理方式路由配置。↓

第三種處理方式的效果是帶問號傳參的形式。↓

第三種處理方式獲取參數(shù)的方法。↓

↑上幾個圖片上的router由idnex.js配置路由。↓

模版中獲取當(dāng)前匹配到的路由實例。↓

前面的示例中從list表頁到詳細頁的跳轉(zhuǎn)及傳參完成后，詳細頁返回到list頁的實現(xiàn)。↓

實現(xiàn)從詳情頁到另一個內(nèi)容詳情頁的跳轉(zhuǎn)，因為還是在當(dāng)前組件上mounted函數(shù)不會再次執(zhí)行，所以會調(diào)整失敗，解決方法就是通過wathc監(jiān)聽$route.parms的變化來做相應(yīng)處理。↓

P84 路由模式

去掉瀏覽器地址欄中的#。↓

P86 組件內(nèi)守衛(wèi)

原來詳細頁到詳細 頁跳轉(zhuǎn)需要watch監(jiān)聽，現(xiàn)在可以使用beforeRouteUpdate函數(shù)來處理。↓

P86 路由懶加載

P86 VCA與路由

P90 vuex中使用mutation

ES6的語法中支持方法名使用變量的形式來定義，方便開發(fā)人員各自管理自己的邏輯。

P98 optionStore

當(dāng)只有一個參數(shù)的時候往往可以省略前面的小括號

基本類型可以這樣寫，也可以把return去掉↑

對象類型不能省略小括號↑