记Vue标签差异

金文翔
• 阅读 838

最近在工作要负责维护公司内部的一个管理系统,前端采用vue来开发,对有些标签的差异不是特别理解,到网上看了以下大家是怎么理解的,以下是我的总结。

v-model v:bind
v-model是双向绑定
v:bind是单向绑定
以下两句是等价的
<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />

v-show v-if
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

点赞
收藏
评论区
推荐文章
02-Vue入门之数据绑定
02Vue入门之数据绑定02Vue入门之数据绑定2.1.什么是双向绑定?Vue框架很核心的功能就是双向的数据绑定。双向是指:HTML标签数据绑定到Vue对象,另外反方向数
明月 明月
3年前
vue常见面试题
1.有使用过vue吗?说说你对vue的理解?2.说说你对SPA单页面的理解,它的优缺点分别是什么?如何实现SPA应用呢?3.什么是双向绑定?原理是什么?4.请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?5.Vue组件之间的通信方式都有哪些?6.vshow和vif有什么区别?使用场景分别是什
Souleigh ✨ Souleigh ✨
4年前
Vue 性能优化
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
Easter79 Easter79
3年前
Vue CLI 是如何实现的
点上方蓝字关注公众号「前端从进阶到入院」精选原创好文助你进入大厂文章转载自公众号「玩相机的程序员」!(https://oscimg.oschina.net/oscnet/298a297ae9ec4945aed9d914185449be.png)若微信中阅读体验不佳,可点击阅读原文在PC端阅读。VueCLI是一个基于
菜园前端 菜园前端
2年前
什么是HTML语义化?
原文链接:什么是语义化?简单了来说就是,当网页去掉CSS样式时,页面能呈现出来清晰的结构。语义化的核心作用:提升代码可读性,便于团队开发和维护。以下是语义化的HTML标签结构(部分语义化标签):假设我要编写一个这样的布局不使用语义化是这样的使用语义化是这样
Chase620 Chase620
4年前
面试官问 Vue 性能优化,我该怎么回答
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
Anthony555 Anthony555
4年前
前端面试系列——Vue面试题
Vue双向绑定原理mvvm双向绑定,采用数据劫持结合发布者订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。双
手牵手带你实现mini-vue | 京东云技术团队
Vue的双向数据绑定实现原理是什么样的,如果让我们自己去实现一个这样的双向数据绑定要怎么做呢,本文就与大家分享一下Vue的绑定原理及其简单实现