[完结] Learn Vue 2: Step By Step [Laracasts 免费视频中文语音]
1 / 5 / 创建于 4年前 /
Affren 的个人博客
多年来，Vue.js 都是令人激动的前端组件中相对简单的一个。使用它非常直观的 API， 以及应用的普适性，它能获得这么多的拥趸毫不奇怪。
如果你也想学习 VUE，那么就跟我一步步的学吧！相信我，这是最好的 VUE 入门教程！
其他相关文章：
1. [完结] The PHP Practitioner [Laracasts 免费视频中文语音]
2. [完结] Laravel 6 From Scratch [Laracasts 免费视频中文语音]
3. [完结] Laravel 6 实战 - 写一个 Twitter - [Laracasts 免费视频中文语音]
1.基础数据绑定
让我们从一个基础数据绑定开始我们的 VUE 学习。你会初步的看到这个框架的美妙之处，自动化的实现和交互性。
2.设置 VUE 开发工具
让我们马上安装 VUE 开发工具。你会看到，它给我们获取页面实例的接口。特别在早期，你会充分的受益于这个 Chrome 插件。
3.列表
现实中，我们通常会更多的用到数组而不是字符串。本课，你会学习到如何使用 v-for 指令来过滤一个列表的内容，然后把它们渲染到页面上。我们同时也会看看如何进行交互。
4.VUE 事件监听器
在之前一课，我们默认使用了传统事件监听器和 DOM 遍历。幸好我们通过 VUE 可以更简单的实现这个功能。我们会讲解 v-on 指令的使用来注册事件监听器。
5.属性和类绑定
我们还没介绍 Vue 里的属性绑定。这是必须要理解的关键概念，所以确保认真观看本课。我们可以使用 v-bind 指令来绑定我们模型中的参数到元素的属性。
6.计算参数
通常我们可能需要对某些数据进行一些计算，在渲染到页面之前。这时候，Vue 的计算参数就可以满足我们的需求。
7.组件基础
我们开始学习 Vue 的组件。我们会一直用到这些，一旦你把 Vue 融入日常工作，所以接下来的课程要好好看。
8.组件中的组件
我们现在只学习了如何创建单个组件，当然，我们可能需要在组件中包含子组件。本课我们就来看一些基础例子。
9.组件实战练习一：Message
我们开始创建一个实战组件的案例学习。我们先来个简单的，转换 Bulma 的 message 成为一个完全的 Vue 的带行为的组件。
点击查看B站视频>>>
10.组件实战练习二：Modal
我们来进行下一个组件练习。传统的 Modal 组件提供了一些教学的关键点，我们来学习组件之间如何交流。如果一个 Vue 组件需要被另一个组件的某个行为通知，应该如何去做？我们如何实现？
11.组件实战练习三：Tabs
我们再来看一个组件实战，然后再讲新的话题。我们来重建一个新的 tabs 功能，这个很常见。这会让我们学习到很多有趣的技巧。
12.组件信息传递案例1：自定义事件
让我们看看我们还能做些什么，当需要在 Vue 组件之间传递信息时，或者换句话说，一个组件如何告诉另一个组件某个特定的行为或者事件发生了？
13.组件信息传递案例2：事件调度程序
处理组件之间信息传递的下一个选项是创建自己的时间调度程序。别担心，它比它听起来简单多了，因为 Vue 已经实现了这些接口！
14.给 Slots 命名
目前为止，我们只浏览了默认的组件 slot 。换句话说，我们只能把内容插入到 slot 标签的位置。那么，我们有办法进行更多的操控吗？我们来用 Modal 组件进行演示。如果你想插入一个 header ，然后再插入一个 footer ，那么给 slots 命名就可以了。
15.单次使用的组件和行内模板
并不是所有的组件都需要重复使用。有时候，一个单次使用的，视图专用的组件恰恰是最适合的。本课，我们一起看看基本概念，然后讨论如何使用 inline-template 方法直接把模板嵌套在 HTML 文件中。
16.webpack 和 vue-cli
我们来专注于文件结构，并且我们在实际应用中如何配置 Vue。也就是说，我们要同时学习 webpack 和 vue-li 。我事先警告大家，这个过程会有些令人困惑。但是跟着我的讲解，我们会得心应手的。
17.实时模组替换
实时模组替换是非常酷的。它会在你每次改变模组的时候自动刷新页面。而更加棒的是，所有组件的状态都是保持不变的。考虑一下它类似于你应用的每个模组的实时重载。本课，我们快速的讲解它们是如何做到的。
18.Vue 通过 Axios 实现 Ajax 请求
Vue 并不提供 Ajax 功能。我们可以利用整个 JavaScript 社区提供的类库。也许你已经使用 jQuery 了？如果是的，那么 $.ajax 就可以实现 ajax 请求。
19.面向对象的表单：第一部分
我们来看看一些技巧，可以简化我们的表单创建。如果你注意到你自己总是重复写一些表单代码，那么何不抽取一个 Form 类呢？让我们一起来看看吧！
20.面向对象的表单：第二部分
现在我们的错误处理已经有了自己的类了，现在我们开始专门编写 Form 类。它负责初始化表单，发送 AJAX 请求到服务器。准备好开始了吗？
一旦你完成了本课，就轮到你自己行动了。你如何把它们应用到自己的程序简化自己的表单呢？试试看，分享出来吧！
21.面向对象的表单：第三部分
我们再花一节课时间，重构一下我们的表单，顺便再对前两课做一些说明。我们要让我们的 Form 再提交以后返回一个 Promise ，我们会创建一些 AJAX 的帮助函数，最后，我们重构两个方法来使代码更加清晰。
22.Webpack 配置从零开始写
我们已经学了一点关于 vue-loader，用于学习的目的，我们来从零开始写一个 Webpack 的配置文件，这样我们可以学会抽取和导入模组。这可以让你们打好坚实的基础，并且也让大家有机会看到这些东西到底多么强大（刚开始确实也是十分令人困惑）。别担心，下节课，我会教你一些方法来简化使用 Webpack。
23.认识 Laravel Mix
有一个问题，对于任何已有的工具，对于任何一个新项目，我们是不是要一遍又一遍的去写同样的配置文件呢？如果我们能够为 80% 的简单需求用户写好基本配置，它们只希望通用的 ES2015 加上模组编译，一些 CSS 处理和一些其他常见任务。而对于剩余的 20% 用户，他们又能够通过对背后的配置进行调整来实现他们自己的需求。上面说的，实际上就是 Laravel Mix 所实现的。
24.共享状态基础
我们来学习共享状态。我们一定会很快遇到此类需求的。如果你又多个 Vue 实例或者组件，它们需要访问相同的数据，那么它们就需要进行相互的数据同步——我们该怎么做？
25.自定义 input 组件
你一定会遇到需要在自己的组件内包裹一个 input 的时候。这时候，你可以有一个唯一的地方去处理数据清理，验证，储存以及一些列行为等。然而，在这个过程，你可能会发现，v-model 指令不再像往常那样有用。
本课，我们会了解到，Vue 的 v-model 指令的本质是什么，以及我们如何自定义任何一个组件。
26.Vue SPA 要点：路由
作为一个工作流练习，在接下来几课中，我们会学习一些关于使用 Vue 2 建立完整 SPA 应用的一些关键要点。首先，我们需要建立客户端的路由，然后把它们整合到 Vue 中去。和往常一样，我们会从零开始写，然后逐步建立起我们的项目。
27.SPA 和后端
一个单页面应用仍然需要从后端获取数据，本课，我们会利用一下 Laravel 来构建一个 Status 模型，然后创建一些数据。然后，一旦建立了必要的路由，我们就可以通过 JSON 获取数据。这样，Vue 和 Axios 就可以很容易的从我们的服务器获取数据了。
28.Vue 过滤器
前一节课，我们采用了一个简单的函数来实现将日期格式化成为人类可读的模式。但是，Vue 过滤器可能是一个更加合适的方法，来实现类似的简单操作。
29.专门的 Form 组件
我们继续我们的 Stream 应用建设，看看添加新的 Status 的实现。为了实现这个功能，我们创建了一个专门的表单组件，然后引入了我们之前写的 Form 和 Errors 类，参看我们19、20、21，三节课的内容。随后我们更新了后端 laravel 的服务端代码。
30.测试 Vue
本课，我们配置了非常棒的 Ava 测试框架，然后测试一个非常基础的 Vue 组件，从零开始编写。你会看到，这里会有些小的问题需要解决的。
31.Vue 组件职责
我们来花点时间讨论结构和职责，关于你写的 Vue 组件。特别的，我们会看一个可以被抽取出来的子组件。
32.Vue 次级类
时不时的，我们会发现某些特定的组件会有一些特别的功能。为了避免一遍遍的复制粘贴这类逻辑，还有什么其他办法吗？当然有，我们可以为了这个目标创建一个混合体，我们可以创建一个专门的次级类。本课，我们就使用常见的 collection 概念来演示这个流程。
33.限制范围的 Slots
限制范围的 Slots 让我们可以往任何给定的 Vue 组件中插入一个合理的模板，并且你可以传入数据。如果你想改写一个父标签中的给定 slot，但是不能改写底层的数据，那么限定范围的 slot 模板就是你的解决方案。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：