官網: 學習 | 教程 | 安裝。
使用官網提供的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...