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

2017-12-28 679

根据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更新为无序列表。创建一个新的

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

如果我们跳进浏览器，这就是我们看到的：

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

如果我们查看打印到页面的内容，我们将看到：

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

我们的结果是：

我们要注意到数量0的物品，让我们添加一个

Vue的一些特点

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

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

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

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

你也可以访问这个Vue.js 2 全家桶课程系列中的vue.js入门与提高：
http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

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

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

分享最新的Vue.js 2 全家桶系列教程：

1.vue.js 入门与提高: http://xc.hubwiz.com/course/vue.js
2.vuex 2 入门与提高: http://xc.hubwiz.com/course/vuex
3.vue-router 入门与提高: http://xc.hubwiz.com/course/vuerouter
4.vue.js 工程化实践: http://xc.hubwiz.com/course/vuegch

微信关注我们

原文链接：https://yq.aliyun.com/articles/617141

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

constructor设计模式

在经典的面向对象编程语言中，constructor是一个特殊的方法，被用来初始化一个新建的对象，一旦该对象被分配内存话。在JavaScript中几乎所有的东西都是一个对象，然而常常引起我们兴趣的是对象的constructor。对象的构造函数用于创建特定类型的对象（既要准备使用对象，也要接收参数），构造函数在创建对象时可以用来设置成员属性和方法的值。创建对象在JavaScript中创建对象的三种通用方法如下： // 每种方法将创建一个空对象 var newObject = {} // or var newObject = Object.create( Object.prototype ) // or var newObject = new Object(); 最后一个方法实现对象的创建可以传入指定的值，如果没有传递，将创建一个空对象，然后返回它。传入String，返回String，类似于new String(); 传入Number，返回Number，类似于new Number(); 传入Object，返回Object，相当于没传为对象指定键和值有如下四种方法：兼容ES3的方...

2017-12-29

657

Java多线程中的ThreadLocal，可继承，可修改。 package test; import java.util.Date; public class InheritableThreadLocalExt extends InheritableThreadLocal<Object>{ @Override protected Object initialValue() { return new Date().getTime(); } @Override protected Object childValue(Object parentValue) { return parentValue + " insert at child thread."; } } package test; public class Tools { public static InheritableThreadLocalExt tl = new InheritableThreadLocalExt(); } package test; public class ThreadA extends Th...

2017-12-29

614

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。