利用vue.js插入dom節(jié)點(diǎn)的方法

本文主要介紹的是vue.js插入dom節(jié)點(diǎn)的方法，下面話不多說(shuō)，來(lái)看看詳細(xì)的介紹吧。

html代碼：

<div id="app"></div>

js代碼：

var MyComponent = Vue.extend({
 template: '<div>Hello World</div>'
})
var myAppendTo = Vue.extend({
template:'<p>appendTo</p>'
})
var myBefore = Vue.extend({
 template:'<p>before</p>'
})
var myAfter = Vue.extend({
 template:'<p>after</p>'
})
// 創(chuàng)建并掛載到 #app (會(huì)替換 #app)
new MyComponent().$mount('#app');

// 手動(dòng)掛載
new myAppendTo().$mount().$appendTo('#app');//appendTo
new myBefore().$mount().$before('#app');//before
new myAfter().$mount().$after('#app');//after

說(shuō)明：

      1.對(duì)比jquery的dom節(jié)點(diǎn)的插入方式，vue.js的插值需要使用先new創(chuàng)建一個(gè)實(shí)例然后通過(guò)$mount() 。

      2.手動(dòng)掛載到dom節(jié)點(diǎn)中，然后使用$appendTo/$before/$after等方法進(jìn)行插值。

      3.這種操作dom的思想其實(shí)并不是vue提倡的方式，而vue提倡的方式是通過(guò)操作數(shù)據(jù)來(lái)完成你想要的結(jié)果。

      4.vue的思想是這個(gè)dom已經(jīng)存在，通過(guò)判斷可以控制它顯示隱藏。

      5.所以使用vue的時(shí)候，要試著轉(zhuǎn)變一下使用jquery的時(shí)候那種思想就像api提供的這種方法 (v-if)。

<ul>
 <li v-if="ok">顯示</li>
 <li v-else>隱藏</li>
</ul>

也可以通過(guò)(v-show)來(lái)控制顯示隱藏：

<ul>
 <li v-show="ok">顯示</li>
</ul>

那么v-if和v-show的區(qū)別：

在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過(guò)程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。

v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來(lái)）。

相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。

一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，
如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。

總結(jié)

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。