V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
geek123
V2EX  ›  程序员

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

  •  
  •   geek123 · 2017-12-29 14:54:31 +08:00 · 2463 次点击
    这是一个创建于 2282 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    伟大的 JavaScript 迁移

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

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

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

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

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

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

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

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

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

    我们的第一个 Vue 项目

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

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

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

    用 Vue 开始构建很简单。

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

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

    如你所见,它有效:

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

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

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

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

    这与任何类型的数据无关 , 不只是字符串。因此,我们不必使用单一产品,而是使用一系列产品,并将 H2 更新为无序列表。创建一个新的

  • 元素的每一个产品,我们会使用一种特殊的属性(又名指令) Vue 称为 v-for。这样,每个产品都可以得到自己的列表项。

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

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

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

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

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

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

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

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

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

    我们的结果是:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Vue 的一些特点

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

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

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

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

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

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

    你在这里看到的只触及到 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。

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

  • 第 1 条附言  ·  2018-03-06 11:05:40 +08:00

    vue.js 2

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2752 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:10 · PVG 20:10 · LAX 05:10 · JFK 08:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.