PROFILPELAJAR.COM

Vue.js
原作者	尤雨溪
首次发布	2014年2月，10年前
当前版本	3.5.13（2024年11月15日；穩定版本）;
源代码库	github.com/vuejs/core;
编程语言	TypeScript
平台	跨平台
类型	JavaScript函式庫
许可协议	MIT许可证
网站	vuejs.org/

Vue.js（/vjuː/，简称Vue）是一个用于创建用户界面的开源 MVVM 前端 JavaScript框架，也是一个创建单页应用的Web应用框架^[4]。Vue.js由尤雨溪创建，由他和其他活跃的核心团队成员维护^[5]。

2016年一项针对JavaScript框架的调查表明，Vue有着89%的开发者满意度。^[6]在GitHub上，该项目平均每天能收获95颗星，^[6]^[7]为GitHub有史以来星标数第3多的项目。^[8]

综述

Vue.js是一款JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

历史

在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。^[9]Vue最早发布于2014年2月。作者在Hacker News、Echo JS与Reddit的/r/javascript版块^[10]发布了最早的版本。一天之内，Vue就登上这三个网站的首页。^[11]Vue是Github上最受欢迎的开源项目之一。^[12]同时，在JavaScript框架/函式库中，Vue所获得的星标数已超過React，並高于Backbone.js、Angular 2、jQuery等项目。

版本名称通常来自漫画和动畫，其中大部分属于科幻小说类型。

版本

版本	发布日期	版本名称
3.4	000000002023-12-28-00002023年12月28日	Slam Dunk
3.3	000000002023-05-11-00002023年5月11日	Rurouni Kenshin
3.2	000000002021-08-05-00002021年8月5日	Quintessential Quintuplets^[13]
3.1	000000002021-06-07-00002021年6月7日	Pluto^[14]
3.0	000000002020-09-18-00002020年9月18日	One Piece^[15]
2.7	000000002022-07-01-00002022年7月1日	Naruto^[16]
2.6	000000002019-02-04-00002019年2月4日	Macross^[17]
2.5	000000002017-10-13-00002017年10月13日	Level E^[18]
2.4	000000002017-07-13-00002017年7月13日	Kill la Kill^[19]
2.3	000000002017-04-27-00002017年4月27日	JoJo's Bizarre Adventure^[20]
2.2	000000002017-02-26-00002017年2月26日	Initial D^[21]
2.1	000000002016-11-22-00002016年11月22日	Hunter X Hunter^[22]
2.0	000000002016-09-30-00002016年9月30日	Ghost in the Shell^[23]
1.0	000000002015-10-27-00002015年10月27日	Evangelion^[24]
0.12	000000002015-06-12-00002015年6月12日	Dragon Ball^[25]
0.11	000000002014-11-07-00002014年11月7日	Cowboy Bebop^[26]
0.10	000000002014-03-23-00002014年3月23日	Blade Runner^[27]
0.9	000000002014-02-25-00002014年2月25日	Animatrix^[28]
0.8	000000002014-01-27-00002014年1月27日	不適用 ^[29]
0.7	000000002013-12-24-00002013年12月24日	不適用 ^[30]
0.6	000000002013-12-08-00002013年12月8日	VueJS ^[31]

特性

组件

组件是Vue最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue中，组件是基础HTML元素的拓展，可方便地自定义其数据与行为。^[32]下方的代码是Vue组件的一个示例，渲染为一个能计算鼠标点击次数的按钮。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">我被点击了 {{ count }} 次！</button>'
})

模板

Vue使用基于HTML的模板语法，允许开发者将DOM元素与底层Vue实例中的数据相绑定。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。^[33]

此外，Vue允许开发者直接使用JSX（英语：React (JavaScript library)#JSX）语言作为组件的渲染函数，以代替模板语法。^[34]以下为可计算点击次数的按钮的JSX渲染版本（需配置相应Babel编译器）：

