这门课讲的是 Vue 框架的基础部分,覆盖 vue.js 本体、vue-router、axios、vuex 四块内容。标题写得很直白,没有包装。如果你正在挑第一门 Vue 课,或者之前跟着零散视频学过但一直没串起来,可以往下看;如果你已经能独立用 Vue 写完整项目,这门课对你偏浅。

它对应的工作场景是什么

Vue 在实际工作里的角色很明确:负责把接口数据渲染成页面,并管理页面之间的切换和公共状态。这门课解决的正是这条链路——用脚手架起一个项目,用组件拆分界面,用 axios 拿后端数据,用路由做页面跳转,用 vuex 存放多个组件都要用的数据。学完之后,你面对一个「列表页 + 详情页 + 表单提交」的常规需求,知道该从哪里下手、各部分怎么接起来,而不是只会在单个文件里改样式。

学完能独立做什么

  • 用脚手架初始化一个项目,理解目录结构和构建流程,能把项目跑起来、打包出来;
  • 写出带数据绑定、事件处理、表单双向绑定的组件,处理条件渲染和列表渲染;
  • 用计算属性、过滤器、自定义指令处理常见的展示逻辑;
  • 拆父子组件并完成传值,理解组件之间怎么通信;
  • 配置路由,处理动态路由参数、嵌套路由和编程式导航;
  • 用 axios 发起请求、接收数据并渲染,处理基本的请求组织;
  • 用 vuex 管理跨组件共享的状态,并做模块拆分。

课程里配了备忘录、商品列表这类练习,作用是把上面这些点连成一条线。这类案例不大,但足够让你完整走一遍「建项目—拆组件—调接口—切路由—存状态」的流程。真正写业务时会复杂得多,但骨架是同一套。

资料适合什么基础

需要你先会 HTML、CSS 和 JavaScript 基础,至少能看懂函数、数组方法、对象操作和 ES6 的模块写法。课程从 Vue 的基础概念讲起,数据结构、指令、事件这些都会过一遍,所以没碰过 Vue 也能跟。但如果你连 JavaScript 的 this、回调、Promise 都还绕不清楚,建议先补 JS,否则 axios 和 vuex 部分会卡住——那不是 Vue 的问题。

另外,课程涉及在 Node.js 环境下用脚手架搭项目,所以你要能接受在命令行里操作,愿意装环境、跑命令。这一点对纯写静态页面上来的人可能有点陌生,但它是现在前端工作的常规方式,绕不开。

怎么用这份资料效率更高

建议按 vue.js → 组件 → 路由 → axios → vuex 的顺序走,别跳。前面几块是后面几块的前提,尤其是组件没弄明白就去看 vuex,很容易变成背 API。每看完一块,别只跟着敲一遍,把案例关掉自己重写一次,哪怕写得更慢。备忘录和商品列表这两个练习值得多花时间,它们是检验你有没有真的串起来的标尺。

遇到 API 记不住很正常,工作里也是查文档,重点是知道「有这么个东西、大概解决什么问题」,用的时候能想起来去查。这门课的价值在于帮你建立这张地图,而不是让你背下所有写法。

最后一句实在话:Vue 的基础知识本身不难,难的是把它用在一个真实项目里。这门课给的是起点和练习场,学完后尽快找一个自己的小项目做一遍,比再看第二门入门课有用。

课程目录

