vue.js视频课程_在此免费课程中学习Vue.js！ ✨

vue.js视频课程

by ZAYDEK

由ZAYDEK

在此免费课程中学习Vue.js！ ✨ (Learn Vue.js in this free course! ?✨)

让我们做点Vueseful (Let’s make something Vueseful)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。

您好，互联网！ (Hello Internet!)

You might not know what Vue is — and that’s OK — and heck, you might not, definitely not, know who I am! I’m Zaydek, and I’m an experienced graphic designer and programmer. I just released a free course to help developers learn some Vue! I’m here to enlighten you about all the possibilities that learning and using this amazing open-source framework present.

您可能不知道Vue是什么-没关系-哎呀，您可能绝对不知道我是谁！ 我是Zaydek ，我是一位经验丰富的图形设计师和程序员。 我刚刚发布了免费课程，以帮助开发人员学习Vue！ 我在这里启发您学习和使用这个令人惊叹的开源框架的所有可能性。

In this article, I detail how to think about Vue. I also iterate the building-blocks needed to start programming static and dynamic websites with an order of magnitude more ease than with vanilla JavaScript. ? Vue is both a paradigm for writing web apps and an idiomatic guide to learning and programming JavaScript.

在本文中，我详细介绍了如何考虑Vue。 我还迭代了开始编写静态和动态网站所需的构件，这比使用原始JavaScript容易得多。 ？ Vue既是编写Web应用程序的范例，也是学习和编程JavaScript的惯用指南。

我还讲授了刚发布的Vue课程所需JavaScript？✨。 从基础知识中学习Vue，以及如何构建一些东西。 点击此处免费注册！ (I also teach the JavaScript ?✨ needed to get started in the Vue course I just released. Learn Vue from the basics, and how to build a few things, too. Click here to enroll for free!)

The course is taught on Scrimba.com, which is a new and interactive website for learning and sharing how to code. Screencasts can be interrupted and edited, making learning active and fun to experiment with.

本课程在Scrimba.com上讲授， Scrimba.com是一个新型的交互式网站，用于学习和共享编码方式 。 截屏视频可以中断和编辑，使学习变得活跃而有趣。

Vue不是一回事 (Vue is not one thing)

A framework can be thought of as a general-use toolbox, equipped with tools that solve different problems but all together help with some task. That task, where Vue is concerned, is building maintainable and idiomatic web apps with ease — really — and having fun while we’re at it!

框架可以被认为是一个通用工具箱，配备了可以解决不同问题的工具，但它们共同可以帮助完成某些任务。 对于Vue而言，该任务是轻松构建可维护且惯用的Web应用程序-的确如此-在我们忙碌的过程中尽享乐趣！

Let’s put things into perspective. Vue can be as simple as a script tag that we can include in our websites to turn them into web apps. But it can also be an entire ecosystem that relies on a build-process to make engineering complex and powerful web apps easier.

让我们把事情看成透视。 Vue可以像脚本标记一样简单，我们可以将其包含在网站中以将其转换为Web应用程序。 但它也可以是整个生态系统，它依赖于构建过程来简化工程复杂而功能强大的Web应用程序。

In this article and in the course, I focus on learning the core concepts Vue presents, and assume no knowledge of the command-line or what a build-process is.

在本文和本课程中，我专注于学习Vue提出的核心概念，并且假定不了解命令行或构建过程是什么。

课程内容 (What the course covers)

The course is three parts:

该课程分为三个部分：

1. learning the minimum JavaScript needed to get started with Vue
   学习入门Vue所需的最低JavaScript
2. learning the core concepts of Vue, and
   学习Vue的核心概念，以及
3. an overview of two more advanced examples (two cute and fun web apps I made: Schrödinger’s Div ? and a ? Color Picker).
   概述了另外两个高级示例(我制作了两个可爱又有趣的Web应用程序：Schrödinger的Div？和？Color Picker)。

What I love about Vue is that it proposes some interesting ideas for how to think about and how to build web apps. There are a few ideas that I think are most interesting — though this is not suggestive of all that Vue can do:

