为什么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运行它,当然也可以去汇智网(***)运行它。
Vue的一些特点
如果我们把它构建成一个更大的应用程序,那么我们就要开始把它分解成多个组件和文件,以使程序变得更有条理。
Vue甚至提供一个命令行接口,使简单的开始迅速发展真正的项目。正如您在下面看到的,init命令可以用来启动一个新项目。
我们还可以使用单文件——.Vue 组件文件,其中包含HTML,JavaScript,CSS甚至 SCSS。
你在这里看到的只触及到Vue表面上可以做什么。有很多东西可以帮助你构建、组织和扩展你的前端应用程序。要真正开始编码,我将推荐两种资源。一个是去下载资源手册表到这里:http://www.vuemastery.com/download-1,另外一个是官方文件:https://vuejs.org/v2/guide/。
当然你也可以去试试在线方式的全网性价比最好汇智网的vue.js课程:
http://***
最后,我要感谢Evan You,Chris Fritz,Sarah Drasner,和帮助我创造这个内容及视频的Adam Jahr。
汇智网,小智翻译。内容有修改。
为什么43%前端开发者想学Vue.js的更多相关文章
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- 前端知识(一)04 Vue.js入门-谷粒学院
目录 一.介绍 1.Vue.js 是什么 2.初识Vue.js 二.基本语法 1.基本数据渲染和指令 2.双向数据绑定 3.事件 4.修饰符 5.条件渲染 6.列表渲染 7.实例生命周期 一.介绍 1 ...
- 主流前端框架对比:Vue.js , React, Angular.js
个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- 为什么推荐前端使用Vue.js
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
随机推荐
- VC在windows中打开文件夹并选中文件
网上一位前辈高人的一段精髓代码让我眼前一亮…… ShellExecute(NULL, "open", "explorer.exe", "/select ...
- 使用jsmin压缩javascript脚本
官方地址:http://www.crockford.com/javascript/jsmin.html 点击页下方的”zip file containing an MS-DOS.exe file“下载 ...
- 正则表达式:日期,电话,邮箱等常用字符串;js中日期的带下的比较,获取不同格式的日期
一.日期 (1)首先需要验证年份,显然,年份范围为 0001 - 9999,匹配YYYY的正则表达式为: [0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1- ...
- Tomcat从零开始(十七)——StandardWrapper
第十七课:StandardWrapper 课前复习: 不知道大家是否还有印象,就是在6.7节课说的4种container,粗略的从大到小来说就是engine,host,context,和wrapper ...
- 解决oracle和plsql乱码问题
oracle 10g装上后,建了个表写入中文数据,发现通过工具DbVisualizer 6.5 写入/读取中文都正常,就sqlplus和PL/SQL Developer不正常. 初步怀疑是DbVisu ...
- 为何 IntelliJ IDEA 比 Eclipse 更好
http://www.oschina.net/news/26929/why-intellij-is-better-than-eclipse圣战 有一些没有唯一正确答案的“永恒”的问题,例如哪个更好:是 ...
- css中属性值继承小解
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...
- angularJS 第一天 使用模型与控制器绑定数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- oracle 数据导入和导出(原创)
oracle的数据导入导出必须是在两个地方建立相同的用户才能完整导入(本地导入新的数据库需重建权限).所以导入就得按以下步骤进行: 假定服务器端用户为puser 服务器端导出可以这样做: 导出数据:e ...
- 物联网通信协议——比较-MQTT、 DDS、 AMQP、XMPP、 JMS、 REST、 CoAP
物联网通信协议——比较-MQTT. DDS. AMQP.XMPP. JMS. REST. CoAP AMQP & MQTT & DDS (https://www.youtube.c ...