课程目录98 集
  • 01 vue框架的整体介绍以及通过归档的方法下载vue.js文件 01 vue框架的整体介绍.mp4
  • 02 通过归档的方法下载vue.js文件以及项目引入.mp4
  • 02 学习vue的基础知识:数据结构+各种指令的学习+事件的触发
  • 01 介绍数据层data,视图层view 和vm层.mp4
  • 02 声明周期钩子函数的学习.mp4
  • 03 指令v-model 和mustache语法.mp4
  • 04 视图层标签绑定事件以及标签显示隐藏的指令.mp4
  • 05 学习条件渲染指令和列表渲染指令.mp4
  • 06 通过一个案例来应用条件渲染和列表渲染.mp4
  • 07 对象数据渲染到视图层以及总结.mp4
  • 08 Class 与 Style 绑定.mp4
  • 03 计算属性的讲解及事件绑定,表单输入绑定以及过滤器,自定义指令 01 复习上一节课的内容.mp4
  • 02 计算属性的原理.mp4
  • 03 计算属性与普通方法的区别.mp4
  • 04 计算属性与侦听属性的区别.mp4
  • 05 计算属性与侦听属性的区别(二)+事件绑定.mp4
  • 06 事件绑定以及表单输入绑定.mp4
  • 07 过滤器的创建以及自定义指令.mp4
  • 08 自定义指令.mp4
  • 04 通过案例来巩固前面的知识:开发备忘录的案例+商品列表案例 01 梳理开发案例的流程.mp4
  • 02 继续梳理案例开发的整体思路.mp4
  • 03 创建案例所需要的各个分支模块.mp4
  • 04 开始创建项目创建视图层数据层以及vm层.mp4
  • 05 完成备忘录中的添加删除功能.mp4
  • 06 开发商品列表案例创建视图层数据层vm层.mp4
  • 07 商品列表案例:添加商品.mp4
  • 08 商品列表:商品列表+删除商品+改变商品数.mp4
  • 09 通过计算属性来计算总商品价格.mp4
  • 05 vue组件的系统学习 01 介绍什么是组件以及如何理解父子组件.mp4
  • 02 定义全局组件和局部组件.mp4
  • 03 组件的视图层数据层分别怎么创建.mp4
  • 04 组件创建方法以及子组件的一些数据渲染.mp4
  • 05 把父组件的数据传递到子组件中使用.mp4
  • 06 通过自定义事件把子组件的数据传递到父组件.mp4
  • 07 非父子组件之间数据的传递.mp4
  • 08 继续讲解非父子间如何传递数据.mp4
  • 09 梳理各种情况下数据的传递.mp4
  • 10 讲解插槽的用法.mp4
  • 11 动态组件的学习.mp4
  • 12 添加用户信息以及删除用户信息的案例.mp4
  • 06 在node.js环境中通过vue脚手架来搭建项目以及学习 01 认识node.js.mp4
  • 02 了解node.js,npm,vue-cli等专业术语.mp4
  • 03 通过脚手架创建项目的流程.mp4
  • 04 继续讲解通过vue-cli搭建项目的过程.mp4
  • 05 安装项目成功之后介绍整个项目的结构.mp4
  • 06 如何新建一个组件.mp4
  • 07 对脚手架搭建项目做整体的回顾梳理工作.mp4
  • 08 对脚手架搭建项目做整体的回顾梳理工作.mp4
  • 07 讲解路由的知识点:编程式,嵌套路由,动态路由,程序化导航等 01 对上节课的知识点进行讲解.mp4
  • 02 创建组件如何书写视图层数据层以及导出组件.mp4
  • 03 讲解路由是如何在vue框架中导入以及使用的.mp4
  • 04 介绍ES6 的语法.mp4
  • 05 创建路由.mp4
  • 06 讲解编程式路由.mp4
  • 07 动态路由传参数.mp4
  • 08 嵌套路由的讲解.mp4
  • 09 程序化导航.mp4
  • 08 通过商品列表的案例来学习vue相关的知识点 01 复习上一节课知识点.mp4
  • 02 项目中头部和底部单独封装到组件中.mp4
  • 03 讲解路由中命名视图.mp4
  • 04 通过案例来巩固路由相关的知识点.mp4
  • 05 案例商品列表:导航样式的切换.mp4
  • 06 通过嵌套路由完成二级商品列表的创建.mp4
  • 07 通过动态路由完成组件之间的数据传递.mp4
  • 08 创建二级商品列表对应的商品详情界面.mp4
  • 09 继续完善商品列表的一二级之间的关系.mp4
  • 10 导航守卫的介绍.mp4
  • 11 继续添加商品列表的三级.mp4
  • 12 完善多级商品列表的案例.mp4
  • 13 创建导航守卫.mp4
  • 14 导航守卫在项目中的应用(一).mp4
  • 15 讲解导航守卫在项目中的应用(二).mp4
  • 16 讲解导航守卫在项目中的应用(三).mp4
  • 17 静态资源的导入:css文件,js文件,img图片.mp4
  • 18 静态资源的导入:css文件,js文件,img图片(二).mp4
  • 09 axios插件的应用:实现前后端数据的通信 01 下载,导入和使用axios插件.mp4
  • 02 通过axios实现get和post的两种通信方式.mp4
  • 10 学习vuex状态管理插件 01 下载导入和使用vuex.mp4
  • 02 系统的介绍vuex.mp4
  • 03 把vuex注入到vue中并且创建状态.mp4
  • 04 vuex中的状态值在组件中渲染.mp4
  • 05 在vuex中创建mutations来改变状态值.mp4
  • 06 在组件中触发方法传递数据到mutations中.mp4
  • 07 创建actions的方法并且在组件中触发方法.mp4
  • 08 讲解项目中如何使用vuex.mp4
  • 09 按照项目中模块来创建不同的vuex中的模块.mp4
  • 10 项目中模块来创建不同的vuex中的模块(二).mp4
  • 11 项目中模块来创建不同的vuex中的模块(三).mp4
  • 12 项目中模块来创建不同的vuex中的模块(四).mp4
  • 11 在项目中导入第三方的插件以及如何应用 01 内置插件与第三方插件的导入方法的区别.mp4
  • 02 介绍如何从网络中寻找插件进行下载.mp4
  • 03 导入vue-swipe 插件学习安装导入和使用.mp4
  • 04 在实际项目中导入vue-swipe插件.mp4
  • 05 在实际项目中导入vue-swipe插件(二).mp4
  • 06 介绍第三方日期插件以及如何导入使用.mp4
  • 07 在项目中导入jquery插件以及Bootstrap.mp4
  • 08 在项目中导入jquery插件以及Bootstrap.mp4
  • 12 梳理针对vue开发的综合项目百草味的案例需求 01 梳理针案例需求(二).mp4
  • 02 梳理针案例需求(一).mp4