我对Vue钟爱的是，它为如何思考和构建Web应用程序提出了一些有趣的想法。 我认为一些最有趣的想法-尽管这并不暗示Vue可以做的一切：

• separating the data from the DOM
  将数据与DOM分离
• idiomatic JavaScript
  惯用JavaScript
• templating and component-based HTML
  模板化和基于组件HTML
• managing event-handling
  管理事件处理

But before we can get into that, let’s first cover how to connect Vue via a simple script tag to a website:

但是在开始讨论之前，让我们首先介绍如何通过简单的脚本标签将Vue连接到网站：

You can think of a web app as being inside or on top of a website. So a web app begins it’s life at the <div id="app">, where from inside the script tag it is plugged in via new Vue({ el: "#app" }). That is how we create a relationship from the JavaScript to the HTML (where el is short for element).

您可以将Web应用程序视为位于网站内部或顶部。 因此，Web应用程序开始于<div id="ap p”>的生活，在该脚本中，脚本脚本n via new Vue({ el: "#a pp”})插入到脚本标签中。 这就是我们如何创建与JavaScriptHTML(关系wh埃雷EL是短期的元素)。

This is the first of what are known as options, and Vue supports a lot of options, such as data and methods. These are analogous to variables and functions for our web app.

这是所谓的options的第一个，并且Vue支持很多选项，例如data和methods 。 这些类似于我们的Web应用程序的变量和函数。

Note: Vue comes in two flavors: ? there’s both the development and production version. The development version emits detailed error messages and warnings to support developers while working in Vue. The production version is optimized for speed and size.

注意： Vue有两种口味：？ 有两个d 才有发展和对roduction版本。 在Vue中工作时，开发版本会发出详细的错误消息和警告以支持开发人员。 生产版本针对速度和大小进行了优化。

In addition to all of this, there’s an official Chrome extension that makes managing the app’s state and debugging painless.

除此之外， 还有一个正式的Chrome扩展程序 ，可轻松管理应用程序的状态和调试。

将数据与DOM分开 (Separating the data from the DOM)

As mentioned earlier, one great suggestion Vue proposes is separating the data from the DOM. DOM stands for document-object-model, which can be thought of as the tree of elements that compose our website. The text in between the opening and closing elements is what I’m referring to as the data. In Vue we don’t hardcode it — we separate it and put in the aforementioned data object from inside of our Vue instance.

如前所述，Vue提出的一个重要建议是将数据与DOM分开。 DOM代表文档对象模型，可以将其视为构成我们网站的元素树。 开头和结尾元素之间的文本就是我所说的数据。 在Vue中，我们不对其进行硬编码-我们将其分离，并将上述data对象从Vue实例内部放入。

This idea is also referred to as the Virtual DOM. This might seem insignificant, but the truth is that having the data in one place means that we know how and where to update it. And because Vue is reactive, whenever we update said data, that change gets propagated throughout our web app. Because of this relationship, data can be thought of as much more alive in Vue than in vanilla HTML.

这个想法也称为虚拟DOM。 这看似微不足道，但事实是将数据放在一个位置意味着我们知道如何以及在何处更新数据。 而且由于Vue是被动的，因此只要我们更新上述数据，该更改就会在整个Web应用程序中传播。 由于这种关系，可以认为Vue中的数据比普通HTML中的数据活得多。

These ideas are explored in the third screencast.

在第三个截屏视频中探讨了这些想法。

惯用JavaScript (Idiomatic JavaScript)

For me, Vue makes JavaScript a language worth learning, because it makes sense of JavaScript. What I mean is that from inside of a new Vue({ ... }) is how and where we learn to wrangle JavaScript. Variables are key-value pairs attached to the data object as shown above, and functions are attached as key-value pairs attached to a second object: methods. And both objects data and methods are optional — remember, these are our web app’s options.

