这篇文章是关于vuejs如何添加dom的。我觉得边肖挺实用的，就分享给大家参考，和边肖一起来看看。
向vuejs添加dom的方法：1。首先用new创建一个实例；2.在dom节点中手动挂载它；3.使用“$appendTo/$before/$after”等方法进行插值。
操作环境：Windows7系统，vue版本Vue2.9.6，DELL G3电脑。
vuejs怎么加dom?
利用vue.js插入dom节点的方法
本文主要介绍将vue.js插入dom节点的方法。下面就不多说了。我们来看看详细的介绍。
html代码：
js代码：分部
varMyComponent=Vue . extend({ 0
template:'pHelloWorld/p '
})
varmyAppendTo=Vue . extend({ 0
template : ' PapPentos/p '
})
varmyBefore=Vue . extend({ 0
template:'pbefore/p '
})
varmyAfter=Vue . extend({ 0
template:'pafter/p '
})
//创建并装载到#app(将替换#app)。
newMyComponent()。$ mount(' # app ')；
//手动挂载。
newmyAppendTo()。$mount()。$ appendo(' # app ')；//appendo
newmyBefore()。$mount()。$ before(' # app ')；//之前
newmyAfter()。$mount()。'(#app ')后的$；//说明：之后
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)一样。
保险商实验所
Liv-if='ok '显示/li。
Liv-else hide /li
/ul还可以通过(v-show)控制显示和隐藏：
保险商实验所
Liv-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更好。
感谢阅读！我希望这篇关于“如何将dom添加到vuejs”的文章能在这里分享。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/51781.html