🎈 九年了,感谢大家 🎏 订阅全年送一年,续订或重订送两年。 立即订阅

Vue 3 应用开发系列课程,严重剧透!

Vue 3 发布以后,我重制了之前全系列的 Vue 课程,几乎可以覆盖 90% 你在开发复杂应用的时候需要的技术、工具、概念 ...   这是一套干系(不掺水)课程,也就是课程内容都是直击要害,用最清晰的方式展示与解释最核心的概念,尽量减小学习时的干扰,这种课程看起来不漂亮(几乎无样式),但是最有效。课程已全部录制完成,会陆续发布在宁皓网上。

现在学会使用 Vue ,除了可以开发出前端应用,还可以开发出各种平台的小程序。后面我打算再补上两节这样的课程,比如使用 uniapp 或者 Taro.js。您要有更好的选择,也欢迎您在评论区留言,制作课程的时候我会考虑加上 :)

课程安排

  1. 理解框架
  2. 定义组件
  3. 数据表单
  4. 理解组件
  5. 应用路由
  6. 状态管理
  7. 过渡动画
  8. 组合接口
  9. 网络请求
  10. 验证身份
  11. 文件上传
  12. 应用架构

理解框架

  • 整体了解一下用  Vue 框架创建的应用。
  • 准备 Vue 项目的开发环境与工具(VSCode,Git,Node,NPM,Yarn)
  • Vue CLI:项目的命令行工具
  • 用 Vue CLI 创建一个 Vue 项目
  • 运行 Vue 项目
  • 了解 Vue 项目的结构
  • 了解 Vue 应用的结构
  • 了解 Vue 应用的组件(Components)
  • 了解 Vue 应用的路由(Vue Router)
  • 了解 Vue 应用的 Store(Vuex)
  • VSCode:配置开发 Vue 应用
  • 了解如何部署 Vue 应用

定义组件

创建应用实例,了解如何定义组件,在组件模板里使用 Vue 指令。

  • 准备一个空白的 Vue 项目
  • 创建 Vue 应用实例
  • data:Vue 组件里的数据
  • created:组件的生命周期方法
  • methods:组件里的方法
  • computed:组件里的计算属性
  • watch:Vue 组件里的数据监视器
  • v-on:处理 Vue 组件里发生的的事情(事件处理)
  • v-for:在 Vue 组件里显示内容列表
  • v-if:按条件显示内容
  • 绑定 Class
  • 在 Vue 组件里导入样式表文件

数据表单

了解如何在 Vue 组件里使用各种数据表单。

  • 准备项目(forms)
  • 文本框(Text)
  • 多行文本(Textarea)
  • 复选框(Checkbox)
  • 多值复选框(Checkbox)
  • 单选按钮(Radio)
  • 选择列表(Select)
  • input 事件:元素值变化时发生的事件
  • change 事件:用户提交修改元素值时发生的事件
  • keyup 事件:按下并抬起键盘按键时发生的事件
  • 理解在表单元素上用的 v-model 指令
  • v-model 的修饰符:.lazy
  • v-model 的修饰符:.number
  • v-model 的修饰符:.trim

理解组件

深入理解 Vue 组件,传递属性,触发事件,创建使用动态组件。

  • 定义与使用 Vue 组件
  • Vue 组件的样式
  • scoped:限定组件样式的应用范围
  • props:Vue 组件的属性
  • 监听子组件的事件
  • slot:在 Vue 组件里用插槽分发内容
  • 动态组件(Dynamic Components)
  • keep-alive:保持动态组件的活动状态
  • $refs:引用模板
  • 在自定义组件上使用 v-model
  • Vue 组件的生命周期方法

应用路由

学会如何创建路由器,定义路由,访问路由地址,显示对应的 Vue 组件。

  • VSCode:选择代码格式化工具
  • 创建 Vue 应用的路由器
  • 定义 Vue 应用的路由
  • router-link:路由链接
  • 用代码切换路由地址($router.push 与 $router.replace)
  • 给路由起个名字
  • 重定向(Redirect)
  • 路由模块
  • 动态路由(带地址参数的路由)
  • 嵌套路由(Nested Routes)
  • 给路由组件传递属性
  • 导航守卫(Navigation Guards)
  • 路由元数据字段(meta)

