一、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；