一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

Vue 是一个专注于构建Web 用户界面的JavaScript 库。本文首先通过一段简单的介绍让你对Vue 有一个初步的认识,然后创建一个Web 应用。

为什么需要这个前端框架

相对来说,Vue 在JavaScript 前端领域属于后来者,但是对于当前主流JavaScript 库的地位具有很大的威胁。它易用、灵活、速度快,还提供了许多功能和可选工具,这使得开发者能够快速地构建一个现代Web 应用。Vue 的作者尤雨溪将其称为渐进式框架。

■ Vue 遵循渐进增量的设计原则,其核心库专注于用户界面,使得现有的项目可以方便地集成使用Vue。

■ Vue 既可以构建出很小的原型,又可以构建出复杂的大型Web 应用。

■ Vue 非常容易上手——初学者能轻松掌握Vue,而已经熟悉Vue 的开发者则可以在实际项目中快速发挥出它的作用。

Vue 整体上遵循MVVM(Model-View-ViewModel,模型-视图-视图模型)架构,也就是说View(用户界面或视图)和Model(数据)是独立的,ViewModel(Vue)是View 和Model交互的桥梁。Vue 对View 和Model 之间的更新操作做了自动化处理,并且已经为开发者进行了优化。因此,当View 的某个部分需要更新时,开发者并不需要特别指定,Vue 会选择恰当的方法和时机进行更新。

Vue 还吸取了其他类似框架(如React、Angular 和Polymer)的精华。下面是对Vue 核心功能的概述。

■ 一个响应式的数据系统,能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面。

■ 灵活的视图声明,包括优雅友好的HTML 模板、JSX(在JavaScript 中编写HTML 的技术)以及hyperscript 渲染函数(完全使用JavaScript)。

■ 由可维护、可复用组件构成的组件化用户界面。

■ 官方的组件库提供了路由、状态管理、脚手架以及更多高级功能,使Vue 成为了一个灵活且功能完善的前端框架。

这是一个有发展前景的项目

2013 年,尤雨溪开始筹划构建Vue 的第一版原型。那时候尤雨溪任职于Google,并在工作中使用Angular。尤雨溪最初的目标是吸取Angular 中所有优秀的功能,比如数据绑定和数据驱动DOM,并摒弃会导致框架死板、难以学习和使用的一些功能。

Vue 于2014 年2 月首次公开亮相,并在第一天就大获成功:出现在HackerNews 首页,在Reddit 的/r/javascript 板块中位居榜首,并且其官网获得了1 万次独立访问。

Vue 的第一个主要版本1.0 于2015 年10 月发布。截至2015 年年底,Vue 在npm中的下载量飙升至38.2 万次,在GitHub 上收获了1.1 万个star,其官网获得了36.3 万次独立访问。主流的PHP 框架Laravel 选用Vue 替代React 作为其官方的前端库。

