博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
为什么43%前端开发者想学Vue.js
阅读量:6136 次
发布时间:2019-06-21

本文共 1618 字,大约阅读时间需要 5 分钟。

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

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

伟大的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的物品,让我们添加一个

Vue的一些特点

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

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

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

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

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

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

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

你也可以访问这个Vue.js 2 全家桶课程系列中的vue.js入门与提高:

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

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

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

1.vue.js 入门与提高:

2.vuex 2 入门与提高:
3.vue-router 入门与提高:
4.vue.js 工程化实践:

转载地址:http://ykrua.baihongyu.com/

你可能感兴趣的文章
linux:yum和apt-get的区别
查看>>
Sentinel 1.5.0 正式发布,引入 Reactive 支持
查看>>
如何对网站进行归档
查看>>
数据库之MySQL
查看>>
2019/1/15 批量删除数据库相关数据
查看>>
数据类型的一些方法
查看>>
Mindjet MindManager 2019使用教程:
查看>>
游戏设计的基本构成要素有哪些?
查看>>
详解 CSS 绝对定位
查看>>
AOP
查看>>
我的友情链接
查看>>
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>
腾讯云加入LoRa联盟成为发起成员,加速推动物联网到智联网的进化
查看>>