Vue生命週期

初探知名的JS框架。

Vue 實例從創建、掛載、更新到銷毀的整個過程，都有對應的生命週期方法，這些方法被稱為 Vue 生命週期鉤子（Lifecycle Hooks）

創建（Creation）

• beforeCreate(): 在 Vue 實例初始化之後，但是在實例中的 data 被觀察和事件/watcher 設置之前被調用。
• created(): 在 Vue 實例已創建完成後立即被調用。該鉤子中，可以訪問實例中的 data 和事件，但是該實例還沒有被掛載到 DOM 中。

掛載（Mounting）

• beforeMount(): 在 Vue 實例掛載到 DOM 之前被調用。在此階段，Vue 處理模板編譯和渲染成真實 DOM 的操作。
• mounted(): 在 Vue 實例掛載到 DOM 之後被調用。在這個階段，實例已經掛載到 DOM 中，可以訪問 DOM 元素。

更新（Updating）

• beforeUpdate(): 在數據更改之後，並且重新渲染之前被調用。在此階段，您可以在更新之前執行額外的邏輯或更改數據。
• updated(): 在數據更改並且重新渲染 DOM 之後被調用。在這個階段，DOM 已經更新完畢。

銷毀（Destroying）

• beforeDestroy(): 在 Vue 實例銷毀之前被調用。在此階段，實例仍然完全可用，您可以清理事件、監聽器等資源。
• destroyed(): 在 Vue 實例銷毀之後被調用。在這個階段，Vue 實例的所有事件監聽器都被清理，並且所有的子實例也被銷毀。

錯誤捕獲（Error Capturing）

• errorCaptured(err, vm, info): 當子孫組件觸發一個錯誤時被調用。可用於在整個子組件樹中捕獲錯誤。

注意：生命週期鉤子僅適用於 Vue 實例組件，而不適用於用戶定義的子組件。

* Vue基礎: Client 端 JS
    * 關鍵字用v開頭v-html, v-once, v-on...
    * 單向數據綁定V-bind縮寫為: , :span="16" 就等價於 v-bind:span="16"
    * 雙向綁定<input v-model="message" />
    * 流程控制v-for與v-if,v-else-if. v-else
    * 控制顯示 <h1 v-show="ok">Hello!</h1>
    new Vue({
        el: '#app',
        data: {
            ok: true // 初始值為 true
        }
    })
    * 雙大括號綁定文本數據<span>{{ message }}</span>
    * @是 v-on 事件監聽指令的縮寫
    <button v-on:click="handleClick">點擊</button>
    <button @click="handleClick">點擊</button>
    * 一次插值<span v-once>{{ message }}</span>

* Element UI: 基於 Vue.js 的桌面UI框架
    * 關鍵字用el開頭el-button, el-table
    * 流程控制使用vue的tag
    * 沒有控制顯示

基於 Vue.js 的桌面端組件庫,它提供了許多高質量的UI組件,幫助開發者快速構建網頁應用。

https://ithelp.ithome.com.tw/articles/10198843

<script src="../js/vue.min.js"></script>

el-button 代表按鈕
el-input 代表輸入框
el-table 代表表格
el-dialog 就是其中一個組件,用於創建對話框

---

如果你覺得這篇文章很棒，請你不吝點讚 (ﾟ∀ﾟ)