Vue.js - 維基百科，自由嘅百科全書
跳去內容
出自維基百科，自由嘅百科全書
Vue.js
原作者
尤雨溪
開發者
尤雨溪同核心團隊
初始版本
2014年
2月
，12年之前
2014-02
最新發布
3.4.31
2024年
6月
28號
，21個月之前
2024-06-28
程式語言
TypeScript
平台
Web platform
檔案大細
33.9
KB
min
gzip
軟件類別
JavaScript函式庫
許可協議
MIT許可證
Vue.js
（通常簡稱為
Vue
；讀作「view」
）係一個開源嘅
模型-視圖-視圖模型
前端
JavaScript框架
，用嚟構建
用戶界面
單頁應用程式
12
佢由尤雨溪創建，並由佢同核心團隊嘅其他活躍成員維護。
13
概述
編輯
Vue.js嘅特色係採用漸進式架構，重點放喺聲明式渲染同組件組合。核心庫只專注喺視圖層。
複雜應用所需嘅進階功能，例如路由、狀態管理同構建工具，都係透過官方維護嘅支援庫同套件提供。
14
Vue.js允許使用HTML屬性擴展HTML，呢啲屬性叫做指令。
15
指令為HTML
應用程式
提供功能，可以係內置或者用戶自定義嘅。
歷史
編輯
Vue係尤雨溪喺
Google
工作期間使用
AngularJS
做幾個項目之後創建嘅。佢後來總結咗自己嘅思路：「我諗，如果我可以將我真係鍾意嘅Angular部分抽出嚟，整一啲真係輕量嘅嘢，會點呢？」
16
項目嘅第一個源代碼提交日期係2013年7月，Vue喺隔年2月首次公開宣布。
17
18
版本名稱通常源自
漫畫
動畫
版本
編輯
版本
發布日期
標題
LTS結束日期
終止支援日期
3.4
000000002023-12-28-0000
2023年12月28號
灌籃高手
19
3.3
000000002023-05-11-0000
2023年5月11號
浪客劍心
20
3.2
000000002021-08-05-0000
2021年8月5號
五等分的新娘
21
3.1
000000002021-06-07-0000
2021年6月7號
冥王
22
3.0
000000002020-09-18-0000
2020年9月18號
海賊王
23
2.7
000000002022-07-01-0000
2022年7月1號
火影忍者
24
000000002023-12-31-0000
2023年12月31號
000000002023-12-31-0000
2023年12月31號
2.6
000000002019-02-04-0000
2019年2月4號
超時空要塞
25
000000002022-03-18-0000
2022年3月18號
000000002023-09-18-0000
2023年9月18號
2.5
000000002017-10-13-0000
2017年10月13號
E班
26
2.4
000000002017-07-13-0000
2017年7月13號
斬服少女
27
2.3
000000002017-04-27-0000
2017年4月27號
JoJo嘅奇妙冒險
28
2.2
000000002017-02-26-0000
2017年2月26號
頭文字D
29
2.1
000000002016-11-22-0000
2016年11月22號
獵人
30
2.0
000000002016-09-30-0000
2016年9月30號
攻殼機動隊
31
1.0
000000002015-10-27-0000
2015年10月27號
新世紀福音戰士
32
0.12
000000002015-06-12-0000
2015年6月12號
龍珠
33
0.11
000000002014-11-07-0000
2014年11月7號
星際牛仔
34
0.10
000000002014-03-23-0000
2014年3月23號
銀翼殺手
35
0.9
000000002014-02-25-0000
2014年2月25號
動畫矩陣
36
0.8
000000002014-01-27-0000
2014年1月27號
唔啱使
37
首次公開宣布嘅版本
17
18
0.7
000000002013-12-24-0000
2013年12月24號
唔啱使
38
0.6
000000002013-12-08-0000
2013年12月8號
VueJS
39
當發布新嘅主要版本（即v3.y.z）時，上一個次要版本（即2.x.y）會成為LTS版本，維持18個月（修正錯誤同安全漏洞），之後再維持18個月嘅維護模式（只修復安全漏洞）。
40
主要應用與案例
編輯
Vue.js 喺唔同領域都有廣泛應用，以下係一啲知名使用 Vue.js 嘅應用或者網站，說明其實際應用情況同效果：
Grammarly
– 一個用於語法檢查同寫作輔助嘅工具，Grammarly 使用 Vue.js 來構建其用戶界面，提供即時嘅語法建議同改進建議。
Alibaba
– 中國最大嘅電商平台之一，Alibaba 喺其內部項目同部分前端系統中使用 Vue.js，提升咗開發效率同用戶體驗。
GitLab
– 一個為程式碼倉庫提供版本控制嘅平台，GitLab 使用 Vue.js 來實現其部分前端功能，提高咗系統嘅互動性同用戶界面嘅流暢度。
Xiaomi
– 中國知名嘅電子產品公司，Xiaomi 喺其部分網頁應用中使用 Vue.js，提供咗快速同靈活嘅用戶體驗。
Laravel Spark
– 一個為 Laravel 框架提供 SaaS 應用快速啟動工具，Spark 使用 Vue.js 作為其前端框架，令開發者可以更快構建複雜嘅應用。
呢啲應用展示咗 Vue.js 喺實際項目中嘅靈活性同高效性，亦反映出 Vue.js 喺大型項目同高流量網站中嘅穩定表現。
特性
編輯
組件
編輯
Vue組件擴展咗基本嘅
HTML元素
，用嚟封裝可重用嘅代碼。簡單嚟講，組件就係帶有預定義選項嘅Vue實例。
41
下面呢段代碼係一個Vue組件嘅例子。呢個組件顯示一個按鈕，並打印出按鈕被點擊嘅次數：
template
div
id
"tuto"
button-clicked
v-bind:initial-count
"0"
>button-clicked
div
template
script
Vue
component
'button-clicked'
props
'initialCount'
],
data
()
=>
({
count
}),
template
''
computed
countTimesTwo
()
return
this
count
},
watch
count
newValue
oldValue
console
log
`count嘅值由
${
oldValue
改為
${
newValue
。`
);
},
methods
onClick
()
this
count
+=
},
mounted
()
this
count
this
initialCount
});
new
Vue
({
el
'#tuto'
});
script
模板
編輯
Vue使用以
HTML
為基礎嘅模板語法，允許將渲染嘅
DOM
綁定到底層Vue實例嘅數據。所有Vue模板都係有效嘅HTML，可以畀符合規範嘅瀏覽器同HTML
解析器
解析。Vue將模板編譯成
虛擬DOM
渲染函數。虛擬文檔對象模型（或者叫「DOM」）允許Vue喺更新瀏覽器之前，喺佢嘅記憶體中渲染組件。結合反應系統，Vue可以計算出需要重新渲染嘅最少組件數量，並喺應用狀態改變時應用最少嘅DOM操作。
42
Vue用戶可以使用模板語法，或者揀用hyperscript直接寫渲染函數，可以通過函數調用或者用
JSX
43
渲染函數允許應用程序由
軟件組件
構建。
44
Reactivity
編輯
Vue 有一個使用普通
JavaScript
物件同優化重渲染嘅反應系統。每個組件喺渲染嘅時候會追蹤其反應性依賴，所以系統可以準確知道幾時重渲染，同埋邊啲組件要重渲染。
45
Transitions
編輯
Vue 提供多種方法去應用過渡效果，當項目插入、更新或者喺
DOM
中移除嘅時候。呢啲工具包括：
自動應用
CSS
過渡同動畫嘅 class
集成第三方 CSS 動畫庫，例如 Animate.css
用 JavaScript 喺過渡鉤子期間直接操作 DOM
集成第三方 JavaScript 動畫庫，例如
Velocity.js
當一個包裹喺過渡組件嘅元素被插入或者移除時，會發生以下情況：
Vue 會自動檢測目標元素有冇應用 CSS 過渡或者動畫。如果有，CSS 過渡類將會喺適當嘅時間點被添加或者移除。
如果過渡組件提供咗 JavaScript 鉤子，呢啲鉤子會喺適當嘅時間點被調用。
如果冇檢測到 CSS 過渡/動畫同冇提供 JavaScript 鉤子，插入同/或者移除嘅 DOM 操作將會喺下一幀立即執行。
46
47
Routing
編輯
single-page application
(SPA) 嘅傳統劣勢係冇辦法分享指向特定網頁內 "子" 頁面嘅連結。因為 SPA 只向用戶提供一個基於 URL 嘅伺服器響應（通常係提供 index.html 或 index.vue），所以通常好難或者唔可能書籤某啲畫面或者分享連結去特定部分。為咗解決呢個問題，好多客戶端路由器用 "
hashbang
" (#!) 分隔其動態 URL，例如
page.com/#!/
。然而，隨住 HTML5 嘅普及，大多數現代瀏覽器支持無 hashbang 嘅路由。
Vue 提供咗一個接口，根據當前嘅 URL 路徑嚟改變頁面上顯示嘅內容——無論佢係點改變（無論係通過電郵連結、刷新還是在頁面連結）。此外，使用前端路由器允許喺某啲瀏覽器事件（例如點擊）發生時有意識咁過渡瀏覽器路徑。Vue 本身唔附帶前端 hash 路由，但開源嘅 "vue-router" 套件提供咗一個 API 嚟更新應用嘅 URL，支持返回按鈕（導航歷史記錄），並通過身份驗證 URL 參數支持電郵密碼重設或者電郵驗證連結。佢支持將嵌套路由映射到嵌套組件，並提供細粒度嘅過渡控制。用 Vue，開發人員已經喺用小型構建塊組合應用嚟構建更大嘅組件。隨住 vue-router 嘅加入，組件只需映射到佢哋所屬嘅路由，父/根路由必須指示子組件應該喺邊度渲染。
48
div
id
"app"
router-view
>router-view
div
...
script
...
const
User
template
'
};
const
router
new
VueRouter
({
routes
path
'/user/:id'
component
User
});
...
script
上面嘅代碼：
設置一個前端路由喺
websitename.com/user/
會喺 User 組件中渲染（定義喺 const User...）。
允許 User 組件使用 $route 物件嘅 params 鍵嚟傳遞輸入 URL 嘅特定 id：
$route.params.id
呢個模板（根據傳遞到路由嘅參數而變化）會渲染到 DOM 嘅 div#app 內嘅
中。
最終生成嘅 HTML 對於輸入：
websitename.com/user/1
嘅人嚟講會係：
div
id
"app"
div
div
User 1
div
div
div
49
生態系統
編輯
核心庫包括由核心團隊同貢獻者開發嘅工具同庫。
官方架生
編輯
Vite 標誌
Devtools
– 用嚟調試 Vue.js 應用嘅瀏覽器開發者工具擴展
Vite
– 快速開發 Vue.js 嘅標準工具
Vue Loader
– 一個 webpack loader，允許以單文件組件（SFC）格式書寫 Vue 組件
官方庫
編輯
Vue Router
– 官方路由器
Vuex
– 受 Flux 啟發嘅集中式狀態管理
Vue Server Renderer
– 伺服器端渲染
Pinia
– 新簡單狀態管理
參考
編輯
源項目啟動嘅第一個禮拜
Evan You
。原先內容
歸檔
喺February 5, 2019
。喺
March 11,
2017搵到
"@vue/runtime-dom v3.2.45"
Bundlephobia
(英文). 原先內容
歸檔
喺January 29, 2023
. 喺
2023-01-29
搵到
"vue/LICENSE"
Vue.js
. 喺
April 17,
2017搵到
透過GitHub.
Vuejs.org
(英文)。原先內容
歸檔
喺February 10, 2022
。喺
January 3,
2020搵到
Macrae, Callum (2018).
Vue.js: Up and Running: Building Accessible and Performant Web Apps
(英文).
O'Reilly Media
ISBN
978-1-4919-9721-5
. 原先內容
歸檔
喺May 30, 2024
. 喺
August 9,
2019搵到
Nelson, Brett (2018).
Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch
(英文).
Apress
ISBN
978-1-4842-3781-6
. 原先內容
歸檔
喺May 30, 2024
. 喺
August 9,
2019搵到
Yerburgh, Edd (2019).
Testing Vue.js Applications
(英文).
Manning Publications
ISBN
978-1-61729-524-9
. 原先內容
歸檔
喺May 30, 2024
. 喺
August 9,
2019搵到
Freeman, Adam (2018).
Pro Vue.js 2
(英文).
Apress
ISBN
978-1-4842-3805-9
. 原先內容
歸檔
喺May 30, 2024
. 喺
August 9,
2019搵到
Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019).
Working with Vue.js
(英文).
SitePoint
ISBN
978-1-4920-7144-0
10
11
識團隊
Vuejs.org
(英文)。原先內容
歸檔
喺February 7, 2022
。喺
September 23,
2019搵到
van正喺創建Vue.js
Patreon
(英文)。原先內容
歸檔
喺March 3, 2019
。喺
March 11,
2017搵到
係Vue.js
W3Schools
(英文)。原先內容
歸檔
喺January 22, 2020
。喺
January 21,
2020搵到
雨溪
Between the Wires
(英文)。November 3, 2016。
原著
喺June 3, 2017歸檔
。喺
August 26,
2017搵到
ue.js: 簡單易用嘅JavaScript MVVM
Hacker News
。2014-02-03。原先內容
歸檔
喺January 29, 2023
。喺
2023-01-29
搵到
源項目啟動嘅第一個禮拜
Evan You
。2014-02-11。原先內容
歸檔
喺April 12, 2017
。喺
2023-01-29
搵到
"宣布Vue 3.4"
Vue.js
. December 28, 2023. 原先內容
歸檔
喺March 24, 2024
. 喺
29 March
2024搵到
3.3.0 浪客劍心
Vue.js
(英文)。May 11, 2023。原先內容
歸檔
喺December 13, 2023
。喺
2023-05-12
搵到
透過GitHub。
3.2.0 五等分的新娘
Vue.js
(英文)。August 5, 2021。原先內容
歸檔
喺August 10, 2021
。喺
August 10,
2021搵到
透過GitHub。
"v3.1.0 冥王"
Vue.js
(英文). June 7, 2021. 原先內容
歸檔
喺July 18, 2021
. 喺
July 18,
2021搵到
透過GitHub.
3.0.0 海賊王
Vue.js
(英文)。September 18, 2020。原先內容
歸檔
喺September 19, 2020
。喺
September 23,
2020搵到
透過GitHub。
2.7.0 火影忍者
Vue.js
(英文)。July 1, 2022。原先內容
歸檔
喺July 1, 2022
。喺
July 1,
2022搵到
透過GitHub。
2.6.0 超時空要塞
Vue.js
(英文)。February 4, 2019。原先內容
歸檔
喺November 11, 2020
。喺
September 23,
2020搵到
透過GitHub。
"v2.5.0 E班"
Vue.js
(英文). October 13, 2017. 原先內容
歸檔
喺September 18, 2020
. 喺
September 23,
2020搵到
透過GitHub.
2.4.0 斬服少女
Vue.js
(英文)。July 13, 2017。原先內容
歸檔
喺November 9, 2020
。喺
September 23,
2020搵到
透過GitHub。
2.3.0 JoJo嘅奇妙冒險
Vue.js
(英文)。April 27, 2017。原先內容
歸檔
喺November 11, 2020
。喺
September 23,
2020搵到
透過GitHub。
"v2.2.0 頭文字D"
Vue.js
(英文). February 26, 2017. 原先內容
歸檔
喺April 13, 2021
. 喺
September 23,
2020搵到
透過GitHub.
"v2.1.0 獵人"
Vue.js
(英文). November 22, 2016. 原先內容
歸檔
喺November 8, 2020
. 喺
September 23,
2020搵到
透過GitHub.
2.0.0 攻殼機動隊
Vue.js
(英文)。September 30, 2016。原先內容
歸檔
喺October 27, 2020
。喺
September 23,
2020搵到
透過GitHub。
.0.0 新世紀福音戰士
Vue.js
(英文)。October 27, 2015。原先內容
歸檔
喺April 13, 2021
。喺
September 23,
2020搵到
透過GitHub。
"0.12.0: 龍珠"
Vue.js
(英文). June 12, 2015. 原先內容
歸檔
喺April 13, 2021
. 喺
September 23,
2020搵到
透過GitHub.
0.11.0: 星際牛仔
Vue.js
(英文)。November 7, 2014。原先內容
歸檔
喺April 13, 2021
。喺
September 23,
2020搵到
透過GitHub。
0.10.0: 銀翼殺手
Vue.js
(英文)。March 23, 2014。原先內容
歸檔
喺April 13, 2021
。喺
September 23,
2020搵到
透過GitHub。
0.9.0: 動畫矩陣
Vue.js
(英文)。February 25, 2014。原先內容
歸檔
喺April 13, 2021
。喺
September 23,
2020搵到
透過GitHub。
"v0.8.0"
Vue.js
(英文). January 27, 2014. 原先內容
歸檔
喺April 13, 2021
. 喺
September 23,
2020搵到
透過GitHub.
"v0.7.0"
Vue.js
(英文). December 24, 2013. 原先內容
歸檔
喺April 13, 2021
. 喺
September 23,
2020搵到
透過GitHub.
"0.6.0: VueJS"
Vue.js
(英文). December 8, 2013. 原先內容
歸檔
喺April 13, 2021
. 喺
September 23,
2020搵到
透過GitHub.
ue路線圖
Vue.js
(英文)。November 6, 2022。原先內容
歸檔
喺December 10, 2021
。喺
December 10,
2021搵到
透過GitHub。
Vuejs.org
(英文)。原先內容
歸檔
喺February 10, 2022
。喺
March 11,
2017搵到
Jordan, John。
ue管理模板
原著
喺2024年8月1號歸檔
。喺
16 July
2022搵到
板語法
Vuejs.org
(英文)。原先內容
歸檔
喺February 10, 2022
。喺
March 11,
2017搵到
ue 2.0嚟喇！
。September 30, 2016。
{{
cite web
}}
: CS1 maint: url-status (
link
"Reactivity in Depth"
Vuejs.org
(英文). 原先內容
歸檔
喺February 10, 2022
. 喺
March 11,
2017搵到
"Transition Effects"
Vuejs.org
(英文). 原先內容
歸檔
喺December 13, 2023
. 喺
March 11,
2017搵到
"Transitioning State"
Vuejs.org
(英文). 原先內容
歸檔
喺February 10, 2022
. 喺
March 11,
2017搵到
"Routing"
Vuejs.org
(英文). 原先內容
歸檔
喺February 10, 2022
. 喺
March 11,
2017搵到
You, Evan.
"Vue Nested Routing (2)"
Vue Home Page (subpage)
原著
喺May 8, 2017歸檔
. 喺
May 10,
2017搵到
由「
」收
屬於2隱類：
CS1英文語言來源 (en)
CS1 maint: url-status
Vue.js
加主題