利用vue.js插入dom節(jié)點(diǎn)的方法
本文主要介紹的是vue.js插入dom節(jié)點(diǎn)的方法，下面話不多說，來看看詳細(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
說明：
1.對比jquery的dom節(jié)點(diǎn)的插入方式，vue.js的插值需要使用先new創(chuàng)建一個(gè)實(shí)例然后通過$mount() 。
2.手動(dòng)掛載到dom節(jié)點(diǎn)中，然后使用$appendTo/$before/$after等方法進(jìn)行插值。
3.這種操作dom的思想其實(shí)并不是vue提倡的方式，而vue提倡的方式是通過操作數(shù)據(jù)來完成你想要的結(jié)果。
4.vue的思想是這個(gè)dom已經(jīng)存在，通過判斷可以控制它顯示隱藏。
5.所以使用vue的時(shí)候，要試著轉(zhuǎn)變一下使用jquery的時(shí)候那種思想就像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的區(qū)別：
在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過程，因?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ì)被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，
如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。
總結(jié)
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js實(shí)現(xiàn)可配置的登錄表單代碼詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可配置的登錄表單實(shí)例代碼詳解，文中給大家補(bǔ)充介紹了vue.js 全選與取消全選的實(shí)例代碼,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計(jì)算屬性用來監(jiān)聽多個(gè)數(shù)據(jù)；watch?監(jiān)聽單個(gè)數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內(nèi)容，希望對你有所幫助2021-12-12
vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定的相關(guān)知識，本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2018-09-09
vue中使用v-for時(shí)為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時(shí)為什么不能用index作為key，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)
要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個(gè)屬性傳遞給組件,在組件內(nèi)部監(jiān)聽這個(gè)屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧2024-03-03
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue如何實(shí)現(xiàn)左右滑動(dòng)tab(vue-touch)
這篇文章主要介紹了vue如何實(shí)現(xiàn)左右滑動(dòng)tab(vue-touch)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了基于vue.js的分頁插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11