一、methods方法綁定this
1.1問題一：methods中為什么不能使用箭頭函數？
我們在methods中要使用data返回對象中的數據：
- 那么這個this是必須有值的，並且應該可以通過this獲取到data返回對象中的數據。
那么我們這個this能不能是window呢?
- 不可以是 window，因為 window 中我們無法獲取到data返回對象中的數據；
- 但是如果我們使用箭頭函數，那么這個 this 就會是 window 了；
為什么是window呢？
- 這里涉及到箭頭函數使用 this 的查找規則，它會在自己的上層作用域中來查找 this；
- 最終剛好找到的是script作用於中的this，所以就是window；
this到底是如何查找和綁定的呢？
以下鏈接專門詳細的講解了this的綁定規則；
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA；
認真學習之后你絕對對this的綁定一清二楚；
1.2 問題二：不使用箭頭函數的情況下，this到底指向什么？
事實上Vue的源碼當中就是對methods中的所有函數進行了遍歷，並且通過bind綁定了this：
二、VSCode代碼片段
我們在前面練習Vue的過程中，有些代碼片段是需要經常寫的，我們再VSCode中我們可以生成一個代碼片段，方便我們快速生成。
VSCode中的代碼片段有固定的格式，所以我們一般會借助於一個在線工具來完成。
具體的步驟如下：
- 第一步，復制自己需要生成代碼片段的代碼；
- 第二步，https://snippet-generator.app/在該網站中生成代碼片段；
- 第三步，在VSCode中配置代碼片段；
過程：
mac
window
三、模板語法
React的開發模式：
- React使用的 jsx，所以對應的代碼都是編寫的類似於js的一種語法；
- 之后通過Babel將jsx編譯成React.createElement 函數調用；
Vue也支持jsx的開發模式（后續有時間也會講到）：
- 但是大多數情況下，使用基於HTML的模板語法；
- 在模板中，允許開發者以聲明式的方式將DOM和底層組件實例的數據綁定在一起；
- 在底層的實現中，Vue將模板編譯成虛擬DOM渲染函數，這個我會在后續給大家講到；
四、Mustache雙大括號語法
如果我們希望把數據顯示到模板（template）中，使用最多的語法是“Mustache”語法(雙大括號) 的文本插值。
- 並且我們前端提到過，data 返回的對象是有添加到 Vue 的響應式系統中；
- 當data中的數據發生改變時，對應的內容也會發生更新。
- 當然，Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達式。
另外這種用法是錯誤的：
五、指令
基本同vue2
不熟悉的幾個點
1、v-on參數傳遞
當通過methods中定義方法，以供@click調用時，需要注意參數問題：
情況一：如果該方法不需要額外參數，那么方法后的()可以不添加。
- 但是注意：如果方法本身中有一個參數，那么會默認將原生事件event參數傳遞進去
情況二：如果需要同時傳入某個參數，同時需要event時，可以通過$event傳入事件。
2、v-cloak
這個指令保持在元素上直到關聯組件實例結束編譯。
- 和CSS 規則如[v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的Mustache 標簽直到組件實例准備完畢。
<div> 不會顯示，直到編譯結束。
3、template元素
因為v-if是一個指令，所以必須將其添加到一個元素上：
- 但是如果我們希望切換的是多個元素呢？
- 此時我們渲染div，但是我們並不希望div這種元素被渲染；
- 這個時候，我們可以選擇使用template；
template元素可以當做不可見的包裹元素，並且在v-if上使用，但是最終template不會被渲染出來：
- 有點類似於小程序中的block
v-show和v-if的區別
首先，在用法上的區別：
- v-show是不支持template；
- v-show不可以和v-else一起使用；
其次，本質的區別：
- v-show元素無論是否需要顯示到瀏覽器上，它的DOM實際都是有渲染的，只是通過CSS的display屬性來進行切換；
- v-if當條件為false時，其對應的原生壓根不會被渲染到DOM中；
開發中如何進行選擇呢？
- 如果我們的原生需要在顯示和隱藏之間頻繁的切換，那么使用v-show；
- 如果不會頻繁的發生切換，那么使用v-if；