Vue基礎語法 生命週期

2021-10-01 18:54:23 字數 1887 閱讀 3473

官網: 學習 | 教程 | 安裝。

使用官網提供的cdn(內容分發網路)。

var vm =

newvue(,

methods:

})

1、vue例項:

利用new根據建構函式vue()建立的vm例項就是vue例項。

2、vue例項的選項:

el:通過選擇器將vue例項與dom節點掛載起來。

data:為vue例項設定所需要用到的資料,即「資料區」。

methods:為vue例項設定操作掛載點節點的方法,即「方法區」。

3. vue例項的屬性:

$ data:返回vue例項資料區中的所有資料。vm.$data.w === vm.w //返回true

4. 掛載點:

vue例項與之掛載的dom節點就被稱為「掛載點」。

利用vue指令 v-on為掛載點物件繫結事件。

"btnclick"

>確定<

/button>

將事件**書寫在vue例項的方法區。

methods:

}

在vue例項方法區中的函式內部如何引用vue例項資料區中的資料

重點記憶:在vue方法區中的函式內部,關鍵字this永遠指向vue例項vm。

mustache語法:}

c .若文字插值的內容包含html**,則無法被瀏覽器解釋。

d .資料區中的資料對於頁面來說是雙向繫結的。

e .文字插值內部不能出現流程語句。

f .文字插值內部可以出現表示式。

資料區可以定義在vue例項以外:

a .利用字面量的方式建立資料區物件:var data_1=;

b .利用建構函式來建立資料區物件:

var data_2=

newobject()

; data_2.a=10;

data_2.b=

20;

關於文字插值的指令

v-text:功能與

}文字插值相同。"title"

>

<

/p>

v-html:功能與

}文字插值相同,同時也可以解釋html**。"title"

>

<

/p>

v-once:不再支援雙向繫結。"title" v-once>

<

/p>

v-pre:忽略文字插值的功能。

}<

/p>

vue例項從建立之初,一直到被銷毀的全過程被稱為vue例項的生命週期(life cycle)

/*有關vue例項生命週期的內容*/

var vm =

newvue(,

methods:

,/*vue例項建立階段*/

beforecreate()

,created()

,/*vue例項的掛載階段*/

beforemount()

,mounted()

,/*vue例項的更新階段:

當對資料區中的資料進行修改時發生更新階段的鉤子函式的執行。*/

beforeupdate()

,updated()

,beforedestroy()

,destroyed()

})

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...