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

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>'})// 創建并掛載到 #app (會替換 #app)new MyComponent().$mount('#app');// 手動掛載new myAppendTo().$mount().$appendTo('#app');//appendTonew myBefore().$mount().$before('#app');//beforenew 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 較好。

總結

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。