循序渐进VUE.JS 3.X前端开发实战

目 录 第1章　从前端基础到Vue.js 31 1.1 前端技术演进1 1.2 HTML入门2 1.2.1 准备开发工具3 1.2.2 HTML中的基础标签5 1.3 CSS入门7 1.3.1 CSS选择器入门8 1.3.2 CSS样式入门10 1.4 JavaScript入门13 1.4.1 为什么需要JavaScript13 1.4.2 JavaScript语法简介15 1.5 渐进式开发框架Vue17 1.5.1 **个Vue应用17 1.5.2 范例演练：实现一个简单的用户登录页面19 1.5.3 Vue 3的新特性21 1.5.4 为什么要使用Vue框架22 1.6 小结与练习23 第2章　Vue模板应用24 2.1 模板基础24 2.1.1 模板插值25 2.1.2 模板指令28 2.2 条件渲染29 2.2.1 使用v-if指令进行条件渲染30 2.2.2 使用v-show指令进行条件渲染32 2.3 循环渲染33 2.3.1 v-for指令的使用方法33 2.3.2 v-for指令的高级用法36 2.4 范例演练：实现待办任务列表应用38 2.4.1 步骤一：使用HTML搭建应用框架结构38 2.4.2 步骤二：实现待办任务列表的逻辑开发39 2.5 小结与练习40 第3章　Vue组件的属性和方法41 3.1 属性与方法基础41 3.1.1 属性基础42 3.1.2 方法基础42 3.2 计算属性和侦听器43 3.2.1 计算属性43 3.2.2 使用计算属性还是函数44 3.2.3 计算属性的赋值45 3.2.4 属性侦听器46 3.3 进行函数限流48 3.3.1 手动实现一个简易的限流函数48 3.3.2 使用Lodash库进行函数限流50 3.4 表单数据的双向绑定50 3.4.1 文本输入框50 3.4.2 多行文本输入区域51 3.4.3 复选框与单选框52 3.4.4 选择列表53 3.4.5 两个常用的修饰符53 3.5 样式绑定54 3.5.1 为HTML标签绑定class属性54 3.5.2 绑定内联样式56 3.6 范例演练：实现一个功能完整的用户注册页面57 3.6.1 步骤一：搭建用户注册页面57 3.6.2 步骤二：实现注册页面的用户交互60 3.7 小结与练习62 第4章　处理用户交互63 4.1 事件的监听与处理63 4.1.1 事件监听示例63 4.1.2 多事件处理65 4.1.3 事件修饰符66 4.2 Vue中的事件类型68 4.2.1 常用事件类型68 4.2.2 按键修饰符70 4.3 范例演练：随鼠标移动的小球72 4.4 范例演练：弹球游戏74 4.5 小结与练习77 第5章　组件基础79 5.1 Vue应用与组件79 5.1.1 Vue应用的数据配置选项79 5.1.2 定义组件81 5.2 组件中数据与事件的传递82 5.2.1 为组件添加外部属性83 5.2.2 处理组件事件84 5.2.3 在组件上使用v-model指令85 5.3 自定义组件的插槽88 5.3.1 组件插槽的基本用法88 5.3.2 多具名插槽的用法90 5.4 动态组件的简单应用91 5.5 范例演练：开发一款小巧的开关按钮组件93 5.6 小结与练习95 第6章　组件进阶97 6.1 组件的生命周期与高级配置97 6.1.1 生命周期方法98 6.1.2 应用的全局配置选项101 6.1.3 组件的注册方式102 6.2 组件props属性的高级用法103 6.2.1 对props属性进行验证103 6.2.2 props的只读性质106 6.2.3 组件数据注入107 6.3 组件Mixin技术110 6.3.1 使用Mixin来定义组件110 6.3.2 Mixin选项的合并112 6.3.3 进行全局Mixin113 6.4 使用自定义指令114 6.4.1 认识自定义指令114 6.4.2 自定义指令的参数115 6.5 组件的Teleport功能116 6.6 小结与练习118 第7章　Vue响应式编程119 7.1 响应式编程的原理与在Vue中的应用119 7.1.1 手动追踪变量的变化119 7.1.2 Vue中的响应式对象122 7.1.3 独立的响应式值Ref的应用124 7.2 响应式的计算与监听126 7.2.1 关于计算变量126 7.2.2 监听响应式变量128 7.3 组合式API的应用130 7.3.1 关于setup方法130 7.3.2 在setup方法中定义生命周期行为132 7.4 范例演练：实现支持搜索和筛选的用户列表133 7.4.1 常规风格的示例工程开发133 7.4.2 使用组合式API重构用户列表页面136 7.5 小结与练习139 第8章　动画140 8.1 使用CSS3创建动画140 8.1.1 transition过渡动画140 8.1.2 keyframes动画142 8.2 使用JavaScript的方式实现动画效果144 8.3 Vue过渡动画145 8.3.1 定义过渡动画145 8.3.2 设置动画过程中的监听回调149 8.3.3 多个组件的过渡动画150 8.3.4 列表过渡动画152 8.4 范例演练：优化用户列表页面154 8.5 小结与练习155 第9章　Vue CLI工具的使用156 9.1 Vue CLI工具入门156 9.1.1 Vue CLI工具的安装156 9.1.2 快速创建项目158 9.2 Vue CLI项目模板工程160 9.2.1 模板工程的目录结构160 9.2.2 运行Vue项目工程164 9.3 在项目中使用依赖165 9.4 工程构建167 9.5 新一代前端构建工具Vite168 9.5.1 Vite与Vue CLI168 9.5.2 体验Vite构建工具169 9.6 小结与练习170 第10章　Element Plus 基于Vue 3的UI组件库171 10.1 Element Plus入门171 10.1.1 Element Plus的安装与使用172 10.1.2 按钮组件174 10.1.3 标签组件177 10.1.4 空态图与加载占位图组件179 10.1.5 图片与头像组件183 10.2 表单类组件184 10.2.1 单选框与多选框184 10.2.2 标准输入框组件186 10.2.3 带推荐列表的输入框组件188 10.2.4 数字输入框190 10.2.5 选择列表191 10.2.6 多级列表组件194 10.3 开关与滑块组件196 10.3.1 开关组件196 10.3.2 滑块组件197 10.4 选择器组件199 10.4.1 时间选择器199 10.4.2 日期选择器201 10.4.3 颜色选择器202 10.5 提示类组件203 10.5.1 警告组件203 10.5.2 消息提示204 10.5.3 通知组件205 10.6 数据承载相关组件206 10.6.1 表格组件206 10.6.2 导航菜单组件209 10.6.3 标签页组件211 10.6.4 抽屉组件212 10.6.5 布局容器组件213 10.7 实战：教务系统学生表214 10.8 小结与练习218 第11章　基于Vue的网络框架vue-axios的应用219 11.1 使用vue-axios请求天气数据219 11.1.1 使用互联网上免费的数据服务219 11.1.2 使用vue-axios进行数据请求221 11.2 vue-axios实用功能介绍224 11.2.1 通过配置的方式进行数据请求224 11.2.2 请求的配置与响应数据结构225 11.2.3 拦截器的使用226 11.3 范例演练：天气预报应用227 11.3.1 搭建页面框架227 11.3.2 实现天气预报应用的核心逻辑230 11.4 小结与练习231 第12章　Vue路由管理232 12.1 Vue Router的安装与简单使用232 12.1.1 Vue Router的安装233 12.1.2 一个简单的Vue Router的使用示例233 12.2 带参数的动态路由235 12.2.1 路由参数匹配235 12.2.2 路由匹配的语法规则237 12.2.3 路由的嵌套239 12.3 页面导航240 12.3.1 使用路由方法240 12.3.2 导航历史控制242 12.4 关于路由的命名242 12.4.1 使用名称进行路由切换243 12.4.2 路由视图命名243 12.4.3 使用别名244 12.4.4 路由重定向245 12.5 关于路由传参246 12.6 路由导航守卫247 12.6.1 定义全局的导航守卫247 12.6.2 为特定的路由注册导航守卫248 12.7 动态路由250 12.8 小结与练习252 第13章　Vue状态管理253 13.1 认识Vuex框架253 13.1.1 关于状态管理253 13.1.2 安装与体验Vuex255 13.2 Vuex中的一些核心概念258 13.2.1 Vuex中的状态state258 13.2.2 Vuex中的Getter方法259 13.2.3 Vuex中的Mutation261 13.2.4 Vuex中的Action262 13.2.5 Vuex中的Module263 13.3 小结与练习266 第14章　实战项目：开发一个学习笔记网站267 14.1 网站框架的搭建267 14.2 配置专题与文章目录272 14.3 渲染文章笔记内容275 14.4 小结与练习279 第15章　实战项目：电商后台管理系统实战280 15.1 用户登录模块开发280 15.1.1 项目搭建280 15.1.2 用户登录页面开发283 15.2 项目主页搭建286 15.2.1 主页框架搭建286 15.2.2 完善注销功能289 15.3 订单管理模块开发290 15.3.1 使用Mock.js进行模拟数据的生成290 15.3.2 编写工具类与全局样式291 15.3.3 完善订单管理页面292 15.4 商品管理模块的开发298 15.4.1 商品管理列表页的开发298 15.4.2 新增商品之基础配置303 15.4.3 新增商品之价格和库存配置306 15.4.4 新增商品之详情设置309 15.4.5 添加商品分类311 15.5 店长管理模块的开发313 15.5.1 店长列表开发313 15.5.2 店长审批列表与店长订单316 15.6 财务管理与数据统计功能模块开发317 15.6.1 交易明细与财务对账单318 15.6.2 数据统计模块开发319 15.7 小结与练习323