状态管理

复杂的前端应用需要一套管理应用状态的方案,我们要学会的是基于官方提供的 Vuex 管理应用的状态。

  • 在 Vue 应用里创建与使用 Store
  • State:数据
  • mapState
  • Getters:获取器
  • Mutations:修改器
  • mapMutations
  • Actions:动作
  • mapActions
  • 动作的 Context 参数
  • 实践:加载状态
  • modules:Vuex Store 模块
  • namespaced:Vuex Store 模块的命名空间
  • 创建与使用 Vuex Store 插件

过渡动画

组件元素进入与离开的时候,切换显示组件的时候,数组状态发生变化的时候,可以应用一种过渡与动画效果。

  • 准备一个演示组件
  • 基于 Class 的过渡
  • 基于 Class 的动画
  • transition:进入与离开过渡
  • transition:指定过渡效果的名字
  • transition:进入与离开动画
  • transition:自定义过渡类
  • 组件之间的过渡
  • 列表的过渡与动画
  • 状态的过渡

组合接口

组合式接口是 Vue 3 提供的一套新的创建组件的方法,理解一下 Vue 的反应系统与组合接口。

  • JavaScript:Proxy 与 Reflect
  • 理解 Vue 的反应系统
  • Composition API:组合式接口
  • 声明具有反应特性的数据(ref)
  • 声明具有反应特性的数据(reactive)
  • 解构反应数据(toRefs)
  • 组合式接口:提供组件方法
  • 组合式接口:生命周期方法
  • 组合式接口:监视数据(watch)
  • 组合式接口:计算属性(computed)
  • setup:组合式接口的入口

网络请求

Vue 应用里需要的数据可以请求服务端接口获取到,也可以把用户在应用上生产的数据发送给服务端应用。

  • 准备服务端应用接口
  • 解决服务端跨域资源共享问题(CORS)
  • 安装与使用 HTTP 客户端请求服务端接口(axios)
  • 处理在 Vue 应用里使用 axios 发送请求时发生的错误
  • 使用 async await 处理 axios 请求
  • axios 请求的配置
  • 修改 axios 默认的请求配置
  • axios 的请求与响应的拦截器(Interceptors)
  • 创建与使用 axios 实例
  • 发送 POST 类型的 HTTP 请求
  • 在请求里配置头部数据
  • 发送 PATCH _ PUT 类型的 HTTP 请求(修改内容)
  • 发送 DELETE 类型的 HTTP 请求(删除内容)

验证身份

实现基于 JWT(JSON Web Token) 的用户身份验证。

  • 理解用户登录与验证用户身份
  • 创建用户登录组件
  • 请求用户登录接口
  • 处理用户登录
  • 获取当前用户数据
  • 在 Vue 应用里记住用户的登录状态
  • 退出登录

文件上传

把用户选择的文件上传到服务端应用。

  • 选择文件用的文件字段
  • 使用 FileReader 生成预览图像
  • 请求上传文件
  • 显示文件上传进度
  • 使用拖拽的方式选择要上传的文件(dragover, drop)
  • 切换拖放文件时的激活状态

应用架构

学会一套能应对复杂应用的结构,你可以基于这套应用结构开发出相对复杂的前端应用。

  • 应用的数据管理(Vuex):创建与使用 Store
  • 应用的数据管理(Vuex):定义使用 Store 模块
  • 应用的数据管理(Vuex):解决 Store 模块的类型问题
  • 应用的路由:Vue Router
  • HTTP 客户端(axios):请求服务端应用接口
  • Vue 应用的环境变量配置
  • 在 Vue 应用里定义与使用组件
  • 在 Vue 组件内部请求服务接口获取组件需要的数据
  • 在 Vue 组件里使用 Store 里的动作与数据
  • 内容页面:定义 Store 模块
  • 内容页面:定义路由与组件
  • Mixin:制作一个设置页面标题的混合

课程地址

https://ninghao.net/package/vuejs-javascript-framework

宁皓网 9 周年,真的很感谢您,现在订阅全年多送一年,续订或重订多送两年马上订阅



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点