VueJS婴儿步骤教程第-1部分

0

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

VUE JS婴儿循序渐进教程-1
VueJS婴儿步Tutorial

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

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

Vue作为图书馆

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

大多数教程/文章都假定您对如何设置开发环境有一定的了解,在该环境中您将使用诸如 npmwebpack 建立你的项目–虽然这很理想,因为您可以立即使用–我们可以从更简单的初学者友好型方法开始。可靠的老 <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 在您的浏览器中,没有发生太多事情。

VueJS Baby Step教程,VueJS Baby Step教程第-1部分

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

请密切注意以下行:

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

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

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

反应性

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

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

演示版

请继续关注第二部分!

0