Vue.component('buttonclicked', {
  props: [ 'initial_count' ],
  data() {
    return { count: 0 };
  },
  render(h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    onclick() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

响应式设计

响应式是指MVC模型中的视图随着模型变化而变化。在Vue中，开发者只需将视图与对应的模型进行绑定，Vue便能自动观测模型的变动，并重绘视图。这一特性使得Vue的状态管理变得相当简单直观。^[35]

过渡效果

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：

在CSS过渡和动画中自动应用class；
可以配合使用第三方CSS动画库，如Animate.css；
在过渡钩子函数中使用JavaScript直接操作DOM；
可以配合使用第三方JavaScript动画库，如Velocity.js。^[36]

单文件组件（SFC）

为了更好地适应复杂的项目，Vue支持以.vue为扩展名的文件来定义一个完整组件，用以替代使用Vue.component注册组件的方式。开发者可以使用Vite或Webpack等构建工具来打包单文件组件。^[37]

生态系统

核心库附带由核心团队和贡献者开发的工具和库。

官方工具

Devtools：用于调试Vue.js应用程序的浏览器开发人员工具扩展
Vue CLI和Vite：用于快速开发Vue.js的标准工具
Vue Loader：一个webpack的加载器（loader），允许以SFC格式编写Vue组件

官方库

Vue Router：Vue.js的官方路由，允许开发者编写在多个视图中切换的单网页应用程序
Pinia和Vuex：Vue.js的状态管理库
Vue Server Render：Vue.js的服务器端渲染（Server Side Rendering，SSR）

参见

参考文献

^ First Week of Launching Vue.js. Evan You. [2017-09-19]. （原始内容存档于2019-02-05）.
^ Release 3.5.13. 2024年11月15日 [2024年11月27日].
^ vue/LICENSE. GitHub. [2017-04-17]. （原始内容存档于2019-03-22）.
^ Introduction — Vue.js. [2017-03-11]. （原始内容存档于2019-03-09）（英语）.
^ Meet the Team — Vue.js. vuejs.org. [2019-09-23]. （原始内容存档于2022-01-15）（英语）.
^ ^6.0 ^6.1 State Of JavaScript Survey Results: Front-end Frameworks. [2017-03-11]. （原始内容存档于2017-04-17）（英语）.
^ Trending JavaScript Frameworks. [2017-05-18]. ^{[永久失效連結]}
^ Most Starred Repositories. GitHub. [2020-02-17]. （原始内容存档于2022-02-18）.
^ Between the Wires interview with Evan You. Between the Wires. 2016-11-03 [2017-08-26]. （原始内容存档于2017-06-03）（英语）.
^ r/javascript - Vue.js - MVVM made simple. reddit. [2019-04-17]. （原始内容存档于2021-05-06）（英语）.
^ First Week of Launching Vue.js. Evan You. [2017-03-11]. （原始内容存档于2017-04-12）（英语）.
^ GitHub 排行榜 Top 200，热门开源项目推荐 - GitHub中文社区. 2023-02-17. （原始内容存档于2023-02-17）（中文（中国大陆））.
^ v3.2.0 Quintessential Quintuplets. GitHub. 2021-08-05 [2021-08-10]. （原始内容存档于2021-08-10）.
^ v3.1.0 Pluto. GitHub. 2021-06-07 [2021-07-18]. （原始内容存档于2021-07-18）.
^ v3.0.0 One Piece. GitHub. 2020-09-18 [2020-09-23]. （原始内容存档于2020-09-19）.
^ v2.7.0 Naruto. GitHub. 2022-07-01 [2022-07-01]. （原始内容存档于2022-07-01）.
^ v2.6.0 Macross. GitHub. 2019-02-04 [2020-09-23]. （原始内容存档于2020-11-11）.
^ v2.5.0 Level E. GitHub. 2017-10-13 [2020-09-23]. （原始内容存档于2020-09-18）.
^ v2.4.0 Kill la Kill. GitHub. 2017-07-13 [2020-09-23]. （原始内容存档于2020-11-09）.
^ v2.3.0 JoJo's Bizarre Adventure. GitHub. 2017-04-27 [2020-09-23]. （原始内容存档于2020-11-11）.
^ v2.2.0 Initial D. GitHub. 2017-02-26 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v2.1.0 Hunter X Hunter. GitHub. 2016-11-22 [2020-09-23]. （原始内容存档于2020-11-08）.
^ v2.0.0 Ghost in the Shell. GitHub. 2016-09-30 [2020-09-23]. （原始内容存档于2020-10-27）.
^ 1.0.0 Evangelion. GitHub. 2015-10-27 [2020-09-23]. （原始内容存档于2021-04-13）.
^ 0.12.0: Dragon Ball. GitHub. 2015-06-12 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v0.11.0: Cowboy Bebop. GitHub. 2014-11-07 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v0.10.0: Blade Runner. GitHub. 2014-03-23 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v0.9.0: Animatrix. GitHub. 2014-02-25 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v0.8.0. GitHub. 2014-01-27 [2020-09-23]. （原始内容存档于2021-04-13）.
^ v0.7.0. GitHub. 2013-12-24 [2020-09-23]. （原始内容存档于2021-04-13）.
^ 0.6.0: VueJS. GitHub. 2013-12-08 [2020-09-23]. （原始内容存档于2021-04-13）.
^ Components — Vue.js. [2017-03-11]. （原始内容存档于2021-06-06）（英语）.
^ 模板语法 - Vue.js. [2017-09-19]. （原始内容存档于2022-05-05）（中文（中国大陆））.
^ Template Syntax — Vue.js. [2017-03-11]. （原始内容存档于2021-11-04）（英语）.
^ Reactivity in Depth — Vue.js. [2017-03-11]. （原始内容存档于2021-05-06）（英语）.
^ 进入/离开 & 列表过渡 - Vue.js. [2017-09-19]. （原始内容存档于2022-04-03）（中文（中国大陆））.
^ 单文件组件 - Vue.js. [2017-09-19]. （原始内容存档于2022-04-03）（中文（中国大陆））.

外部链接

官方网站（英文）
官方网站（简体中文）

[1] First Week of Launching Vue.js. Evan You. [2017-09-19]. （原始内容存档于2019-02-05）.

[wikidata-5400cab01a9c215238b266f81a8767c7c6b46ac5-v3-2] Release 3.5.13. 2024年11月15日 [2024年11月27日].

[license-3] vue/LICENSE. GitHub. [2017-04-17]. （原始内容存档于2019-03-22）.

[4] Introduction — Vue.js. [2017-03-11]. （原始内容存档于2019-03-09）（英语）.

[5] Meet the Team — Vue.js. vuejs.org. [2019-09-23]. （原始内容存档于2022-01-15）（英语）.

[stateofjs-6] 6.0 ^6.1 State Of JavaScript Survey Results: Front-end Frameworks. [2017-03-11]. （原始内容存档于2017-04-17）（英语）.

[7] Trending JavaScript Frameworks. [2017-05-18]. ^{[永久失效連結]}

[8] Most Starred Repositories. GitHub. [2020-02-17]. （原始内容存档于2022-02-18）.

[9] Between the Wires interview with Evan You. Between the Wires. 2016-11-03 [2017-08-26]. （原始内容存档于2017-06-03）（英语）.

[10] r/javascript - Vue.js - MVVM made simple. reddit. [2019-04-17]. （原始内容存档于2021-05-06）（英语）.

[11] First Week of Launching Vue.js. Evan You. [2017-03-11]. （原始内容存档于2017-04-12）（英语）.

[12] GitHub 排行榜 Top 200，热门开源项目推荐 - GitHub中文社区. 2023-02-17. （原始内容存档于2023-02-17）（中文（中国大陆））.

[13] v3.2.0 Quintessential Quintuplets. GitHub. 2021-08-05 [2021-08-10]. （原始内容存档于2021-08-10）.

[14] v3.1.0 Pluto. GitHub. 2021-06-07 [2021-07-18]. （原始内容存档于2021-07-18）.

[15] v3.0.0 One Piece. GitHub. 2020-09-18 [2020-09-23]. （原始内容存档于2020-09-19）.

[16] v2.7.0 Naruto. GitHub. 2022-07-01 [2022-07-01]. （原始内容存档于2022-07-01）.

[17] v2.6.0 Macross. GitHub. 2019-02-04 [2020-09-23]. （原始内容存档于2020-11-11）.

[18] v2.5.0 Level E. GitHub. 2017-10-13 [2020-09-23]. （原始内容存档于2020-09-18）.

[19] v2.4.0 Kill la Kill. GitHub. 2017-07-13 [2020-09-23]. （原始内容存档于2020-11-09）.

[20] v2.3.0 JoJo's Bizarre Adventure. GitHub. 2017-04-27 [2020-09-23]. （原始内容存档于2020-11-11）.

[21] v2.2.0 Initial D. GitHub. 2017-02-26 [2020-09-23]. （原始内容存档于2021-04-13）.

[22] v2.1.0 Hunter X Hunter. GitHub. 2016-11-22 [2020-09-23]. （原始内容存档于2020-11-08）.

[23] v2.0.0 Ghost in the Shell. GitHub. 2016-09-30 [2020-09-23]. （原始内容存档于2020-10-27）.

[24] 1.0.0 Evangelion. GitHub. 2015-10-27 [2020-09-23]. （原始内容存档于2021-04-13）.

[25] 0.12.0: Dragon Ball. GitHub. 2015-06-12 [2020-09-23]. （原始内容存档于2021-04-13）.

[26] v0.11.0: Cowboy Bebop. GitHub. 2014-11-07 [2020-09-23]. （原始内容存档于2021-04-13）.

[27] v0.10.0: Blade Runner. GitHub. 2014-03-23 [2020-09-23]. （原始内容存档于2021-04-13）.

[28] v0.9.0: Animatrix. GitHub. 2014-02-25 [2020-09-23]. （原始内容存档于2021-04-13）.

[29] v0.8.0. GitHub. 2014-01-27 [2020-09-23]. （原始内容存档于2021-04-13）.

[30] v0.7.0. GitHub. 2013-12-24 [2020-09-23]. （原始内容存档于2021-04-13）.

[31] 0.6.0: VueJS. GitHub. 2013-12-08 [2020-09-23]. （原始内容存档于2021-04-13）.

[32] Components — Vue.js. [2017-03-11]. （原始内容存档于2021-06-06）（英语）.

[33] 模板语法 - Vue.js. [2017-09-19]. （原始内容存档于2022-05-05）（中文（中国大陆））.

[34] Template Syntax — Vue.js. [2017-03-11]. （原始内容存档于2021-11-04）（英语）.

[35] Reactivity in Depth — Vue.js. [2017-03-11]. （原始内容存档于2021-05-06）（英语）.

[36] 进入/离开 & 列表过渡 - Vue.js. [2017-09-19]. （原始内容存档于2022-04-03）（中文（中国大陆））.

[37] 单文件组件 - Vue.js. [2017-09-19]. （原始内容存档于2022-04-03）（中文（中国大陆））.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

PROFILPELAJAR.COM

Vue.js

综述

历史

版本

特性

组件

模板

响应式设计

过渡效果

单文件组件（SFC）

生态系统

官方工具

官方库

参见

参考文献

外部链接

Read other articles:

Increfest

Dove Channel (streaming service)

Sutradara Terbaik Festival Film Indonesia

Nikté

Agent pathogène

Человек прямоходящий

Order of Liberty

Cecil D'Arcy

Haria, Saparua, Maluku Tengah

Elson Hooi

西維吉尼亞州

Miramar, Havana

هنود

Філософія

Herman Feshbach

سفارة البرتغال في اليابان

Casa Blanca (Coamo, Puerto Rico)

Good-Feel

HMS Sovereign of the Seas

Painter of Berlin 1686