Vue基础入门
Vue简介
- 什么是Vue
- vue的特性
- MVVM
- vue的版本
vue的基本使用
- 基本使用步骤
- 基本代码与MVVM的对应关系
Vue的调试工具
- Vue的调试工具
Vue指令
1 指令的概念
指令是Vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
2 指令的分类
指令按照不同的用途可以分为如下6大类:
1.内容渲染指令
2.属性绑定指令
3.事件绑定指令
4.双向绑定指令
5.条件渲染指令
6.列表渲染指令
3 内容渲染指令
- v-text
- {{}} 插值表达式
- v-html
4 属性绑定指令
5 模板渲染语法中使用JavaScript表达式
6 事件绑定指令
- 事件对象
- 绑定事件并传参
- 事件修饰符
- 按键修饰符
7 双向绑定指令
- 双向绑定指令
- v-model 指令的修饰符
8 条件渲染指令
- v-if v-show
- v-else v-else-if
9 列表渲染指令
- 列表渲染指令
- v-for 中的索引
- 使用 key 维护列表的状态
- key 的注意事项
过滤器(Vue3弃用)
- 过滤器的定义
- 私有过滤器和全局过滤器
- 连续调用多个过滤器
- 过滤器传参
- 过滤器的兼容性
品牌列表案例
Vue组件基础
单页面应用程序
- 什么是单页面应用程序
- 单页面应用程序的特点
- 单页面应用程序的优缺点
- 如何快速创建 vue 的 SPA 项目
vite 的基本使用
- 创建 vite 的项目
- 梳理项目的结构
- vite 项目的运行流程
组件化开发思想
1 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。
例如:http://www.ibootstrap.cn/ 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的
方式,快速生成一个页面的布局结构。
2 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面:
提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性
3 vue 中的组件化开发
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
vue 组件的构成
- vue 组件组成结构
- 组件的 template 节点
- 组件的 script 节点
- 组件的 style 节点
组件注册
- 注册组件的两种方式
- 全局注册组件
- 使用全局注册组件
- 局部注册组件
- 全局注册和局部注册的区别
- 组件注册时名称的大小写
- 通过 name 属性注册组件
组件间的样式冲突
- 如何解决组件样式冲突的问题
- style 节点的 scoped 属性
- /deep/ 样式穿透
props
- 组件的 props
- 在组件中声明 props
- 无法使用未声明的 props
- props 的大小写命名
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 = 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 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
- 把组件的导入和注册封装为独立的模块