对于任何开发人员来说，学习一个新框架都是一个非常艰巨的过程，特别是对于仍在学习基础语言（在这种情况下为JavaScript）的开发人员而言。这就是为什么我决定创建本系列的原因，在该系列中，我将尝试使对Vue.js的学习尽可能容易和易于理解。 ？

I’我不喜欢长时间进行介绍，所以我认为如果您’re still reading:

1. 您具有一些基本的HTML / CSS / JS知识。你不’不需要成为经验丰富的前端开发人员就可以将Vue用作开发框架，但是至少您需要能够编写自己的HTML标记，了解CSS的工作原理，是的，如何写JavaScript。最后，这就是全部内容。
2. 那’s it. No, really.

Vue作为图书馆

您可以通过多种方式合并 Vue 进入您的Web项目。让’s从最简单的开始（您可能不会经常使用它）。

大多数教程/文章都假定您对如何设置开发环境有一定的了解，在该环境中您将使用诸如 npm, webpack 建立你的项目–虽然这很理想，因为您可以立即使用–我们可以从更简单的初学者友好型方法开始。可靠的老 <script> tag.

继续并启动您喜欢的代码编辑器，然后创建一个名为 index.html。 （如果您不’t have one yet, VS代码 是一种流行的免费选择。

没什么，我们’重新为一个简单的网站做准备。现在让’s get the Vue 那里的图书馆。在结束之前粘贴此脚本标签 </body>.

现在 Vue 正在加载到我们的页面中，我们可以开始使用它。
让’继续，通过创建一个新的Vue实例， 新将其放入一个 <script> 标签。我们会给它一个 选择器 by passing #app to the 埃尔 选项对象的属性，那样 Vue 会知道我们的应用应该在哪里渲染。 （请记住， <div> with an ID of 应用程式？）

Place this code after our last 脚本 标签。

所以呢’s happening here?
我们创造了 新 Vue 实例，并将其传递给配置对象。见 {} as a parameter?

1. 埃尔: 如前所述，我们在这里告诉Vue，我们希望在HTML中的哪个位置显示我们的应用程序。在这种情况下，div与 应用程式 id.
2. 数据 object. Every Vue 实例 有一个本地存储区，例如一盒变量和属性，它将为我们保存并在编写应用程序时使用。数据包含JavaScript object，因此我们将其与 { } 句法。在里面，我们放置一个属性。
3. myLocalProperty。此属性是在 数据 我们实例的对象’的名称为myLocalProperty，右侧的值为该值–在这种情况下，为字符串。

在我们的应用程序上显示属性

如果你现在打开 index.html 在您的浏览器中，没有发生太多事情。

让’s添加一些代码以在HTML内显示我们的属性。您的文件应如下所示：

请密切注意以下行：

什么’发生在这里的叫做 变量插值，对于“I’我要显示我的内容 myLocalProperty 这个占位符中的变量 {{ }} are now.

重新加载页面，您现在将看到字符串更新以反映我们的变量。

继续尝试更改其中的字符串 myLocalProperty 到其他文本并重新加载页面，您应该会看到相应的文本更新。

反应性

最后，在本课中，让’s talk about 反应ivity。您可能听说过 Vue is a 反应性 框架。但这到底是什么意思？在chrome开发人员工具中打开控制台，并加载index.html类型：

您将看到该页面 反应 改变这个变量！

演示版

请继续关注第二部分！