Vue入門筆記003

2021-10-07 01:13:50 字數 1146 閱讀 5427

生命週期函式

在vue中,每個例項在被建立時都要經歷一系列的初始化過程,例如需要資料解析、編譯模板、將例項掛載到dom並在資料變化時更新dom等等,同時在這個過程中也會產生一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增**的機會。

什麼是生命週期:從vue例項建立、執行、到銷毀期間,總是伴隨著各種各樣的事件,這些事件統稱為生命週期。

生命週期鉤子:就是生命週期事件的別名而已。

生命週期鉤子 = 生命週期函式 = 生命週期事件

生命週期函式分為以下幾類:

建立期間的生命週期函式

beforecreate:例項剛在被記憶體建立出來,此時,還沒有初始化data和methods屬性;

created:例項已經在記憶體中建立好,data和methods初始化完畢,此時可以訪問資料了;

beforemount:此時已經完成了模板的編譯,但是還沒有掛載到頁面中;

mounted:此時,已經將編譯好的模板,掛載到了頁面指定的容器中顯示,執行完mounted函式,頁面就真正的渲染好了,此時例項建立階段即將結束。如果要引用一些第三方的外掛程式來操作dom元素,最好在mounted中去操作dom元素,因為這時才是真正的頁面。

執行期間的生命週期函式:

beforeupdate:狀態更新之前執行此函式, 此時 data 中的狀態值是最新的,但是介面上顯示的 資料還是舊的,因為此時還沒有開始重新渲染dom節點

updated:例項更新完畢之後呼叫此函式,此時 data 中的狀態值 和 介面上顯示的資料,都已經完成了更新,介面已經被重新渲染好了!

銷毀期間的生命週期函式:

beforedestroy:例項銷毀之前呼叫。在這一步,例項仍然完全可用。,此時還沒有開始銷毀。

destroyed:vue 例項銷毀後呼叫。呼叫後,vue 例項指示的所有東西都會解繫結,所有的事件***會被移除,所有的子例項也會被銷毀。

vue 入門筆記

v model可以代替checked的值 checkbox value 小紅 v model girl 小紅 checkbox value 小綠 v model girl 小綠 vue的元件化 核心功能就是 前端模組化 元件可以把功能拆分成乙個個模組 不能使用 html5標籤名 js關鍵字 vue....

Vue入門筆記

a.el屬性 設定掛載點 通過css選擇器設定vue例項管理的元素 1.vue例項的作用範圍是什麼呢?el命中的元素外部不可使用vue例項管理的資料,但是命中元素及其內部後代元素可以隨便使用 2.是否可以使用其他的選擇器?支援id選擇器,class選擇器等,但最好在開發的使用使用id選擇器,因為id...

Oracle快速入門003

1.資料庫表的建立 create table table name column name datatype,2.資料庫表結構的修改 1 新增字段 alter table table name add column name datatype 2 更改字段資料型別 alter table table...