创建Application组件_德国Vue.js2终极开发教程（含Vue路由和Vuex）-CSDN在线视频培训

课程目录

讨论留言

从头开始
- 课程介绍
- 实现第一个VueJS应用
- 扩展这个VueJS应用
- 课程结构
- 擅用课程资源
- 本地配置VueJS开发环境&本章代码及资料
通过VueJS来与DOM交互
- 本章介绍
- 理解VueJS模板
- VueJS的模板语法和实例
- 访问Vue实例里的数据
- 属性绑定
- 理解和使用指令
- 用v-once禁止二次渲染
- 如何输出基础的HTML
- 作业1问题：输出数据到模板
- 作业1答案：输出数据到模板
- 监听事件
- 从事件对象里获取事件数据
- 传递你自己的事件参数
- 用事件修饰符来修改事件
- 监听键盘事件
- 作业2问题：事件
- 作业2答案：事件
- 在模板中编写JS代码
- 使用双向绑定
- 用计算属性来响应改变
- 计算属性的替代：观察改变
- 用缩写来节省时间
- 作业3问题：响应式属性
- 作业3答案：响应式属性
- CSS类动态样式-基础
- CSS类动态样式-使用对象
- CSS类动态样式-使用命名
- 动态设置样式（不使用CSS类）
- 用数组语法设置元素样式
- 作业4问题：样式设置
- 作业4答案：样式设置
- 本章总结&第二章资料
使用条件和列表渲染
- 用v-for来渲染列表
- 本章介绍
- 用v-if来做条件渲染
- 替代v-if语法
- 不要用v-show解绑
- 获取当前的下标
- 替代v-for语法
- 循环一组对象
- 循环一组数字列表
- 用v-for来跟踪对象
- 作业5问题：条件和列表
- 作业5答案：条件和列表
- 本章总结
第一个实训项目：怪物猎人
- 介绍和挑战
- 搭建工程
- 创建Vue实例以及给血槽加样式
- 根据条件来显示玩家操作
- 实现“开始游戏”方法
- 实现“攻击”方法
- 重构时间到！更好的代码
- 实现“特殊攻击”方法
- 实现“疗愈”方法
- 完成操作按钮
- 创建操作日志
- 打印日志（v-for）
- 完成日志功能
- 根据条件来调整日志样式
- 总结
理解VueJS实例
- 本章简介
- 关于Vue实例的一些基础
- 使用多个Vue 实例
- 从外部访问Vue实例
- Vue是如何管理数据和方法的
- 深入分析$el和$data
- 在你的模板中使用$refs
- 去哪里可以学到更多的Vue API
- 挂载一个模板
- 使用组件
- 一些模板的限制
- Vue是怎样更新DOM的
- Vue实例的生命周期
- Vue实例生命周期实战
- 本章总结
Webpack和Vue命令行，真实的开发流程
- 本章介绍
- 为什么我们要有开发服务器
- “开发流程”指的是什么？
- 使用Vue命令行来创建项目
- Vue命令行安装以及创建一个新项目
- Webpack模板目录结构概述
- 理解“.vue”后缀的文件
- 理解Vue文件中的对象
- 如何构建一个真正的可发布应用
- 本章总结
组件介绍
- 本章介绍
- 组件介绍
- 使用数据方法来向组件中保存数据
- 将组件注册到局部或全局
- 在App.vue文件中的“根组件”
- 创建一个组件
- 使用组件
- 作业6问题：组件练习
- 作业6答案：组件练习
- 采用更好的目录结构
- 怎样给组件标签命名（选择器）
- 组件样式作用域
- 本章总结
组件间通信
- 本章介绍
- 通信存在的问题
- 使用Props来让父子组件通信
- 为Props命名
- 在子组件中使用Props
- 验证Props
- 使用自定义事件来让父子组件通信
- 理解单向数据流
- 使用回调函数来通信
- 在同级组件间通信
- 使用事件总线来通信
- 在一个事件总线中集中实现代码
- 作业7问题：组件间通信
- 作业7答案：组件间通信
- 本章总结
高级组件用法
- 本章介绍
- 创建本章工程
- 非最优的传递内容方案
- 使用插槽来传递内容
- 插槽内容是如何编译和风格化的
- 使用多个插槽（命名插槽）
- 默认插槽和插槽的默认设置
- 关于插槽的总结
- 将多组件转换为动态组件
- 理解动态组件行为
- 让动态组件保活
- 动态组件生命周期钩子
- 作业8描述：插槽和动态组件
- 作业8答案：插槽和动态组件
- 本章总结
第2个实训项目：漂亮的句子
- 本章介绍
- 创建工程
- 应用初始化
- 创建Application组件
- 使用Props和插槽传递数据
- 允许用户使用NewQuote组件创建句子
- 使用自定义事件来添加引用
- 添加一个消息框
- 允许删除句子
- 通过进度条来控制句子
- 结语和状态管理
用表单出来用户输入
- 本章介绍
- 绑定表单基础标签<input>
- 分组数据和预填充输入
- 使用输入修饰符来修改用户输入
- 绑定<textarea>标签和保存换行符
- 使用复选框并将数据保存在数组中
- 使用单选按钮
- 使用<select>和<option>标签处理下拉菜单
- v-model有什么用和如何创建自定义控件
- 创建自定义控件(输入)
- 提交表单
- 作业9描述：表单练习
- 作业9解答：表单练习
- 本章总结
使用和创建指令
- 本章介绍
- 理解什么是指令
- 指令的工作原理 - 钩子函数
- 创建一个简单的指令
- 给自定义指令传值
- 给自定义指令传参
- 用修饰符来修改自定义指令
- 自定义指令总结
- 本地注册指令
- 同时使用多个修饰符
- 给指令传递多个复杂值
- 作业10指令：问题
- 作业10答案：指令
- 本章总结
使用过滤器和混入来优化程序
- 本章介绍
- 创建本地过滤器
- 全局过滤器以及如何串联多个过滤器
- 替代过滤器：计算属性
- 理解什么是混入（Mixins）
- 创建和使用混入
- 怎样合并多个混入
- 创建一种特殊的全局混入
- 混入和作用域
- 作业11描述：过滤器和混入
- 作业11答案：过滤器和混入
- 本章总结
使用动画和过渡
- 本章介绍
- 理解什么是过渡
- 为使用过渡来做代码准备
- 过渡的配置
- 为过渡分配CSS类
- 使用CSS过渡属性来创建
- 使用CSS动画属性来创建“滑动”过渡
- 混合过渡和动画两种属性
- v-if和v-show动画
- 配置初始化（加载）动画
- 使用不同的CSS类名
- 使用动态命名和属性
- 多个元素间的过渡（理论）
- 多个元素间的过渡（实践）
- 监听过渡事件的钩子
- 理解什么是JS动画
- 从动画中去掉CSS
- 在JS中创建动画
- 让动态组件做动画
- 使用transition-group标签来做列表动画
- 使用transition-group标签的准备
- 使用transition-group标签来让列表做动画
- 理解这个应用
- 创建这个应用
- 添加动画
- 本章总结
使用vue-resource通过HTTP连接服务器
- 本章介绍
- 配置：用vue-resource来访问HTTP
- 基于Firebase来创建应用和服务端
- 用POST方法给给服务端发数据
- 用GET请求来获取和转换数据
- 全局配置vue-resource
- 拦截请求
- 拦截响应
- vue-resource里的resource从哪里来
- 创建自定义的资源
- 资源vs传统HTTP请求
- 理解URL模板
- 本章总结
VueJS应用中的路由概念
- 本章介绍
- 配置VueJS路由（vue-router）
- 配置和加载路由
- 理解路由模式（哈希vs历史）
- 路由链接导航
- 我在哪儿？定义活动链接
- 通过代码导航（强制导航）
- 配置路由参数
- 获取、使用路由参数
- 响应路由参数改动
- 配置子路由（嵌套路由）
- 潜逃路由导航
- 更动态的配置路由链接
- 创建链接的更好方式 - 命名路由
- 使用查询参数
- 多路由视图（命名路由视图）
- 重定向
- 配置“Catch All”路由/通配符
- 路由动画过度
- 传递Hash Fragment
- 控制卷屏行为
- 使用守卫来保护路由
- 使用“beforeEnter”守卫
- 使用“beforeLeave”守卫
- 路由懒加载
- 本章总结
用Vuex来更好的管理状态
- 本章介绍
- 为什么要用一个不同的状态管理机制
- 理解“集中的状态”
- 使用集中状态
- 为什么集中状态自身并不能解决问题
- 理解Getter
- 使用Getter
- 将Getter映射到属性
- 理解Mutation
- 使用Mutation
- 为什么Mutation要使用同步执行模式
- Action怎么改进了Mutation
- 使用Action
- 将Action映射到方法
- Vuex总结
- 双向绑定（v-model）和Vuex
- 改进的目录结构
- 模块化状态管理
- 使用分割的文件
- 使用名字空间来避免命名冲突问题
- 本章总结
最终实训项目：股票交易
- 项目介绍
- 项目配置和规划
- 创建第一个组件
- 配置项目路由
- 添加头部和导航
- 规划下一步
- 创建股票组件
- 添加购买按钮
- 配置Vuex状态管理
- 为Vuex添加展示模块
- 实现展示用的股票
- 将展示模块连接到Vuex
- 修复一些Bug
- 显示资金
- 添加记名支票
- 使用过滤器让资金显示更好看
- 一天的结束 - 随机股票价格
- 路由过渡动画
- 保存和获取数据 - 添加下拉菜单
- 与Firebase一起配置vue-resource
- 保存数据（PUT请求）
- 获取数据（GET请求）
- 测试和修复Bug
- 项目总结
- 福利：使用Vue开发工具调试Vuex
部署VueJS应用
- 项目介绍
- 部署准备
- 部署应用（使用亚马逊AWS S3）
课程总结
- 课程总结
福利：使用Axios替代vue-resource
- 本章介绍
- 工程配置
- Axios配置
- 发送POST请求
- 发送GET请求
- 访问和使用响应数据
- 全局请求配置
- 使用拦截器
- 自定义Axios实例
- 总结
福利：Vue应用中的鉴权
- 概述
- 本章介绍
- 单页应用中鉴权工作原理
- 工程配置
- 添加用户注册
- 添加用户登录
- 使用Vuex来发送鉴权请求
- 在Vuex中保存鉴权数据
- 通过Vuex访问其它资源
- 向后台发送Token
- 路由保护（Auth Guard）
- 基于鉴权状态来更新UI状态
- 添加用户登出功能
- 添加自动登出功能
- 添加自动登录功能
- 总结
福利：表单输入验证
- 概述
- 本章介绍
- 安装Vuelidate
- 添加验证器
- 验证时添加UI反馈
- 控制错误输入的显示风格
- 更多的验证器
- 验证密码
- 使用必填验证器
- 验证数组
- 控制表单提交按钮
- 创建自定义验证器
- 异步验证器
- 本章总结

第2个实训项目：漂亮的句子

创建Application组件

课时介绍

创建Application组件-第2个实训项目：漂亮的句子德国Vue.js2终极开发教程（含Vue路由和Vuex）

课程介绍

新手入门现代前端开发的不二选择课程目标： * 学会从简单到复杂企业级应用的VueJS程序编写方法 * 能在单页和多页应用中自如使用VueJS * 真正理解VueJS的背后原理，并在真实项目中应用它们授课计划： 23章节，21小时，341个视频，11个练习，3个工程实践；新VueJS 2.x版本，课程随版本升级。