Vue学习----从基础出发(包含案例)

---

Vue基础入门

Vue简介

Vue----Vue简介

1. 什么是Vue
2. vue的特性
3. MVVM
4. vue的版本

vue的基本使用

Vue----vue的基本使用

1. 基本使用步骤
2. 基本代码与MVVM的对应关系

Vue的调试工具

Vue----Vue的调试工具

1. Vue的调试工具

Vue指令

1 指令的概念

指令是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

2 指令的分类

指令按照不同的用途可以分为如下6大类：

1.内容渲染指令
2.属性绑定指令
3.事件绑定指令
4.双向绑定指令
5.条件渲染指令
6.列表渲染指令

3 内容渲染指令

Vue---- 内容渲染指令

1. v-text
2. {{}} 插值表达式
3. v-html

4 属性绑定指令

Vue----属性绑定指令

5 模板渲染语法中使用JavaScript表达式

Vue----模板渲染语法中使用JavaScript表达式

6 事件绑定指令

Vue----事件绑定指令

1. 事件对象
2. 绑定事件并传参
3. 事件修饰符
4. 按键修饰符

7 双向绑定指令

Vue----双向绑定指令

1. 双向绑定指令
2. v-model 指令的修饰符

8 条件渲染指令

Vue----条件渲染指令

1. v-if v-show
2. v-else v-else-if

9 列表渲染指令

Vue----列表渲染指令

1. 列表渲染指令
2. v-for 中的索引
3. 使用 key 维护列表的状态
4. key 的注意事项

过滤器(Vue3弃用)

Vue----过滤器(Vue3弃用)

1. 过滤器的定义
2. 私有过滤器和全局过滤器
3. 连续调用多个过滤器
4. 过滤器传参
5. 过滤器的兼容性

品牌列表案例

Vue----品牌列表案例

Vue组件基础

单页面应用程序

Vue----单页面应用程序

1. 什么是单页面应用程序
2. 单页面应用程序的特点
3. 单页面应用程序的优缺点
4. 如何快速创建 vue 的 SPA 项目

vite 的基本使用

Vue----vite 的基本使用

1. 创建 vite 的项目
2. 梳理项目的结构
3. vite 项目的运行流程

组件化开发思想

1 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

例如：http://www.ibootstrap.cn/ 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的
方式，快速生成一个页面的布局结构。

2 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面：

提高了前端代码的复用性和灵活性
提升了开发效率和后期的可维护性

3 vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的构成

Vue----vue 组件的构成

1. vue 组件组成结构
2. 组件的 template 节点
3. 组件的 script 节点
4. 组件的 style 节点

组件注册

Vue----组件注册

1. 注册组件的两种方式
2. 全局注册组件
3. 使用全局注册组件
4. 局部注册组件
5. 全局注册和局部注册的区别
6. 组件注册时名称的大小写
7. 通过 name 属性注册组件

组件间的样式冲突

Vue----组件间的样式冲突

1. 如何解决组件样式冲突的问题
2. style 节点的 scoped 属性
3. /deep/ 样式穿透

props

Vue----props

1. 组件的 props
2. 在组件中声明 props
3. 无法使用未声明的 props
4. props 的大小写命名

Class 与 Style 绑定

Vue----Class 与 Style 绑定

1. 动态绑定 HTML 的 class
2. 以数组语法绑定 HTML 的 class
3. 以对象语法绑定 HTML 的 class
4. 以对象语法绑定内联的 style

props 验证

Vue----props 验证

1. props 验证
2. 对象类型的 props 节点
3. props 验证
4. 基础的类型检查
5. 多个可能的类型
6. 必填项校验
7. 属性默认值
8. 自定义验证函数

计算属性

Vue----计算属性

1. 计算属性
2. 声明计算属性
3. 计算属性的使用注意点
4. 计算属性 与 方法

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 地址对应的组件渲染都浏览器中

组件的占位符。
通过 标签的 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. 把组件的导入和注册封装为独立的模块