1. 程式人生 > >(十二)vue.js元件——其他$nextTick、X-Templates、手動掛載例項(6)

(十二)vue.js元件——其他$nextTick、X-Templates、手動掛載例項(6)

1)$nextTick

在vue中,dom的更新是採取非同步更新佇列的,即vue資料變了並不會立即就修改Dom,而是開啟一個佇列,並緩衝在同一事件迴圈中發生的所有資料改變。
在緩衝時會去掉重複資料,避免不必要計算和DOM操作。

所以,在一個事件裡面我們通過修改vue例項裡面的資料,然後去獲取此資料對應的DOM相關內容是獲取不到的。

【當然,按照vue的核心思想:資料驅動DOM,我們不應該去操作DOM,但是在很多業務裡我們避免不了使用第三方原生JavaScript庫,這些庫都有建立-更新-銷燬DOM的完整生命週期,在這些庫配合vue使用時,我們可能還會有輕微的操作DOM,當然,這些操作能避免就避免!】
在這裡插入圖片描述


其原因是此時DOM還沒創建出來,需要直到下一個vue事件迴圈時,才開始建立。

這時我們就可以使用$nextTick,他能知道DOM什麼時候更新完。
在這裡插入圖片描述

2)X-Templates

前面我們定義元件內容時都是直接寫在template選擇的字串值中,如下:

template: `<div>my-com1</div>`,

有時候你不想將所有元件內容寫成一個字串的話,這裡給你提供了一個新方法X-Template,

X-Template的含義是你能將此元件內容寫在一個script裡面,只要給標籤加上一個id,然後元件的template選擇的值就是這個id

注意:
1.Script標籤的type應該給為text/x-template
2.在script標籤找那個模板內容最外層仍然只能寫一個標籤
3.這種寫法雖然能讓我們像寫真正html標籤一樣寫,但是無疑的他將模板的元件和
其他定義隔離了,這並不好。(所以,瞭解下這種寫法,能看懂別人程式碼就好,並
不需要這樣寫)
4.也可以script寫在當前可訪問的任何地方,比如app的外面

實現:
在這裡插入圖片描述

3)手動掛載例項

關於【手動掛載例項】在業務開發中很難用到,只做瞭解就好。

前面我們所定義的所有元件都需要放在根例項繫結的模板上才能顯示,現在的話,我們也以手動掛載一個例項,即不需要new Vue(),直接把元件掛到網頁上。(在開發一些複雜的獨立元件可能會用到)

手動掛載例項方法:
1.在建立元件時不使用Vue.component()這個方法,而使用Vue.extend()方法。
2.使用元件例項的.mount方法實現手動掛載例項

在這裡插入圖片描述

注意:
1.這個方法返回元件例項本身,因此可以鏈式呼叫他的例項方法。

在這裡插入圖片描述

2.掛載例項還可以採取下面兩種方法
// 方法一
new MyCom({
el: "#app",
});

// 方法二:在文件之外渲染,並且隨後掛載
var myCom = new MyCom().$mount();
document.getElementById("app").appendChild(myCom.$el);

這裡要注意下:方法一和最上面例項的掛載方法無法讓上面的css應用進來,
而方法二可以。當然,如果你直接給上類名到模板上那肯定是可以的了