VUE day_05(7.21)外部css、路由系统、路由的机制、路由两种传参方式三种接参方式、编程式跳转

复习

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小区...
• 项目中: 地址栏的路径 对应的 组件是什么

项目的分类:

• 多页项