利用vue.js插入dom节点的方法

本文主要介绍的是vue.js插入dom节点的方法，下面话不多说，来看看详细的介绍吧。

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>'
})
// 创建并挂载到 #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节点的插入方式，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 较好。

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对asp之家的支持。