Vue.js

Vue.js（通常簡稱為Vue；讀作「view」）係一個開源嘅模型-視圖-視圖模型前端JavaScript框架，用嚟構建用戶界面同單頁應用程式。 佢由尤雨溪創建，並由佢同核心團隊嘅其他活躍成員維護。

概述
Vue.js嘅特色係採用漸進式架構，重點放喺聲明式渲染同組件組合。核心庫只專注喺視圖層。 複雜應用所需嘅進階功能，例如路由、狀態管理同構建工具，都係透過官方維護嘅支援庫同套件提供。
Vue.js允許使用HTML屬性擴展HTML，呢啲屬性叫做指令。 指令為HTML應用程式提供功能，可以係內置或者用戶自定義嘅。

歷史
Vue係尤雨溪喺Google工作期間使用AngularJS做幾個項目之後創建嘅。佢後來總結咗自己嘅思路：「我諗，如果我可以將我真係鍾意嘅Angular部分抽出嚟，整一啲真係輕量嘅嘢，會點呢？」 項目嘅第一個源代碼提交日期係2013年7月，Vue喺隔年2月首次公開宣布。
版本名稱通常源自漫畫同動畫。

版本
當發布新嘅主要版本（即v3.y.z）時，上一個次要版本（即2.x.y）會成為LTS版本，維持18個月（修正錯誤同安全漏洞），之後再維持18個月嘅維護模式（只修復安全漏洞）。

主要應用與案例
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實例。
下面呢段代碼係一個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: 0,
  }),
  template: '<button v-on:click="onClick">撳咗 <nowiki>{{ count }}</nowiki> 次</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count嘅值由${oldValue}改為${newValue}。`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

模板
Vue使用以HTML為基礎嘅模板語法，允許將渲染嘅DOM綁定到底層Vue實例嘅數據。所有Vue模板都係有效嘅HTML，可以畀符合規範嘅瀏覽器同HTML解析器解析。Vue將模板編譯成虛擬DOM渲染函數。虛擬文檔對象模型（或者叫「DOM」）允許Vue喺更新瀏覽器之前，喺佢嘅記憶體中渲染組件。結合反應系統，Vue可以計算出需要重新渲染嘅最少組件數量，並喺應用狀態改變時應用最少嘅DOM操作。

Vue用戶可以使用模板語法，或者揀用hyperscript直接寫渲染函數，可以通過函數調用或者用JSX。 渲染函數允許應用程序由軟件組件構建。

Reactivity
Vue 有一個使用普通 JavaScript 物件同優化重渲染嘅反應系統。每個組件喺渲染嘅時候會追蹤其反應性依賴，所以系統可以準確知道幾時重渲染，同埋邊啲組件要重渲染。

Transitions
Vue 提供多種方法去應用過渡效果，當項目插入、更新或者喺 DOM 中移除嘅時候。呢啲工具包括：
自動應用 CSS 過渡同動畫嘅 class
集成第三方 CSS 動畫庫，例如 Animate.css
用 JavaScript 喺過渡鉤子期間直接操作 DOM
集成第三方 JavaScript 動畫庫，例如 Velocity.js
當一個包裹喺過渡組件嘅元素被插入或者移除時，會發生以下情況：
Vue 會自動檢測目標元素有冇應用 CSS 過渡或者動畫。如果有，CSS 過渡類將會喺適當嘅時間點被添加或者移除。
如果過渡組件提供咗 JavaScript 鉤子，呢啲鉤子會喺適當嘅時間點被調用。
如果冇檢測到 CSS 過渡/動畫同冇提供 JavaScript 鉤子，插入同/或者移除嘅 DOM 操作將會喺下一幀立即執行。

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 嘅加入，組件只需映射到佢哋所屬嘅路由，父/根路由必須指示子組件應該喺邊度渲染。
<div id="app">
  <router-view></router-view>
</div>
...

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>
上面嘅代碼：
設置一個前端路由喺 websitename.com/user/<id>。
會喺 User 組件中渲染（定義喺 const User...）。
允許 User 組件使用 $route 物件嘅 params 鍵嚟傳遞輸入 URL 嘅特定 id：$route.params.id。
呢個模板（根據傳遞到路由嘅參數而變化）會渲染到 DOM 嘅 div#app 內嘅 <router-view></router-view> 中。
最終生成嘅 HTML 對於輸入：websitename.com/user/1 嘅人嚟講會係：
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

生態系統
核心庫包括由核心團隊同貢獻者開發嘅工具同庫。