复习

1.组件: 组成页面的零件, 模块化开发的具体表现

把一个完整的大型页面, 按照业务逻辑拆分成不同的小模块
分别开发最后整合在一起
components: 专门存放组件的文件夹
组件命名规范: 大驼峰 并推荐至少两个单词 (防止与系统HTML标签重名)
推荐(多数开发者的习惯): 组件的根div 添加class, 名字是组件名的蛇形命名法
传参: 需要使用选项: props 来声明参数

2.生命周期: 基础知识面试必考

（1）数据/函数的初始化

beforeCreate
created : 面试题常问: 在这个周期能操作DOM吗? 不能---此位置可以发请求, 略微提前但是要承担极小概率 DOM初始化失败的风险. 一旦失败就属于浪费流量

（2）DOM元素的初始化

beforeMount
mounted : 此处可以开始操作DOM--推荐在这里发送请求

（3）DOM元素的更新

beforeUpdate
updated

（4）组件销毁

beforeDestroy
destroyed

3.监听器: watch

可以监听任意属性的变化

4.插槽: slot

用于做布局, 在组件的某个位置添加占位符. 使用时会替换成具体的内容

5.全局axios

在main.js中, 把axios 注入到 vue的原型里

方式有两种:

简单粗暴: Vue.prototype.axios = axios 使用时没有提示

优雅: 使用 vue-axios 模块进行. 使用时有提示

6.外部css:

（1）scss:

JS中用import引入, 就是全局

style中

@import url(): 忽略 scoped 局部 属性, 全局引入
@import: 受scoped属性影响. 写scoped就是局部, 不写scoped就是全局

（2）css

JS中用import引入, 就是全局

一、外部css

二、路由系统

路由: 路径的由来

具体来说: 一个名称对应一个地址. 例如小明家 --- 成都xx区xx街道xx小区...
项目中: 地址栏的路径对应的组件是什么

项目的分类:

多页项目: 一个网站由多个 html 文件组成, 一个html就是一个页面
单页项目: 1个网站只有1个html文件. 模块化的表现: 切换页面上局部的组件来实现页面内容的变化
专业称呼: SPA: Single Page Application 单页应用

三、路由的机制

一般使用的超链接跳转: 会导致页面刷新 - 不能用
路由提供的, 专门负责跳转的组件 router-link 特点是不会刷新页面

1.先检查你的项目是否已安装路由模块
看 main.js 的 new Vue里, 有没有 router
没有则要重新生成项目包, 选项中需要勾选router

2.router-view: 是路由模块提供的占位符组件
此组件会自动检测浏览器的地址栏中的路径, 通过路径到配置文件中找到对应的组件进行展示

在App.vue里放占位符，替换路由的内容，才能展示出来

路由系统切换的组件要存储到views目录下

和组件是两个体系，不需要遵守命名规范

3.书写组件

4.在router里的index.js里（路由配置文件），写以下内容：

path是给路由的名字，在地址栏接后面的名字就可以查找到

component 可以找到对应的组件

5.通过地址栏展示

整个流程如图所示：

加载路由的方式有两种：

先写import引入，然后再使用
懒加载：书写箭头函数，在调用时临时引入组件

假如一个网页有20个页面，其中5个网页用户经常访问的比如首页、详情页、搜索页你，就可以使用预加载：提前引入，用户访问时就可以直接查看（速度快、体验好）；有15个页面访问不频繁的，例如用户信息、广告等，初始不加载，用户访问时再临时加载，可以避免网站刚进入时，加载过多数据导致的卡顿问题（属于首页优化方案）

懒加载：