利用vue.js插入dom節(jié)點(diǎn)的方法
本文主要介紹的是vue.js插入dom節(jié)點(diǎn)的方法，下面話不多說(shuō)，來(lái)看看詳細(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
說(shuō)明：
1.對(duì)比jquery的dom節(jié)點(diǎn)的插入方式，vue.js的插值需要使用先new創(chuàng)建一個(gè)實(shí)例然后通過(guò)$mount() 。
2.手動(dòng)掛載到dom節(jié)點(diǎn)中，然后使用$appendTo/$before/$after等方法進(jìn)行插值。
3.這種操作dom的思想其實(shí)并不是vue提倡的方式，而vue提倡的方式是通過(guò)操作數(shù)據(jù)來(lái)完成你想要的結(jié)果。
4.vue的思想是這個(gè)dom已經(jīng)存在，通過(guò)判斷可以控制它顯示隱藏。
5.所以使用vue的時(shí)候，要試著轉(zhuǎn)變一下使用jquery的時(shí)候那種思想就像api提供的這種方法 (v-if)。
<ul> <li v-if="ok">顯示</li> <li v-else>隱藏</li> </ul>
也可以通過(guò)(v-show)來(lái)控制顯示隱藏：
<ul> <li v-show="ok">顯示</li> </ul>
那么v-if和v-show的區(qū)別：
在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過(guò)程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。
v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷(xiāo)毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯會(huì)被緩存起來(lái)）。
相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。
一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，
如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。
總結(jié)
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案
本篇文章主要介紹了關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue實(shí)現(xiàn)前端頁(yè)面緩存的過(guò)程
這篇文章主要介紹了Vue實(shí)現(xiàn)前端頁(yè)面緩存的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個(gè)方法，它主要用于DOM操作，當(dāng)我們修改Vue組件中的數(shù)據(jù)時(shí)，Vue.js會(huì)在下次事件循環(huán)前自動(dòng)更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue-Router在Vue2和Vue3中的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能
這篇文章主要介紹了Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法
這篇文章主要介紹了vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue的列表交錯(cuò)過(guò)渡實(shí)現(xiàn)代碼示例
這篇文章主要介紹了vue的列表交錯(cuò)過(guò)渡實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
利用vue3+ts實(shí)現(xiàn)管理后臺(tái)（增刪改查）
這篇文章主要介紹了利用vue3+ts實(shí)現(xiàn)管理后臺(tái)(增刪改查),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10