对我来说，Vue使JavaScript成为值得学习的语言，因为它具有JavaScript的意义。 我的意思是， new Vue({ ... })内部了解我们如何以及在哪里学习如何纠缠JavaScript。 变量是附加到data对象的键-值对，如上所示，而函数是作为附加到第二个对象的键-值对附加的： methods 。 而且对象数据和方法都是可选的-请记住，这些是我们Web应用程序的选项。

But Vue goes a lot further: Vue features a lot of options that come in the form of objects we hook into in our Vue instance. Altogether, this resembles an idiomatic guide and approach to programming in JavaScript. Therefore, few architectural decisions are left for the programmer. This means that writing and reading Vue has a sort of coherence and elegance that makes it easier to pick up than deconstructing how a vanilla JavaScript app works.

但是Vue走得更远：Vue具有许多选项，这些选项以我们挂在Vue实例中的对象的形式出现。 总之，这类似于JavaScript的惯用指南和编程方法。 因此，几乎没有架构决策留给程序员。 这意味着写作和阅读Vue具有某种连贯性和优雅感，比解构原始JavaScript应用程序的工作方式更容易上手。

These ideas are explored in the fourth screencast.

这些想法将在第四个截屏视频中进行探讨。

模板化HTML (Templating HTML)

Most people wouldn’t consider HTML a programming language. But I think a reasonable definition of the purpose of a programming language is this: to interpret and transform data, such as reading and compiling source code.

大多数人不会将HTML视为一种编程语言 。 但是我认为对编程语言的目的的合理定义是：解释和转换数据，例如阅读和编译源代码。

Given Vue’s attributes, such as v-for, v-if, and so on, for me HTML begins to resemble a programming language with control-flow. This means that we can better control the flow of our program’s data (for example, our website’s content or what I keep calling the data).

给定Vue的属性，例如v-for ， v-if等，对我来说HTML开始类似于具有控制流的编程语言。 这意味着我们可以更好地控制程序数据的流向(例如，我们网站的内容或我不断调用的数据)。

For what it’s worth, templating frameworks, like Jekyll and Hugo, were created to aid developers with authoring static-based websites using a kind of control-flow. As nice as this is, it’s limited to static websites, because these frameworks compile to HTML rather than interpret HTML.

值得的是，创建了模板框架(例如Jekyll和Hugo)来帮助开发人员使用一种控制流来创作基于静态的网站。 如此好，它仅限于静态网站，因为这些框架编译为HTML而不是解释HTML。

Having access to realtime control-flow, like for-loops and if-statements, means that Vue can do a lot more and do it in realtime. This is one of the big differences between websites and web apps (static versus dynamic content).

可以访问实时控制流，例如for循环和if语句，这意味着Vue可以做更多的事情并实时进行。 这是网站和网络应用之间的最大区别之一(静态内容与动态内容)。

These ideas are explored in the fifth screencast.

在第五个截屏中探讨了这些想法。

组件和道具 (Components and props)

Something that took me far too long to appreciate is the difference between variables and properties. Variables store data, whereas properties are variables attached to an object in JavaScript. So components can be thought of as HTML mixins. A what? A mixin is like a function, but instead of returning data, it mixes-in data into the document. For example, it writes HTML for us so we don’t have to repeat ourselves!

我花了很长时间才意识到的是变量和属性之间的区别。 变量存储数据，而属性是JavaScript中附加到对象的变量。 因此，可以将组件视为HTML mixins。 什么啊 mixin就像一个函数，但是它不返回数据，而是将数据混合到文档中。 例如，它为我们编写了HTML，因此我们不必重复自己！

And this isn’t a small thing. The benefit of components and props in Vue means we can refactor entire HTML code blocks into one-liners that can be customized via props. This means we can now author custom elements that expose access to their internals without overcomplicating the public HTML. This is a big win for both maintainable and readable code.

这不是一件小事。 Vue中组件和道具的优势意味着我们可以将整个HTML代码块重构为可以通过props进行定制的单行代码。 这意味着我们现在可以编写自定义元素来公开对其内部的访问，而不会使公共HTML过于复杂。 对于可维护和可读的代码而言，这是一个巨大的胜利。

