Lunski's Clutter

This is a place to put my clutters, no matter you like it or not, welcome here.

0%

Vue生命週期

ra

初探知名的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 實例組件,而不適用於用戶定義的子組件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
* 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 就是其中一個組件,用於創建對話框

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

Welcome to my other publishing channels