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');//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 較好。