Class 与 Style 绑定
- 动态绑定 HTML 的 class
- 以数组语法绑定 HTML 的 class
- 以对象语法绑定 HTML 的 class
- 以对象语法绑定内联的 style
props 验证
- props 验证
- 对象类型的 props 节点
- props 验证
- 基础的类型检查
- 多个可能的类型
- 必填项校验
- 属性默认值
- 自定义验证函数
计算属性
- 计算属性
- 声明计算属性
- 计算属性的使用注意点
- 计算属性 与 方法
Vue----自定义事件
- 自定义事件
- 自定义事件的 3 个使用步骤
- 自定义事件传参
组件上的 v-model
- 组件上使用 v-model
- 在组件上使用 v-model 的步骤
Vue----任务列表案例
Vue组件高级
watch 侦听器
- watch 侦听器
- watch 侦听器的基本语法
- 使用 watch 检测用户名是否可用
- immediate 选项
- deep 选项
- 监听对象单个属性的变化
- 计算属性 vs 侦听器
组件的生命周期
- 组件运行的过程
- 监听组件的不同时刻
- 完整的生命周期图示
组件之间的数据共享
- 组件之间的关系
- 父子组件之间的数据共享
- 兄弟组件之间的数据共享
- 后代关系组件之间的数据共享
- vuex
- 总结
Vue 2.x 中全局配置axios
Vue 3.x 中全局配置axios
- 为什么要全局配置 axios
- 如何全局配置 axios
- 发起get请求
- 发起post请求
ref 引用
- ref 引用
- 使用 ref 引用 DOM 元素
- 使用 ref 引用组件实例
- 控制文本框和按钮的按需切换 & 让文本框自动获得焦点
- this.$nextTick(cb) 方法
动态组件
- 动态组件
- 实现动态组件渲染
- 使用 keep-alive 保持状态
插槽
- 插槽
- 体验插槽的基础用法
- 具名插槽
- 作用域插槽
自定义指令
- 自定义指令
- 声明私有自定义指令的语法 & 使用自定义指令
- 声明全局自定义指令的语法
- updated 函数
- 函数简写
- 指令的参数值
路由
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 = route
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 4.x 只能结合 vue3 进行使用
vue-router 3.x 的基本使用步骤
- 在项目中安装 vue-router
- 创建路由模块
- 导入并挂载路由模块
- 声明路由链接和占位符
- 声明路由的匹配规则
- 完成代码
Vue----vue-router 4.x 的基本使用步骤
- 在项目中安装 vue-router
- 定义路由组件
- 声明路由链接和占位符
- 创建路由模块
4.1 从 vue-router 中按需导入两个方法
4.2 导入需要使用路由控制的组件
4.3 创建路由实例对象
4.4 向外共享路由实例对象
4.5 完整代码
4.6 在 main.js 中导入并挂载路由模块
Vue----vue-router 的高级用法
- 路由重定向
- 嵌套路由
- 动态路由匹配
声明式导航 & 编程式导航
- 声明式导航
- 编程式导航
- vue-router 中的编程式导航 API
- $router.push与$router.replace
- $router.go
- $router.go 的简化用法
导航守卫
- 全局前置守卫
- 守卫方法的 3 个形参
- next 函数的 3 种调用方式
- 控制后台主页的访问权限
Vue----路由高亮 & 命名路由
- 路由高亮
- 命名路由
Vue----vue-cli
- vue-cli
- 安装 vue-cli
- 创建项目
- 基于 vue ui 创建 vue 项目
- 基于命令行创建 vue 项目
Vue----组件库
- 什么是 vue 组件库
- 最常用的 vue 组件库
- Element UI
- 把组件的导入和注册封装为独立的模块