Vue 事件補充 生命周期 組件化 傳值

一、事件補充

1)函數(shù)內(nèi)部阻止事件冒泡 e.cancelBubble=true;

2)標(biāo)簽內(nèi)阻止事件冒泡? @click.stop=“show1()”

3)鍵盤事件? keydown? ? 函數(shù)中獲取鍵盤編碼keyCode

4)在標(biāo)簽內(nèi)直接綁定按鍵事件? @keyup.13=“show()”? ? ? ? ? @keyup.enter=“show()”

二、生命周期

vue總共分有十一個生命周期 我們常用的有8個 分別是

1)beforeCreate 類型Function

在實例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。

2)created

實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算, watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el?屬性目前不可見。

3)beforeMount

在掛載開始之前被調(diào)用:相關(guān)的?render?函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

4)mounted

el?被新創(chuàng)建的?vm.$el?替換,并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素,當(dāng)?mounted?被調(diào)用時?vm.$el?也在文檔內(nèi)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

5)beforeUpdate

數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

6)updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁,在這之后會調(diào)用該鉤子。當(dāng)這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài),因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

7)beforeDestroy

實例銷毀之前調(diào)用。在這一步,實例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

8)destroyed? this.$destroy()

Vue 實例銷毀后調(diào)用。調(diào)用后,Vue 實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

三、組件


/ 注冊組件,傳入一個擴展過的構(gòu)造器

Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注冊組件,傳入一個選項對象(自動調(diào)用 Vue.extend)

Vue.component('my-component', { /* ... */ })

// 獲取注冊的組件(始終返回構(gòu)造器)

var MyComponent = Vue.component('my-component')

2、vue實例化? 中 components??


? 模板定義有兩種形式

定義模板的形式

全局組件(? ‘組件名’: 組件內(nèi)容? ) 定義在實例外

全局組件

嵌套組件?


全局嵌套和局部嵌套

*:嵌套組件可以在全局組件使用也可以在實例化里面嵌套 嵌套后 data屬性變?yōu)楹瘮?shù) 他的屬性值都是返回值 其他不變



四、傳值

1)父傳子


父傳子

2)子傳父


子值傳父值

3)非父子組件 之間?

傳值—空vue對象 $emit(‘ ’,數(shù)據(jù)) 發(fā)送 $on 接收



父子操作、父組件操作子組件---$refs? ? ? ? ? $parent 子組件操作父組件數(shù)據(jù)

使用$refs獲取dom? ? ? $parent 可以直接使用不用像$refs一樣設(shè)置屬性?


$resf 父操作子


?在mounted函數(shù)中/nextTick里面的代碼會在DOM更新后執(zhí)行*/---mounted函數(shù)中執(zhí)行

$ nextTick? this.$nextTick(function(){? ? })



Slot標(biāo)簽添加 屬性

內(nèi)容可通過 slot屬性值查找是否顯示默認


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容