专栏首页极客编程为什么43%前端开发者想学Vue.js

为什么43%前端开发者想学Vue.js

根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库。我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因。

我最近曾与Evan You,Chris Fritz,Sarah Drasner,和Adam Jahr做了一个介绍视频,而现在你可以在http://vuejs.org首页找到它。以下是该视频的文字版本。

伟大的JavaScript迁移

如你所知,JavaScript在过去的10年中已经成熟了很多,而且服务器端正常运行的大部分代码已经迁移到浏览器中了。随着这变得越来越复杂,框架也变得越来越有组织性。

我不打算告诉你为什么一个比另一个更好的,虽然在官方网站有一个详细的比较。

Vue.js旨在成为一个平易近人,多功能,高性能,可维护性,可测试的JavaScript框架。Vue的目也是为了进步,意思就是如果你有一个现有的应用程序存在只占一个部分的前端,你需要更多的互动体验那么就可以使用Vue。

或者,您也可以从一开始就在前端构建更多的业务逻辑。Vue的核心库和生态系统需要规模。

像其他的前端框架,Vue可以让你把网页分为可重用的逻辑组件。每一个都有它自己的HTML、CSS和JavaScript来渲染页面的每一部分。

一个示例,说明如何将事物分解成组件

我们的第一个Vue项目

我想让你没见过Vue前让你先找到代码的感觉并告诉你一些语法。我不会深入讨论细节,但是我们会看到一些核心概念。

与许多JavaScript应用程序一样,我们从将数据显示到页面开始。

用Vue开始构建很简单。

你可以看到在上面的图片我们包括Vue库,创建Vue的实例,并插入到我们的根元素通过App的ID。EL代表元素。我们也会将数据移到一个对象中,并将X转换为一个带有双花括号的表达式。

如你所见,它有效:

没什么特别的,但数据开始变化时Vue就像魔术。如果我跳到控制台,改变product的值,看看会发生什么:

VUE是响应式的,即当我们的数据变化,Vue会更新所有在我们的网页使用它的地方。

这与任何类型的数据无关 , 不只是字符串。因此,我们不必使用单一产品,而是使用一系列产品,并将H2更新为无序列表。创建一个新的<li>元素的每一个产品,我们会使用一种特殊的属性(又名指令)Vue称为v-for。这样,每个产品都可以得到自己的列表项。

如果我们跳进浏览器,这就是我们看到的:

这仍然有点人为设计,所以让我们先把列表清空,然后从实际的API中取出我们的产品列表,这些API可能来自某个数据库。

如果我们查看打印到页面的内容,我们将看到:

如您所见,每个列表项都显示返回的对象。为了让这些数据被人类读取,我们需要改变它显示的方式。

我们的结果是:

我们要注意到数量0的物品,让我们添加一个<span,>内容“缺货”。我们只想在我们的item.quantity = = = 0的出现,所以我们将使用Vue的v-if指令。

当然,我们的夹克已经没货了:

如果我们想打印出我们列表中的产品总数呢?我们需要创建一个计算属性称为totalproducts,返回我们的产品总数量。如果您不熟悉JavaScript reduce函数的话,我说明下它将从每个产品中添加所有数量。

正如你可以看到下面,我们现在可以将我们的总库存打印出来。

这会儿也可能告诉你关于使用vue.js的Chrome扩展工具的一个很好的时机。扩展工具的一个很好的特性是,您可以检查加载到页面上的数据。

还有一些Vue的响应,让我们看看在数组中删除2项会发生什么。正如你在下面看到的,不仅是我们的名单更新了,而且我们的总数也是如此。

接下来,我将向您展示如何通过使用按钮来增加对该页面的交互性。我们将为每个产品创建一个添加按钮,当单击此按钮时,我们将增加一个数量。

注意,当我们添加一个项目(下)时,不仅总库存得到更新,而且如果我们增加我们的夹克产品,我们的库存通知就会消失。

但是,如果我们只想写夹克或远足袜的数量呢?我们只需要创建一个新的输入字段,并将其绑定到我们的产品数量通过v-model指向它,并指定这始终是一个number即可。

你会注意到我现在可以输入每个项目的总数量,并立即获得更新。我甚至可以把数量设置为零,我得到了我的库存,我的添加按钮也仍然可以工作。

你可以完成这个版本的项目的后,去JSFiddle运行它,当然也可以去汇智网(www.hubwiz.com)运行它。

Vue的一些特点

如果我们把它构建成一个更大的应用程序,那么我们就要开始把它分解成多个组件和文件,以使程序变得更有条理。

Vue甚至提供一个命令行接口,使简单的开始迅速发展真正的项目。正如您在下面看到的,init命令可以用来启动一个新项目。

我们还可以使用单文件——.Vue 组件文件,其中包含HTML,JavaScript,CSS甚至 SCSS。

你在这里看到的只触及到Vue表面上可以做什么。有很多东西可以帮助你构建、组织和扩展你的前端应用程序。要真正开始编码,我将推荐两种资源。一个是去下载资源手册表到这里:http://www.vuemastery.com/download-1,另外一个是官方文件:https://vuejs.org/v2/guide/。

当然你也可以去试试在线方式的全网性价比最好汇智网的vue.js课程: http://www.hubwiz.com

最后,我要感谢Evan You,Chris Fritz,Sarah Drasner,和帮助我创造这个内容及视频的Adam Jahr。

汇智网,小智翻译。内容有修改。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始。你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这...

    笔阁
  • VueJS && ReactJS 如何?听听别人怎么说

    使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。

    笔阁
  • vue.js快速上手

      Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

    笔阁
  • 使用sonatype/nexus构建企业级内部pypi仓库

    •pypiserver•sonatype/nexus•jfrog Artifactory•devpi•docker-pypi•使用github实现pypi私服•...

    追马
  • 想提高爬虫效率?aiohttp 了解下

    对于爬虫程序,我们往往会很关注其爬虫效率。影响爬虫效率有几个因素有,是否使用多线程,I/O 操作,是否同步执行等。其中 I/O 操作、同步执行是最影响爬虫效率的...

    猴哥yuri
  • Vue 2.5中将迎来有关TypeScript的优化!

    自Vue2.0发布以来,一直有开发者提出请求,希望能更好地集成TypeScript。从那时起,我们已经为大多数核心库( vue, vue-router, vue...

    疯狂的技术宅
  • 机器学习 | 猫狗大战

    对于机器学习来说,数据的重要性无可厚非,大部分处理机器学习的问题都是在处理数据,包括数据的清洗,归一化等,好的数据质量能大大提高模型的预测性能

    机器视觉CV
  • Python自动化开发学习19-Djan

    接下来,我们把Django分为视图(View)、路由系统(URL)、ORM(Model)、模板(Templates )这4块进行学习。

    py3study
  • 【编程指导】如何系统、科学地自学编程知识?

    对于什么样的学习才算得上“系统”几乎是一个哈姆雷特式的问题——人们很难在这一问题上达成一致。 因此抛出答案几乎只是在引发更多的争议。所以在讨论这个问题的时候,我...

    程序员互动联盟
  • [WPF自定义控件库]使用TextBlockHighlightSource强化高亮的功能,以及使用TypeConverter简化调用

    上一篇文章介绍了使用附加属性实现TextBlock的高亮功能,但也留下了问题:不能定义高亮(或者低亮)的颜色。为了解决这个问题,我创建了TextBlockHig...

    dino.c

扫码关注云+社区

领取腾讯云代金券