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