vuejs如何加dom

這篇文章給大家分享的是有關vuejs如何加dom的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vuejs加dom的方法：1、先new創建一個實例；2、手動掛載到dom節點中；3、使用“$appendTo/$before/$after”等方法進行插值即可。

本文操作環境：Windows7系統、Vue2.9.6版、DELL G3電腦

vuejs怎么加dom?

利用vue.js插入dom節點的方法

本文主要介紹的是vue.js插入dom節點的方法，下面話不多說，來看看詳細的介紹吧。

html代碼：

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

js代碼：

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

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

說明：

1.對比jquery的dom節點的插入方式，vue.js的插值需要使用先new創建一個實例然后通過$mount() 。

2.手動掛載到dom節點中，然后使用$appendTo/$before/$after等方法進行插值。

3.這種操作dom的思想其實并不是vue提倡的方式，而vue提倡的方式是通過操作數據來完成你想要的結果。

4.vue的思想是這個dom已經存在，通過判斷可以控制它顯示隱藏。

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

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

也可以通過(v-show)來控制顯示隱藏：

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

那么v-if和v-show的區別：

在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。

v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。

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

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，
如果在運行時條件不大可能改變 v-if 較好。

感謝各位的閱讀！關于“vuejs如何加dom”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！