在Vue.js中构建WebApp的简介

现在有很多JavaScript框架存在,很难跟踪它们,当然,任何人都不可能完全掌握它们。 对我们大多数人来说意味着我们需要选择将我们将花时间投入学习的开发框架。

在本文中,我们将快速浏览一下Vue.js,这样您就可以自己决定它是否适合您喜欢的项目类型,以及它是否适合您。

什么是Vue.js?

虽然它通常没有大写,但“Vue”实际上是Visual Understanding Environment的首字母缩写。 其主要目的是通过降低代码复杂性来更轻松地开发Web应用程序。 它与React.js有许多共同之处,但是当前版本的Vue渲染速度比React快,并且似乎效率更高。

Vue难学吗?

如果您已经是一位经验丰富的编码员,那么开始使用Vue应该没什么困难,但将其描述为初学者语言是不对的。 您需要具备一些HTML,CSS和JavaScript的经验,才能构建任何实用的东西。

使用Vue的学习曲线比使用React略微陡峭,并且它比使用Angular的陡峭得多。 因此可以准确地说明,与其他流行的开发框架相比,Vue相对容易学习。

Vue如何帮助实现目标?

它根据您的目标实际上有所不同,但通常,您将代码块绑定到HTML div。 与常规HTML,CSS和JavaScript相比,此方法可以更轻松地引入交互性和动态内容。

另一方面,通过使用更传统的方式,你无法在Vue中做更多的事情。 在开发阶段使用Vue只是让事情变得简单,但除了因加载框架代码而导致的轻微性能影响之外,它对最终结果没有太大影响。

Vue的另一个优点是它提供了模块化,这意味着您可以重复使用在多个项目中开发的组件。

Vue有什么很酷的伎俩吗?

它确实如此,其中最好的是内置过渡效果,它允许您使用一行或两行代码来控制本来是非常代码密集的CSS和JavaScript结构。 这可以节省您在创建应用程序时的时间和精力。

另一个有用的功能是针对特定设备类型(如Android和iOS)的本机渲染,因此您可以针对他们运行的设备微调您的应用程序,而无需额外的工作。

入门

如前所述,Vue易于学习,但它不是初学者的语言。 您仍需要了解代码块中的方法。

问题是,与大多数框架一样,文档非常懒惰,主要用于说服您使用它。 文档中很少关注解释一切是如何工作的,或者为什么以某种方式做事。 实际上,每个创建的官方框架示例都会遗漏重要信息,您需要花费数小时才能发现这些信息。 这也是Vue的文档和示例共享的缺陷。

为了更容易理解重新创建此项目需要执行的操作,这些是必需的步骤:

1。 添加引用vue.js的脚本

对于速度优化,最好在所有页面内容之后包含此内容,但在HTML源代码中的结束正文标记之前。 您也可以在此部分中加载其他页面资源,并且加载优先级的顺序决定了您应该插入每个资源的顺序。

以下是从CDN中包含vue.js的示例:

这是一个从您自己的服务器上的目录中包含vue.js的示例:

如果没有对vue.js的引用,则不会发生与Vue相关的任何内容。

2。 将Vue组件添加到HTML正文中

这就是这段代码发生的事情:

目前它没有多大意义,但Vue部分是空的“演示网格”元素,另外还有一个“v-directive”添加到查询输入(在这种情况下它是“v-model” “,用于绑定Vue代码以形成输入)。

3。 如果项目需要组件模板,请将其添加到HTML正文

这段代码很不寻常,因为它看起来像是脚本标签中的常规HTML,这会混淆大多数HTML编辑软件(注意某些地方的指示灯颜色是错误的)。

4。 添加Vue实例

这应该是页面上显示的最后一件事,因为它正在执行动态渲染任务。 与在页面中添加它相比,这提供了一些优化优势。

  • 46行指定浏览器应在名为“demo-grid”的页面上查找组件,而47行指定应将“#grid-template”用作组件的模板(这是在步骤中添加的模板代码)从3行到9行的30。
  • 从48行到52行的块定义了组件的属性。
  • 53到62行定义了一个用于对表中数据进行排序的函数。
  • 63到85行定义了一个过滤数据的函数(来自搜索查询中的结果)。
  • 86到90行定义了一个用于大写数据集中单词的函数。
  • 91到97行定义了排序数据的方法。

5。 在结束脚本标记之前添加启动代码

如果您完成了步骤1到4并在浏览器中打开了该文件,您只能看到搜索框,而不是其他内容。 那是因为构建表所需的所有内容都已定义但未创建。 因此,在步骤5中,我们添加实际创建由所有先前步骤定义的表的代码。

  • 100行创建一个新的Vue对象。
  • 101行指定将操作绑定到的元素。
  • 102到111行提供将绑定到元素的对象数据。

测试

定义并创建了必需的对象后,您现在可以测试结果了。 准备好不知所措,因为这是你应该在浏览器中看到的:

这是怎么回事? 为什么这么无聊? 这是因为没有应用样式。 如果我们使用JSFiddle示例中的默认样式,则表格如下所示:

在搜索框中键入任何内容(不区分大小写)将相应地过滤结果:

单击列标题将允许您更改显示顺序。 例如,单击“电源”列标题将更改结果以按功率级别的顺序显示。

改进和适应

框架示例的另一个问题是它们通常不包含太多信息来帮助不熟悉代码库的人来弄清楚如何在现场应用他们在示例中看到的内容。 与Bootstrap相比,Vue做得非常出色(这是臭名昭着的信息不足),但仍然留下了许多悬而未决的问题。

以下是我们可能对此应用程序进行的一些更改,以更改其外观和工作方式:

  • 将表格设置为Bootstrap条带表
  • 更改列数
  • 将数据更改为完全不同的数据

1。 添加Bootstrap

2。 将元素包装在Bootstrap表中

3。 调整根元素以使用Bootstrap布局模型

4。 重新设计箭头

5。 修改数据

6。 测试

  • 未过滤和未分类

  • 按指令排序(升序)

  • 按用于排序(升序)

  • 过滤为“有条件的”

  • 过滤为“条件”并按指令排序(升序)

最后的思考

希望从这些示例中可以明显看出,我们构建了两个具有截然不同的外观和内容的应用程序。 使用Vue,可以非常轻松地在多个项目中重复使用您的代码,并且可以节省大量时间。

标题图片由...提供 亚历山大·萨维奇

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。