These ideas are explored in the sixth screencast.

在第六个截屏中探讨了这些想法。

管理事件处理 (Managing event-handling)

While everything we’ve talked about so far is fascinating, it doesn’t speak to user-interaction, which is one of the key differences between a website versus a web app. A website conventionally means something that is more-or-less static and isn’t designed or intended to interact with the user much, outside of perhaps collecting data. In an actual web app, something reminiscent of a native app, interaction is paramount. ? This idea is also referred to as a dynamic website or web app.

尽管到目前为止我们所谈论的一切都令人着迷，但它并没有说明用户交互，这是网站与Web应用之间的主要区别之一。 通常，网站是指某种或多或少是静态的东西，除了可能收集数据外，其设计或意图不是与用户进行太多交互。 在实际的Web应用程序(让人想起本机应用程序)中，交互至关重要。 ？ 这个想法也称为动态网站或网络应用。

Since Vue is both a framework and an ecosystem, it has idiomatic solutions for this, too. The simplest one that I teach in the course is the @click="function()" handler which we plug into an element as an HTML attribute. This simple snippet gives us a means to interact with our data, as simple as an attribute that we plug into an element. This means that we can defer to JavaScript and not HTML or CSS for rich user-interaction.

由于Vue既是框架又是生态系统，因此它也有惯用的解决方案。 我在本课程中教过的最简单的方法是@click="function()"处理程序，我们将其作为HTML属性插入到元素中。 这个简单的代码片段为我们提供了一种与数据进行交互的方式，就像插入到元素中的属性一样简单。 这意味着我们可以使用JavaScript而不是HTML或CSS来进行丰富的用户交互。

These ideas are explored in the seventh screencast.

在第七个截屏视频中探讨了这些想法。

学习Vue还有很多东西，所以我写了两篇关于该主题的文章。 请阅读本文后，看看！ (There’s a lot more to learning Vue, so I wrote two more articles on the subject matter. Please, after this article, have a look!)

Vue使网络变得有意义 (Vue makes the web make sense)

Before Vue, I was acquainted with HTML and CSS. I was comfortable enough to make some alluring websites, but nothing more. I explored some frameworks (like those I discussed in this article concerning static compilation), and peered into Angular and React, but I didn’t get the right feeling when exploring those. What I wanted was something lightweight and intuitive, and I believe I’ve found that with Vue.

在Vue之前，我熟悉HTML和CSS。 我足够舒服地制作一些诱人的网站，但仅此而已。 我探索了一些框架(例如我在本文中讨论的有关静态编译的框架)，并探究了Angular和React，但是在探索这些框架时我感觉不对。 我想要的是一种轻巧直观的东西，我相信我已经在Vue中找到了。

In the end, it doesn’t matter which tools we use if we can create what we set out to build. But the thing is, it’s hard to separate the tools from the thinking used to build a product or service. This is both a good and bad thing. On the one hand, it can make us narrow-minded. But on the other end of the spectrum, the tools we use can also serve as a teaching instrument for learning new and interesting ideas. I love tools that can’t help but teach me at the same time, and I couldn’t recommend Vue more for this reason!

最后，如果可以创建我们打算构建的工具，那么使用什么工具都没有关系。 但事实是，很难将工具与用于构建产品或服务的思想分开。 这既是好事，也是坏事。 一方面，它可以使我们心胸狭窄。 但另一方面，我们使用的工具也可以用作学习新的有趣观点的教学工具。 我喜欢无法同时教我的工具，因此，我不能再推荐Vue！

So please, go out into the beautiful world and learn you some Vue! You can(!) make amazing things and even change people’s lives, even your own. And if it helps, try the free course!

因此，请进入美丽的世界，学习一些Vue！ 您可以(！)做出令人惊奇的事情，甚至可以改变人们的生活，甚至改变您自己的生活。 如果有帮助，请尝试免费课程 ！

翻译自: https://www.freecodecamp.org/news/learn-vue-js-in-our-free-course-85d5df41e47f/

vue.js视频课程