课程简介
本课程是完整的Vue.js前端开发体系化教程,涵盖Vue.js基础语法、组件化开发、Vue Router路由管理、Vuex状态管理、项目实战等核心技术。课程通过14天的系统学习,从Vue.js基础概念到企业级项目开发,帮助学员掌握现代前端开发必备技能。技术栈包括Vue.js、Vue CLI、Vue Router、Vuex、Axios、Webpack等,配套完整课件、代码示例和项目实战。学员将学会构建单页面应用、组件化开发、状态管理、路由配置等核心能力,具备独立开发Vue.js项目的能力。
下载地址
课程目录
01 Vue基础与插值操作
第1-22节:Vue安装、MVVM、生命周期、插值语法、动态绑定等基础概念。
02 计算属性与事件处理
第1-22节:计算属性、事件修饰符、条件渲染、列表渲染及购物车案例。
03 表单绑定与组件化
第1-19节:v-model原理、表单处理、组件注册、父子通信等组件化内容。
04 组件通信与模块化
第1-16节:父子组件通信、插槽使用、前端模块化及webpack基础配置。
05 Webpack与Vue CLI
第1-15节:webpack插件、Vue配置、CLI2项目创建及目录结构解析。
06 前端路由与Vue Router
第1-13节:路由原理、Vue Router配置、路由懒加载及导航守卫。
07 路由进阶与状态管理
第1-17节:路由参数传递、keep-alive、TabBar封装及Vuex基础概念。
08 Promise与Vuex进阶
第1-17节:Promise使用、Vuex状态管理、mutations、actions及模块化。
09 项目搭建与网络请求
第1-17节:axios封装、目录结构、TabBar引入及首页数据请求。
10 首页开发与滚动优化
第1-13节:首页组件封装、Better-Scroll使用、上拉加载及BackTop功能。
11 详情页开发与状态管理
第1-17节:详情页导航、数据展示、滚动优化及Vuex状态保存。
12 详情页功能完善
第1-15节:详情页数据展示、滚动联动、商品推荐及全局事件混合。
13 购物车与项目优化
第1-16节:购物车功能、Vuex重构、滚动优化及详情页交互完善。
14 项目部署与原理回顾
第1-14节:购物车全选、Toast封装、懒加载、部署及Vue原理回顾。
--- 点击展开详细目录 ---Day 01
上课画图
导出视频
-
🎬 01-(了解)Vuejs课程介绍.mp4
-
🎬 02-(理解)Vuejs的认识和特点介绍.mp4
-
🎬 03-(掌握)vuejs安装方式.mp4
-
🎬 04-(掌握)HelloVuejs的初体验.mp4
-
🎬 05-(掌握)Vue列表的展示.mp4
-
🎬 06-(掌握)小案例-计数器.mp4
-
🎬 07-(理解)Vue的mvvm.mp4
-
🎬 08-(理解)Vue的options选项.mp4
-
🎬 09-(理解)什么是Vue的生命周期.mp4
-
🎬 10-(理解)Vue的生命周期函数有哪些.mp4
-
🎬 11-(了解)定义vue的template.mp4
-
🎬 12-(掌握)插值操作-mustache语法.mp4
-
🎬 13-(掌握)插值操作-其他指令使用.mp4
-
🎬 14-(掌握)v-bind的基本使用.mp4
-
🎬 15-(掌握)v-bind动态绑定class(对象语法).mp4
-
🎬 16-(了解)v-bind动态绑定class(数组语法).mp4
-
🎬 17-(完成)v-bind和v-for结合的作业布置.mp4
-
🎬 18-(掌握)v-bind动态绑定style(对象语法).mp4
-
🎬 19-(了解)v-bind动态绑定style(数组语法).mp4
-
🎬 20-(掌握)计算属性的基本使用.mp4
-
🎬 21-(掌握)计算属性的复杂操作.mp4
-
🎬 22-(了解)课堂回顾.mp4
-
📦 PPT.zip
-
📦 Xmind.zip
-
📦 文本笔记.zip
-
📦 课堂代码.zip
-
📦 预习代码.zip
Day 02
高清视频
-
🎬 01-(理解)计算属性setter和getter.mp4
-
🎬 02-(掌握)计算属性和methods的对比.mp4
-
🎬 03-(掌握)块级作用域-let和var.mp4
-
🎬 04-(理解)三种方案对比-ES5没有闭包-有闭包-ES6的let.mp4
-
🎬 05-(掌握)const的使用和注意点.mp4
-
🎬 06-(掌握)ES6对象字面量增强写法.mp4
-
🎬 08-(掌握)v-on的基本使用和语法糖.mp4
-
🎬 09-(掌握)v-on的参数传递问题.mp4
-
🎬 10-(掌握)v-on的修饰符使用.mp4
-
🎬 11-(掌握)v-if和v-else-if和v-else的使用.mp4
-
🎬 12-(掌握)登录切换的小案例.mp4
-
🎬 13-(理解)登录切换的input复用问题.mp4
-
🎬 14-(掌握)v-show的使用以及和v-if的区别.mp4
-
🎬 15-(掌握)v-for遍历数组和对象.mp4
-
🎬 16-(理解)v-for-绑定和非绑定key的区别.mp4
-
🎬 17-(掌握)数组中哪些方法是响应式的.mp4
-
🎬 18-(掌握)作业的回顾和实现.mp4
-
🎬 19-(掌握)购物车案例-界面搭建.mp4
-
🎬 20-(掌握)购物车案例-过滤器的使用.mp4
-
🎬 21-(掌握)购物车案例-改变购买数量.mp4
-
🎬 22-(掌握)购物车案例-移除按钮-最终价格.mp4
-
📦 PPT.zip
-
📦 Xmind.zip
-
📦 上课画图.zip
-
📦 课堂代码.zip
-
📦 预习代码.zip
Day 03
day03高清视频
-
🎬 01-(掌握)JavaScript高阶函数的使用.mp4
-
🎬 02-(掌握)v-model的使用和原理.mp4
-
🎬 03-(掌握)v-model结合radio类型使用.mp4
-
🎬 04-(掌握)v-model结合checkbox类型使用.mp4
-
🎬 05-(掌握)v-model结合select类型使用.mp4
-
🎬 06-(掌握)input中的值绑定.mp4
-
🎬 07-(掌握)v-model修饰符的使用.mp4
-
🎬 08-(掌握)组件化的实现和使用步骤.mp4
-
🎬 09-(掌握)组件化的基本使用过程.mp4
-
🎬 10-(掌握)全局组件和局部组件.mp4
-
🎬 11-(掌握)父组件和子组件的区分.mp4
-
🎬 12-(掌握)注册组件的语法糖写法.mp4
-
🎬 13-(掌握)组件模板抽离的写法.mp4
-
🎬 14-(理解)为什么组件data必须是函数.mp4
-
🎬 15-(掌握)父子组件通信-父传子props.mp4
-
🎬 16-(掌握)父子组件通信-props驼峰标识.mp4
-
🎬 17-(掌握)父子组件通信-子传父(自定义事件).mp4
-
🎬 18-(了解)项目演示.mp4
-
🎬 19-(了解)知识回顾.mp4
-
📦 PPT.zip
-
📦 课堂代码.zip
-
📦 课堂笔记.zip
-
📦 预习代码.zip
Day 04
day04高清视频
-
🎬 01-(掌握)父子组件通信-结合双向绑定案例.mp4
-
🎬 02-(掌握)结合双向绑定案例-画图分析.mp4
-
🎬 03-(了解)结合双向绑定案例-watch实现.mp4
-
🎬 04-(掌握)父访问子-children-refs.mp4
-
🎬 05-(理解)子访问父-parent-root.mp4
-
🎬 06-(掌握)slot-插槽的基本使用.mp4
-
🎬 07-(掌握)slot-具名插槽的使用.mp4
-
🎬 08-(理解)编译作用域的概念.mp4
-
🎬 09-(掌握)作用域插槽的使用.mp4
-
🎬 10-(理解)前端代码复杂带来的问题.mp4
-
🎬 11-(理解)前端模块化雏形和CommonJS.mp4
-
🎬 12-(掌握)ES模块化的导入和导出.mp4
-
🎬 13-(理解)webpack的介绍和安装.mp4
-
🎬 14-(掌握)webpack的基本使用过程.mp4
-
🎬 15-(掌握)webpack.config.js配置和package.json配置.mp4
-
🎬 16-(掌握)webpack中使用css文件的配置.mp4
-
📦 PPT.zip
-
📦 上课画图.zip
-
📦 上课笔记.zip
-
📦 课堂代码4.zip
-
📦 预习代码.zip
Day 05
day05高清视频
- 🎬 01-(掌握)webpack-less文件的处理.mp4
- 🎬 02-(掌握)webpack-图片文件的处理.mp4
- 🎬 03-(掌握)webpack-ES6转ES5的babel.mp4
- 🎬 04-(掌握)webpack-使用Vue的配置过程.mp4
- 🎬 05-(掌握)创建Vue时template和el关系.mp4
- 🎬 06-(掌握)Vue的终极使用方案.mp4
- 🎬 07-(掌握)webpack-横幅Plugin的使用.mp4
- 🎬 08-(掌握)webpack-HtmlWebpackPlugin的使用.mp4
- 🎬 09-(掌握)webpack-UglifyjsWebpackPlugin的使用.mp4
- 🎬 10-(掌握)webpack-dev-server搭建本地服务器.mp4
- 🎬 11-(掌握)webpack-配置文件的分离.mp4
- 🎬 12-(理解)vuecli-脚手架的介绍和安装.mp4
- 🎬 13-(掌握)vuecli-CLI2初始化项目过程.mp4
- 🎬 14-(理解)vuecli-CLI2的目录结构解析.mp4
- 🎬 15-(了解)知识回顾.mp4
PPT
课堂随笔
Day 06
day06高清视频
- 🎬 01-(掌握)安装CLI错误和ESLint规范.mp4
- 🎬 02-(理解)runtime-compiler和runtime-only的区别.mp4
- 🎬 03-(掌握)VueCLI3创建项目和目录结构.mp4
- 🎬 04-(掌握)VueCLI3配置文件的查看和修改.mp4
- 🎬 05-(掌握)箭头函数的使用和this指向.mp4
- 🎬 06-(理解)什么是路由和其中映射关系.mp4
- 🎬 07-(理解)前端渲染后端渲染和前端路由后端路由.mp4
- 🎬 08-(掌握)url的hash和HTML5的history.mp4
- 🎬 09-(掌握)vue-router-安装和配置方式.mp4
- 🎬 10-(掌握)路由映射配置和呈现出来.mp4
- 🎬 11-(掌握)路由的默认值和修改为history模式.mp4
- 🎬 12-(掌握)router-link的其他属性补充.mp4
- 🎬 13-(掌握)通过代码跳转路由.mp4
PPT
上课画图
课堂随笔
Day 07
PPT
知识回顾
高清视频
-
🎬 01-(掌握)vue-router-动态路由的使用.mp4
-
🎬 02-(掌握)vue-router-打包文件的解析.mp4
-
🎬 03-(掌握)vue-router-路由懒加载的使用.mp4
-
🎬 04-(掌握)vue-router-路由的嵌套使用.mp4
-
🎬 05-(掌握)vue-router-参数传递(一).mp4
-
🎬 06-(掌握)vue-router-参数传递(二).mp4
-
🎬 07-(理解)vue-router-router和route的由来.mp4
-
🎬 08-(掌握)vue-router-全局导航守卫.mp4
-
🎬 09-(理解)vue-router-导航守卫的补充.mp4
-
🎬 10-(掌握)vue-router-keep-alive及其他问题.mp4
-
🎬 11-(掌握)vue-router-keep-alive属性介绍.mp4
-
🎬 12-(掌握)tabbar-基本结构的搭建.mp4
-
🎬 13-(掌握)tabbar-TabBar和TabBarItem组件封装.mp4
-
🎬 14-(掌握)tabbar-给TabBarItem传入active图片.mp4
-
🎬 15-(掌握)tabbar-TabBarItem和路由结合效果.mp4
-
🎬 16-(掌握)tabbar-TabBarItem的颜色动态控制.mp4
-
🎬 17-(了解)知识回顾.mp4
-
📦 上课代码.zip
Day 08
PPT
上课随笔
课堂画图
高清视频
-
🎬 01-(掌握)tabbar-文件路径的引用问题.mp4
-
🎬 02-(掌握)Promise-Promise的介绍和基本使用.mp4
-
🎬 03-(掌握)Promise-Promise的三种状态和另外处理方式.mp4
-
🎬 04-(掌握)Promise-Promise的链式调用.mp4
-
🎬 05-(掌握)Promise-Promise的all方法使用.mp4
-
🎬 06-(掌握)vuex-Vuex概念和作用解析.mp4
-
🎬 07-(掌握)vuex-单界面到多界面状态管理切换.mp4
-
🎬 08-(掌握)vuex-devtools和mutations.mp4
-
🎬 09-(掌握)vuex-state单一状态树的理解.mp4
-
🎬 10-(掌握)vuex-getters的使用详解.mp4
-
🎬 11-(掌握)vuex-mutations的携带参数.mp4
-
🎬 12-(掌握)vuex-mutations的提交风格.mp4
-
🎬 13-(掌握)vuex-数据的响应式原理.mp4
-
🎬 14-(掌握)vuex-mutations的类型常量.mp4
-
🎬 15-(掌握)vuex-actions的使用详解.mp4
-
🎬 16-(掌握)vuex-modules的使用详解.mp4
-
🎬 17-(掌握)vuex-store文件夹的目录组织.mp4
-
📦 上课代码.zip
-
📦 预习代码.zip
Day 09
PPT
课堂随笔
高清视频
-
🎬 01-(了解)网络请求模块的选择-axios.mp4
-
🎬 02-(掌握)axios框架的基本使用.mp4
-
🎬 03-(掌握)axios发送并发请求.mp4
-
🎬 04-(掌握)axios的配置信息相关.mp4
-
🎬 05-(掌握)axios的实例和模块封装.mp4
-
🎬 06-(掌握)axios的拦截器的使用.mp4
-
🎬 07-(掌握)项目开发-项目创建和GitHub托管.mp4
-
🎬 08-(掌握)项目开发-划分目录结构.mp4
-
🎬 09-(掌握)项目开发-css文件的引入.mp4
-
🎬 10-(掌握)项目开发-vue.config和editorconfig.mp4
-
🎬 11-(掌握)项目开发-tabbar引入和项目模块划分.mp4
-
🎬 12-(理解)项目开发-小图标的修改以及路径问题.mp4
-
🎬 13-(掌握)首页开发-首页导航栏的封装和使用.mp4
-
🎬 14-(掌握)首页开发-请求首页的多个数据.mp4
-
🎬 15-(掌握)首页开发-轮播图的展示.mp4
-
🎬 16-(掌握)首页开发-推荐信息的展示.mp4
-
🎬 17-(了解)知识回顾.mp4
-
📦 课堂代码.zip
-
📦 预习代码.zip
Day 10
上课随笔
高清视频
- 🎬 01-(掌握)首页开发-FeatureView的封装.mp4
- 🎬 02-(掌握)首页开发-TabControl的封装.mp4
- 🎬 03-(掌握)首页开发-保存商品的数据结构设计.mp4
- 🎬 04-(掌握)首页开发-首页数据的请求和保存.mp4
- 🎬 05-(掌握)首页开发-首页商品数据的展示.mp4
- 🎬 06-(掌握)首页开发-TabControl点击切换商品.mp4
- 🎬 07-(掌握)Better-Scroll的安装和使用.mp4
- 🎬 08-(掌握)Better-scroll的基本使用解析.mp4
- 🎬 09-(掌握)Better-Scroll在Vue项目中使用过程.mp4
- 🎬 10-(掌握)首页开发-BScroll的封装以及使用.mp4
- 🎬 11-(掌握)首页开发-BackTop组件的封装和使用.mp4
- 🎬 12-(掌握)首页开发-BackTop的显示和隐藏.mp4
- 🎬 13-(掌握)首页开发-完成上拉加载更多.mp4
Day 11
上课画图
上课笔记
高清视频
-
🎬 01-(掌握)对昨天内容的回顾.mp4
-
🎬 02-(掌握)首页开发-滚动区域的Bug分析和解决.mp4
-
🎬 03-(掌握)refresh函数找不到的bug处理.mp4
-
🎬 04-(掌握)刷新频繁的防抖函数处理.mp4
-
🎬 05-(掌握)上拉加载更多的完成.mp4
-
🎬 06-(掌握)tabControl的offsetTop获取分析.mp4
-
🎬 07-(掌握)TabControl的吸顶效果完成.mp4
-
🎬 08-(掌握)Home离开时记录状态和位置.mp4
-
🎬 09-(掌握)跳转到详情页并且携带iid.mp4
-
🎬 10-(掌握)详情页-导航栏的封装.mp4
-
🎬 11-(掌握)详情页-数据请求以及轮播图展示.mp4
-
🎬 12-(掌握)详情页-商品基本信息的展示.mp4
-
🎬 13-(掌握)详情页-店铺信息的解析和展示.mp4
-
🎬 14-(掌握)详情页-加入滚动的效果Scroll.mp4
-
🎬 15-(掌握)详情页-商品详情数据展示.mp4
-
🎬 16-(掌握)详情页-商品参数信息的展示.mp4
-
🎬 17-(了解)内容的回顾.mp4
-
📦 课堂代码.zip
Day12
高清视频
- 🎬 01-(掌握)详情页-从首页跳转详情页-iid.mp4
- 🎬 02-(掌握)详情页-首页位置的保持.mp4
- 🎬 03-(掌握)详情页-详情页导航栏的实现.mp4
- 🎬 04-(理解)Better-Scroll的scrollto函数的Bug.mp4
- 🎬 05-(掌握)详情页-根据iid详情页数据的请求.mp4
- 🎬 06-(掌握)详情页-顶部轮播图的展示.mp4
- 🎬 07-(掌握)详情页-商品的基本信息展示.mp4
- 🎬 08-(掌握)详情页-滚动问题处理和TabBar隐藏.mp4
- 🎬 09-(掌握)详情页-详情页店铺信息展示.mp4
- 🎬 10-(掌握)详情页-详情页商品图片信息展示.mp4
- 🎬 11-(掌握)详情页-商品参数信息的展示.mp4
- 🎬 12-(掌握)详情页-商品评论信息的展示.mp4
- 🎬 13-(掌握)详情页-商品推荐数据的展示.mp4
- 🎬 14-(掌握)详情页-首页和详情页监听全局事件和mixin的使用.mp4
- 🎬 15-(了解)课堂内容回顾.mp4
Day13
- 🎬 01-(掌握)bug处理-首页TabControl不一致的问题.mp4
- 🎬 02-(掌握)bug处理-详情页不能滚动的bug处理.mp4
- 🎬 03-(掌握)详情页-点击标题滚到对应内容.mp4
- 🎬 04-(掌握)详情页-滚动内容显示对应标题.mp4
- 🎬 05-(掌握)详情页-对复杂判断条件分析和优化.mp4
- 🎬 06-(掌握)详情页-底部工具栏的封装.mp4
- 🎬 07-(掌握)详情页-BackTop的混入封装.mp4
- 🎬 08-(掌握)详情页-将商品添加到购物车中.mp4
- 🎬 09-(掌握)详情页-将商品添加到store中.mp4
- 🎬 10-(掌握)详情页-Vuex中代码的重构.mp4
- 🎬 11-(掌握)购物车-导航栏实现-Vuex知识点.mp4
- 🎬 12-(掌握)购物车-购物车商品列表展示.mp4
- 🎬 13-(掌握)购物车-购物车列表的Item展示.mp4
- 🎬 14-(掌握)购物车-Item选中和不选中的切换.mp4
- 🎬 15-(掌握)购物车-顶部工具的封装和应用.mp4
- 🎬 16-(了解)内容回顾.mp4
Day14
- 🎬 01-(掌握)购物车-全选按钮的状态显示.mp4
- 🎬 02-(掌握)购物车-全选按钮的点击效果.mp4
- 🎬 03-(掌握)Vuex-actions返回Promise-mapActions.mp4
- 🎬 04-(掌握)Toast封装-普通方式的封装.mp4
- 🎬 05-(掌握)Toast封装-插件方式的封装.mp4
- 🎬 06-(掌握)fastclick-解决移动端300ms延迟.mp4
- 🎬 07-(掌握)图片懒加载-vue-lazyload框架.mp4
- 🎬 08-(掌握)px2vw-css单位转化插件.mp4
- 🎬 09-(理解)nginx-项目在window下的部署.mp4
- 🎬 10-(理解)nginx-项目在远程linux下的部署.mp4
- 🎬 11-(理解)响应式原理-依赖技术的分析和学习.mp4
- 🎬 12-(理解)响应式原理-通过图解理解过程.mp4
- 🎬 13-(理解)响应式原理-对应的代码阅读.mp4
- 🎬 14-(了解)Vue课程回顾.mp4
|