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: &#39;<p>Hello World</p>&#39;
})
var myAppendTo = Vue.extend({
template:&#39;<p>appendTo</p>&#39;
})
var myBefore = Vue.extend({
 template:&#39;<p>before</p>&#39;
})
var myAfter = Vue.extend({
 template:&#39;<p>after</p>&#39;
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount(&#39;#app&#39;);

// 手动挂载
new myAppendTo().$mount().$appendTo(&#39;#app&#39;);//appendTo
new myBefore().$mount().$before(&#39;#app&#39;);//before
new myAfter().$mount().$after(&#39;#app&#39;);//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 較好。

推薦：《

最新的5個vue.js影片教學精選

》

以上是vuejs怎麼加dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！