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

安裝
簡單的 Vue 實例
注意此結構與 Vue-Cli* 建置的目錄結構不同,例如少了 node_modules
儲存依賴套件。
*Vue-Cli 是 Vue.js 官方提供的開發工具,可用於快速開發大型單頁應用程式 (SPA),更具體來說像是前端在開發時,常會搭配一些前端管理工具 (Gulp、Webpack...) 來處理瑣碎又重複性的工作,但往往需要大量時間去自行配置開發環境,而 Vue-cli 就像開發懶人包,可透過指令快速地建立一個立即可用的 Vue 開發環境。
組件
我們可以透過組件封裝一些常用的功能,達到快速開發的效果。

在上方的範例中 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?