vue.js Baby Step Tutorial Part -1

0

学习新框架可能是任何开发人员的非常令人生畏的过程,尤其是对于仍然学习基本语言的七星彩中奖查询(在这种情况下javascript)。这就是为什么我决定创建这个系列的原因,我将尝试使Vue.js的学习尽可能容易和消化。 ?

vue. JS Baby Step Tutorial  -  1
vue.js婴儿步骤Tutorial

I’m不是制作长期绘制的粉丝,所以我会认为如果你’re still reading:

  1. 您有一些基本的HTML / CSS / JS知识。你不’T需要成为一名经验丰富的前端开发人员,以便作为发展框架接受Vue,但至少您需要能够编写自己的HTML标记,了解CSS如何工作的基础知识,是的,是,如何写JavaScript。最终,这就是这一切。
  2. 那’s it. No, really.

vue.作为图书馆

有几种方法可以融入其中 vue. 进入您的Web项目。让’s从最简单的开始(你可能不会使用很多)。

大多数教程/文章将假设您对如何建立七星彩中奖查询开发环境的了解,其中您将使用类似的东西 npmwebpack 设置项目–而这是理想的,因为你从盒子里开了什么–我们可以从更简单的初级友好的方法开始。可靠的旧 <script> tag.

继续启动您喜欢的代码编辑器,并创建七星彩中奖查询名为的新文件 index.html。 (如果你不’t have one yet, vs code. 是七星彩中奖查询受欢迎的自由选择。

我们没什么好吃的’只需为七星彩中奖查询简单的网站设置骨骼。现在让步’s get the vue. 图书馆在那里。在关闭之前粘贴此脚本标记 </body>.

现在 vue. 正在加载到我们的页面中,我们可以开始使用它。
让’s继续创建七星彩中奖查询新的vue实例,by 新的在七星彩中奖查询里面 <script> 标签。我们会给它七星彩中奖查询 选择器 by passing #app to the el 选项对象的属性,以及那种方式 vue. 将知道应该在哪里呈现我们的应用程序。 (记住那是空的 <div> with an ID of 应用程序?)

在上次脚本标记后放置此代码。

所以呢’s happening here?
我们创造了我们的 新的 Vue 实例,并将其传递七星彩中奖查询配置对象。看看 {} as a parameter?

  1. el: 正如我之前提到的那样,在这里,我们在我们希望显示应用程序的HTML内部的Vue在哪里。在这种情况下,DIV与 应用程序 id.
  2. 数据 object. Every Vue 实例 有七星彩中奖查询本地存储,如一盒变量和属性,它将持有我们,并且我们可以在编码应用程序时使用。数据包含七星彩中奖查询JavaScript object,所以我们将它分配七星彩中奖查询 { } 句法。里面,我们放置七星彩中奖查询财产。
  3. mylocalproperty.。此属性在内部定义 数据 对我们的实例对象,它’姓是MyLocalProperty,右侧的值是值–在这种情况下,七星彩中奖查询字符串。

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

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

vue.js Baby Step Tutorial,Vuejs Baby Step Tutorial Part -1

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

密切关注这一行:

什么’发生在此处都被称为 可变插值,这是七星彩中奖查询花哨的术语“I’m将显示我的内容 mylocalproperty. 在这个占位符中的变量在我的 {{ }} are now.

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

继续尝试更改里面的字符串 mylocalproperty. 对于其他一些文本并重新加载页面,您应该相应地查看文本更新。

反应性

最后,为这一课,让’s talk about 反应ivity。你可能已经听说过 vue. is a 反应 框架。但这究竟是什么意思?在Chrome开发人员工具中打开控制台,并使用index.html加载类型:

你会看到这个页面 反应 对此变量变化!

演示

留在第二部分!

0