Vue 的第二个主要版本2.0 于2016 年9 月发布,具有基于虚拟DOM 的全新渲染器以及许多新特性,比如服务端渲染和性能提升等。Vue 是目前速度最快的前端框架之一。根据与React 团队共同得出的对比报告,Vue 的性能甚至优于React(https://cn.vuejs.org/v2/guide/comparison)。截至发文前,Vue 位居GitHub 流行前端框架第一位,有12.5万个star,已超越React、Angular 。参见:https://github.com/collections/front-end-javascript-frameworks。

如今,有许多公司都在使用Vue,比如微软、Adobe、阿里巴巴、百度、小米、Expedia、任天堂和GitLab

兼容性要求

Vue 没有任何第三方依赖,可以在所有兼容ECMAScript 5 的浏览器中使用。这也就是说它不支持Internet Explorer 8 及以下版本,因为Vue 使用了JavaScript 中相对较新的特性,比如Object.defineProperty,而它们在老版本的浏览器中是无法polyfill 的。

一分钟设置

事不宜迟,下面我们通过快速设置来创建第一个Vue 应用。由于Vue 与生俱来的灵活性,只需要一个简单的<script>标签就能添加到任意Web 页面中。下面创建一个包含Vue 库的简单Web 页面,其中有一个简单的div 元素和一个<script>标签:

<html><head><meta charset=\”utf-8\”><title>Vue Project Guide setup</title></head><body><!– 将库添加到这里 –><script src=\”https://unpkg.com/vue/dist/vue.js\”></script><!– 一些HTML 代码 –><div id=\”root\”><p>Is this an Hello world?</p></div><!– 一些JavaScript 代码 –><script>console.log(\’Yes! We are using Vue version\’, Vue.version)</script></body></html>

在浏览器的控制台中,可以看到类似如下的内容:

Yes! We are using Vue version 2.0.3

正如上面的代码所示,库对外提供了一个Vue 对象,该对象包含使用Vue 所需的所有功能。至此,一切就绪。

创建一个应用

现在,这个Web 页面中还没有运行Vue 应用。整个库都是基于Vue 实例的,而实例是View和Model(数据)交互的桥梁。因此需要创建一个新的Vue 实例来启动应用:

// 创建Vue 实例var app = new Vue({// 根DOM 元素的CSS 选择器el: \’#root\’,// 一些数据data () {return {}},})

在上面的代码中,使用关键字new 调用Vue 构造器创建了一个新的实例。Vue 构造器有一个参数—— option 对象。该参数可以携带多个属性(称为选项),这里只使用其中的两个属性。

通过el 选项,我们使用CSS 选择器告知Vue 将实例添加(挂载)到Web 页面的哪个DOM元素中。在这个示例中,Vue 实例将使用<div id=\”root\”> DOM元素作为其根元素。另外,也可以使用Vue 实例的$mount 方法替代el 选项:

var app = new Vue({data () {return {message: \’Hello Vue.js!\’,}},})// 添加Vue 实例到页面中app.$mount(\’#root\’)

TIP:Vue 实例的大多数特殊方法和属性都是以美元符号($)开头的。

我们还会在data 选项中初始化一些数据,利用了携带一个字符串的message 属性。现在Vue 应用运行起来了,但是此处还并没有做什么。

在单个Web 页面中,开发者可以添加任意多个Vue 应用。只需要为每个应用创建出新的Vue 实例并挂载到不同的DOM元素即可。当想要将Vue 集成到已有的项目中时,这非常方便。

Vue 开发者工具

Vue 有一个官方调试工具,在Chrome 中以扩展的方式呈现,名为Vue.js devtools。通过该工具可以看到应用的运行情况, 这有助于调试代码。可以在Chrome 网上应用商店(https://chrome.google.com/webstore/search/vue)下载;如果使用Firefox,则可以到Firefox 附加组件(https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss)下载。

使用Chrome 版本的话,还需要进行额外的设置。在扩展设置中,启用Allow access to fileURLs 选项,这样调试工具就能在从本地磁盘打开的Web 页面上检测Vue 了。

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

打开我们的Web 页面,按快捷键F12(在OS X 中快捷键是Shift command c)打开Chrome开发者工具,然后找到Vue 选项卡(有可能隐藏在More tools…下拉菜单中)。打开该选项卡之后,就可以看到一棵默认名为Root 的Vue 实例树。如果点击Root 的话,会在侧边栏上显示出实例的相关属性。

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

TIP:可以将devtools 选项卡拖放到喜欢的位置。建议将其放在靠前的位置,因为当Vue 不处于开发模式或没有运行时,该选项卡在页面中是隐藏起来的。

可以通过name 选项修改Vue 实例的名字:

var app = new Vue({name: \’MyApp\’,// …})

当一个页面中有多个Vue 实例时,这有助于直观地在开发者工具中找到具体的某个实例。

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

借助模板实现DOM 的动态性

在Vue 中,开发者可采用多种方式编写View。现在,我们先从模板开始。模板是描述View最简单的方法,因为它看起来很像HTML,并且只需要少量额外的语法就能轻松实现DOM的动态更新。

文本显示

先来看看模板的第一个功能:文本插值。文本插值用于在Web 页面中显示动态的文本。文本插值的语法是在双花括号内包含单个任意类型的JavaScript 表达式。当Vue 处理模板时,该JavaScript 表达式的结果将会替换掉双花括号标签。用下面的代码替换掉<div id=\”root\”>元素:

<div id=\”root\”><p>{{ message }}</p></div>

在上面的模板中,有一个<p>元素。该元素的内容是JavaScript 表达式message 的结果。该表达式将返回Vue 实例中message 属性的值。现在应该可以在Web 页面中看到输出了一行新的文本内容:Hello Vue.js!。这看起来只是显示了一个字符串,但是Vue 已经为开发者做了很多事情——DOM和数据连通了。

为了证明这一点,我们打开浏览器控制台并修改app.message 的值,然后按回车键:

app.message = \’Awesome!\’

可以发现显示的文本发生了改变。这背后的技术称为数据绑定。也就是说每当数据有改变时,Vue 都能够自动更新DOM,不需要开发者做任何事情。Vue 框架中包含一个非常强大且高效的响应式系统,能对所有的数据进行跟踪,并且能在数据发生改变时按需自动更新View。所有这些操作都非常快。

利用指令添加基本的交互

接下来在我们的静态应用中加入交互性吧。例如,允许用户通过输入文本修改页面中显示的内容。要达到这样的交互效果,可以在模板中使用称为指令的特殊HTML 属性。

Vue 中所有的指令名都是带v-前缀的,并遵循短横线分隔式(kebab-case)语法。这意味着要用短横线将单词分开。HTML 属性是不区分大小写的(大写或小写都没有任何问题)。

在此,需要使用的指令是v-model,它将<input>元素的值与message 数据属性进行绑定。在模板里面添加一个新的<input>元素,该元素带有v-model=\”message\”属性:

<div id=\”root\”><p>{{ message }}</p><!– 添加一个文本输入框 –><input v-model=\”message\” /></div>

当input 值发生改变时,Vue 会自动更新message 属性。你可以在input 中输入一些内容,验证文本内容是否会随着输入的变化而变化,以及开发者工具中值的变化:

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

Vue 提供了许多指令,开发者还可以自定义指令。

小结

本文首先快速设置了一个Web 页面来着手使用Vue,然后编写了一个示例应用。我们在页面中创建并挂载了一个Vue 实例到DOM中,接着编写模板实现了DOM 的动态性。在这个模板中,我们借助文本插值用一个JavaScript 表达式来显示文本内容。最后,通过v-model 指令将input元素绑定到数据属性,给Web 页面添加了一些交互。

——本文选自《Vue.js项目实战》


如果大家想使用Vue 创建真正的Web 应用,请参考下面这本书。

一文快速了解Github上最流行的Web框架——Vue.js入门(主流web框架)

本书由6个具体的项目构成。在学习每个项目时,作者带领读者亲手构建一个实际的应用。这也就意味着,学完本书时,我们将拥有6个可以运行的Vue应用。

第 1 章 Vue开发入门

第 2 章 项目1:Markdown笔记本

第 3 章 项目2:城堡决斗游戏

第 4 章 高级项目设置

第 5 章 项目3:支持中心

第 6 章 项目4:博客地图

第 7 章 项目5:在线商店以及扩展

第 8 章 项目6:使用Meteor开发实时仪表盘

点击【了解更多】跳转到京东购买图书

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月14日 下午12:49
下一篇 2024年5月14日 下午1:01

相关推荐

  • 三甲医院都是用东华医疗软件看病吗

    东华医疗软件是一款十分先进的医疗软件,可以帮助三甲医院的医生快速准确地诊断疾病。这款软件使用了人工智能技术,可以根据医生输入的症状和数据,快速准确地分析病情,并提供有效的治疗方案。…

    联系我们 2024年12月1日
    5
  • 《合肥市工程建设项目招标投标管理办法》解读(合肥市工程总承包项目招标投标导则)

    现将《合肥市工程建设项目招标投标管理办法》主要内容解读如下: 一、出台背景和依据 《安徽省建筑工程招标投标管理办法》(安徽省人民政府令第301号)经省政府第125次常务会议修订通过…

    联系我们 2022年6月1日
    367
  • 青铜器项目管理

    青铜器项目管理 青铜器是一种古老的文化遗产,代表着人类对自然和历史文化的认识和探索。在过去的几千年中,青铜器成为了人类社会中不可或缺的一部分。然而,随着人类社会的发展,青铜器的制作…

    联系我们 2024年9月18日
    23
  • 老师拿的学校科研项目没完成会怎么样

    老师拿的学校科研项目没完成会怎么样 在教育领域,科研项目是教师工作中重要的一部分。这些项目不仅可以为教师提供实践机会,还可以提高他们的学术水平。然而,如果老师拿的学校科研项目没完成…

    联系我们 2024年12月9日
    1
  • 「斑马进度宝典」一文读懂横道图设置方式,各种参数修改全明白了

    本教程适用于:广联达斑马进度计划软件-官方正版免费下载使用 一、修改横道图父工作样式: 【属性设置】—【表格及横道】—【父工作样式】 二、修改横道图【上下左右】显示信息: 【属性设…

    2022年6月1日
    1.4K
  • 医学科研立项等建议

    医学科研立项等建议 随着医学领域的不断发展,医学科研已经成为推动医学进步的重要力量。医学科研立项是医学研究中至关重要的一步,它关系到研究成果的质量和实用性。本文将提供一些医学科研立…

    联系我们 2024年12月2日
    2
  • 食堂费用管理办法

    食堂费用管理办法 随着经济的发展和生活水平的提高,人们对饮食的需求也越来越高。学校作为一个重要的社会单位,也为了满足学生的需求,制定了食堂费用管理办法。 食堂费用管理办法是学校制定…

    联系我们 2024年12月11日
    1
  • 软件项目管理书籍

    软件项目管理书籍:软件项目成功的关键因素 随着信息技术的不断发展,软件开发已经成为现代社会中不可或缺的一部分。软件开发项目的成功离不开良好的项目管理,而软件项目管理书籍则是了解软件…

    联系我们 2024年12月9日
    0
  • Effie:有哪些好用的计划目标、时间管理的手机应用?

    对于高效率人士而言,如何处理任务和安排时间成为日常工作生活的重要课题。 由于这种刚性需求,在各大应用商场中存在大量的任务管理和时间管理应用。面对这些形形色色的任务管理和时间管理应用…

    2022年6月6日
    478
  • 研发人员更换通知单

    尊敬的研发人员们: 大家好! 为了更好地管理和推动我们公司的技术创新,我们计划对研发人员的工作简历和推荐信进行更换。 因此,我们特此通知各位研发人员,要求他们在收到通知后尽快完成更…

    联系我们 2024年12月6日
    0