Vue----自定义事件

Vue----自定义事件

1. 自定义事件
2. 自定义事件的 3 个使用步骤
3. 自定义事件传参

组件上的 v-model

Vue----组件上的 v-model

1. 组件上使用 v-model
2. 在组件上使用 v-model 的步骤

Vue----任务列表案例

Vue----任务列表案例

Vue组件高级

watch 侦听器

Vue----watch 侦听器

1. watch 侦听器
2. watch 侦听器的基本语法
3. 使用 watch 检测用户名是否可用
4. immediate 选项
5. deep 选项
6. 监听对象单个属性的变化
7. 计算属性 vs 侦听器

组件的生命周期

Vue----组件的生命周期

1. 组件运行的过程
2. 监听组件的不同时刻
3. 完整的生命周期图示

组件之间的数据共享

Vue----组件之间的数据共享

1. 组件之间的关系
2. 父子组件之间的数据共享
3. 兄弟组件之间的数据共享
4. 后代关系组件之间的数据共享
5. vuex
6. 总结

Vue 2.x 中全局配置axios

Vue 3.x 中全局配置axios

Vue---- Vue 3.x 中全局配置axios

1. 为什么要全局配置 axios
2. 如何全局配置 axios
3. 发起get请求
4. 发起post请求

ref 引用

Vue---- ref 引用

1. ref 引用
2. 使用 ref 引用 DOM 元素
3. 使用 ref 引用组件实例
4. 控制文本框和按钮的按需切换 & 让文本框自动获得焦点
5. this.$nextTick(cb) 方法

动态组件

Vue----动态组件

1. 动态组件
2. 实现动态组件渲染
3. 使用 keep-alive 保持状态

插槽

Vue----插槽

1. 插槽
2. 体验插槽的基础用法
3. 具名插槽
4. 作用域插槽

自定义指令

Vue----自定义指令

1. 自定义指令
2. 声明私有自定义指令的语法 & 使用自定义指令
3. 声明全局自定义指令的语法
4. updated 函数
5. 函数简写
6. 指令的参数值

路由

1 前端路由的概念与原理

1.1 什么是路由

路由（英文：router）就是对应关系。路由分为两大类：

① 后端路由

② 前端路由

1.1.1 后端路由

后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。

例如：

const express = require( 'express ')
const router = express.Router()
router.get( '/userlist', function(req，res) {/*路由的处理函数*/ })
router.post( '/adduser' , function(req,res) { /*路由的处理函数*/ })
module.exports = router

1.1.2 SPA

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

1.1.3 前端路由

Hash 地址与组件之间的对应关系。

1.2 前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

<component>

组件的占位符。

通过 <component> 标签的 is 属性，动态切换要显示的组件。

2 vue-router 的基本使用

2.1 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

2.1.1 vue-router 的版本

vue-router 目前有 3.x 的版本和 4.x 的版本。其中：

vue-router 3.x 只能结合 vue2 进行使用

vue-router 3.x 的官方文档地址：

vue-router 4.x 只能结合 vue3 进行使用

vue-router 4.x 的官方文档地址：

vue-router 3.x 的基本使用步骤

Vue----vue-router 3.x 的基本使用步骤

1. 在项目中安装 vue-router
2. 创建路由模块
3. 导入并挂载路由模块
4. 声明路由链接和占位符
5. 声明路由的匹配规则
6. 完成代码

Vue----vue-router 4.x 的基本使用步骤

Vue----vue-router 4.x 的基本使用步骤

1. 在项目中安装 vue-router
2. 定义路由组件
3. 声明路由链接和占位符
4. 创建路由模块
   4.1 从 vue-router 中按需导入两个方法
   4.2 导入需要使用路由控制的组件
   4.3 创建路由实例对象
   4.4 向外共享路由实例对象
   4.5 完整代码
   4.6 在 main.js 中导入并挂载路由模块

Vue----vue-router 的高级用法

Vue----vue-router 的高级用法

1. 路由重定向
2. 嵌套路由
3. 动态路由匹配

声明式导航 & 编程式导航

Vue----声明式导航 & 编程式导航

1. 声明式导航
2. 编程式导航
3. vue-router 中的编程式导航 API
4. $router.push与$router.replace
5. $router.go
6. $router.go 的简化用法

导航守卫

Vue----导航守卫

1. 全局前置守卫
2. 守卫方法的 3 个形参
3. next 函数的 3 种调用方式
4. 控制后台主页的访问权限

Vue----路由高亮 & 命名路由

Vue----路由高亮 & 命名路由

1. 路由高亮
2. 命名路由

Vue----vue-cli

Vue----vue-cli

1. vue-cli
2. 安装 vue-cli
3. 创建项目
4. 基于 vue ui 创建 vue 项目
5. 基于命令行创建 vue 项目

Vue----组件库

Vue----组件库

1. 什么是 vue 组件库
2. 最常用的 vue 组件库
3. Element UI
4. 把组件的导入和注册封装为独立的模块