Vue2学习之侦听器、计算属性、axios、Vue-cli及其目录结构

过滤器

了解就行了，Vue3里面这部分以及被砍掉了，不再使用了。
所以这里也就不介绍了，如果有用到再去找相应的资源进行学习就行了。

侦听器 watch

什么是watch侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

注意：要监听哪个数据的变化，就把数据名作为方法名即可。

使用watch检测用户名是否可用

immediate选项

deep选项

计算属性

计算属性的特点：
1、虽然计算属性在声明的时候被定义为方法，但是计算属性本质上还是一个属性
2、计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行计算。

axios

基本语法如下：

示例：

请求原理图示：

注意其中的data才是我们得到是真实数据，而其他的什么config、header啥的都是axios帮我们追加进去的。

如何传参？

注意：上图中，get传参用params，post传参用data。

使用解构赋值：

基于axios.get和axios.post发起请求

Vue-Cli

单页面应用程序

什么是Vue-cli

Vue-Cli的安装和使用

这个npm的安装方式百度上有很多，对于不了解npm的xd可以自己去搜哈。这里直接演示怎么创建vue工程了。
还有项目名称要用英文的，不要用中文。

第一步，检测自己电脑是否已经安装了vue-cli，如果安装成功，则可以查看对应的版本号（-V的那个V要大写）：

然后我们要确定我们要在哪个目录文件下创建Vue项目，然后去到对应的这个目录文件，在地址栏内打上cmd打开命令行，则我们会直接进入该目录文件下创建vue工程：

然后命令行打开后，我们就在这里面进行Vue项目的创建：

然后会让你选择版本项：

前面两个很明显，是Vue2和Vue3的项目版本，如果选择这两个其中一个敲回车之后都会直接一键生成对应的项目，对新手来说会无法熟悉其中的过程，所以这里我们选择第三个Manually select features，这是可自己定制Vue项目的选项，我们自己来实现一遍，敲回车之后进入下面的页面：

这里我们选择上面的三个红框标起来的位置，解释一下上面的选项：

第一个Choose Vue version很好明白，就是选择版本用的；
第二项Babel这个东西也要勾上，在webpack的学习当中我们知道，Babel可以解决JavaScript高级语法与项目的兼容性。
第三项TypeScript是微软的一套比JavaScript更高级的东西，没学了解就行。
第四项是渐进式的web框架，不懂所以也不选；
第五项第六项还没学到所以也不选；
第七项Css Pre-processors要选，这是CSS预处理器，webpack中也有介绍，有了这个就可以使用比CSS更加高级的less语法；
第八项不选，要是装上了那你可能就不会写代码了…这是用来约束团队成员编写代码的风格的，装了它就会有非常严格的语法，不懂的话随便写随便报错。
第九项和第十项都是测试用的。

选中上面红框勾中的，敲击回车进入下一个页面：

第一个选项就是让我们选择Vue版本的，因为我们学的是2版本，所以选Vue2就行，敲回车：

这里是CSS的预处理器，让我们选一个，因为只学过Less，所以选择Less就行，敲回车：

然后这个页面是在询问我们，所有的第三方插件的这些配置文件是应该怎么去创建，第一个选项是放到独立的配置文件里面，第二个In package.json是和package.json放在一起。这里我们选择第一项，让它们自己独立拥有一个配置文件，如果选择第二项的话会显得package.json的内容过于杂乱。
敲回车：

最后一个选项是询问我们是否要把之前的这些选项作为一个以后创建Vue项目的预设模板，这样以后创建项目就不用再选了，可以直接用这套模板来创建。y就是要，n就是不要，这个看自己需要。
最后等待创建即可（注意下载的时候鼠标别在里面乱按，否则会冻结，如果冻结窗口了只需要将鼠标放在窗口的边边上单击一下即可）。
创建成之后如下：

它的意思是我们只要依次输入这两行命令，就可以启动项目。

介绍项目的目录结构

首相是上面这几个。

node_modiles目录：所有的第三方包都存在了这里面。
public目录：里面有两个文件，一个是favicon.ico文件，这是Vue项目的一个小图标，就那个绿色的三角。

然后这个目录下还有一个index.html页面，因为vue创建的项目是单页面应用程序，所以所有的东西我们都放在了一个页面里面，即这个页面，所以它相当于一个程序的入口。打开它很多内容都不认识，但没关系，我们注意蓝色框勾中的位置就行：

这是一个div，并且id为"app"，这其实就是我们之前写的练习代码上面的需要被挂载的div节点，还是很熟悉的吧。

然后是剩下的就没啥好讲的了，都是一些配置文件，src是放源代码的知道就行了。

src源码的目录

src目录打开，可以看一个第一个assets，这个就是放一些静态资源用的，比如图片啊，样式表啊啥的。
然后是components，这就是组件化中提到的组件，程序员封装的、可复用的组件、都要被放到这个目录下。
然后main.js，这个目录是项目的入口文件，整个项目的运行，要先执行main.js。这个就是我们之前webpack里面的讲的index.js文件。
最后是App.vue，这是我们项目的根组件，这是用来定义一些UI结构的，定义什么样的UI结构，用户就看到什么样的UI结构。

Vue项目的执行流程

很简单，在工程化的项目中，Vue项目要做的事情很单纯：就是通过main.js把App.vue渲染到index.html的指定区域中。

所以我们先来看一下main.js怎么写的：