vue.jshtml添加⽅法,利⽤vue.js插⼊dom节点的⽅法本⽂主要介绍的是vue.js插⼊dom节点的⽅法,下⾯话不多说,来看看详细的介绍吧。
html代码:
js代码:
var MyComponent = d({
template: '
Hello World
'
})
var myAppendTo = d({
template:'
appendTo
'
})
var myBefore = d({
template:'
before
'
})
var myAfter = d({
template:'
after
'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app');
// ⼿动挂载
new myAppendTo().$mount().$appendTo('#app');//appendTo
new myBefore().$mount().$before('#app');//before
new myAfter().$mount().$after('#app');//after
说明:
jquery是什么有什么作用
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)。
显⽰
隐藏
也可以通过(v-show)来控制显⽰隐藏:
显⽰
那么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 较好。
总结
好了,以上就是这篇⽂章的全部内容了,希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助,如果有疑问⼤家可以留⾔交流,谢谢⼤家对脚本之家的⽀持。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。