Vue

重要度:⭐⭐⭐⭐難度:⭐⭐⭐⭐

由於方便編輯性本文將改用 codesandbox 當作範例展示工具。

Vue.js 是一款流行的JavaScript前端框架,旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層,同時,它也能方便地取得資料更新,並通過組件內部特定的方法實現視圖與模型的互動。 —維基百科

對於前端開發還有許多有趣開發模式,從經典的 MVC 框架,到完全獨立出來controller層的MVP,再到Vue.js、Angular、React引領的的 MVVM 框架。

請參考 Vue 06 MVVM 的概念

MVVM 模式

Vue 與 jQuery 最大的不同在於後者是直接操作DOM,前者是透過改變資料來變動DOM。

安裝

你可以安裝或使用codesandbox 直接建立線上 Vue 開發環境。

官方社群中文翻譯文檔

簡單的 Vue 實例

將範例中的代碼欄位拉開並點擊 ,你會看到以下目錄結構。

├─public 公開文件目錄

├─ favicon.ico // 網站 icon

├─ index.html 頁面入口文件

├─ src —原始碼目錄

├─ assets — 靜態資源目錄

├─ components — 組件資料夾

├─ App.vue — 專案入口元件

├─ main.js — 專案核心文件

├─ package.json —專案配置

組件

我們可以透過組件封裝一些常用的功能,達到快速開發的效果。

在上方的範例中 HelloWorld.vue 便是個單文件組件,我們在 App.vue 將它引入。

<!-- App.vue -->
<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

並鑲入於模板中。

<!-- App.vue -->
<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!" /> <!-- msg會傳入組件 -->
  </div>
</template>

傳入的資料需經由 props 聲明。

<!-- HelloWorld.vue -->
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

一個組件默認可以擁有任意數量的 prop,任何值都可以傳遞給任何 prop。 在上述模板中,你會發現我們能夠在組件實例中訪問這個值,就像訪問 data 中的值一樣。

生命週期

生命週期圖示

你可以在此處觀看中文版圖示。

beforeCreate

此時,組件的data和methods以及頁面DOM結構都還沒有初始化,所以這裡什麼都做不了

created

此時,組件的data和methods可用。 但頁面還沒被渲染出來,在該函數中,我們經常會發起ajax請求

beforeMount

此時,模板結構已經在內存中編譯完成,但還沒有真正渲染到頁面上。 頁面上看不到真實的數據,能看到的只是一個模板而已

mounted

組件創建階段的最後一個生命週期。 此時,頁面已經真正渲染好了,用戶可以看到真實頁面數據。

以上執行完,組件就離開了創建階段,進入運行階段。 如果用到了一些第三方UI插件,必須在mounted中來初始化插件。

運行中的生命週期函數,會根據data數據的變化有選擇性的觸發0次或n次

beforeUpdate

此時數據是最新的,但頁面上呈現的數據還是舊的

updated

頁面已經完成了更新,此時data數據是最新的,同時頁面上呈現的數據也是最新的。

beforeDestroy

執行該函數的時候,組件即將被銷毀但還沒有真正銷毀,此時組件(data、methods等數據或方法)還可以正常用。

destroyed

組件完成銷毀,組件廢了。

本文參考圖片來源:

簡體中文
繁體中文

Last updated

Was this helpful?