Vue的学习之旅-part1
- vue的自带指令
- v-if v-else-if v-else
- 虚拟DOM的复用
- v-show 与 v-if 的不同之处:
- v-if v-show各自合适的使用位置:
- v-for 循环
- v-for 循环遍历
- :key="item" 绑定key,区分循环的内容
- 循环的应用:
前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2
前几篇博客: Vue的学习之旅-part3
博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!
书接上回,接着说vue中自带的指令,part2中讲到v-on的冒泡阻止,那这里接着讲讲v-if v-else-if吧~
vue的自带指令
v-if v-else-if v-else
lable通过for指向表单元素的id,有聚焦功能
虚拟DOM的复用
v-if v-else 案例中的小问题:
之所以通过v-if切换显示后,input输入框中的数据仍然存在,是因为vue的渲染不是直接讲DOM渲染到页面上的,而是先在虚拟DOM中渲染,然后再添加到页面中去。
在虚拟DOM中,会复用一些东西,像这里,虚拟DOM中不会建立两个lable和input,而是之间里一套,然后渲染的时候,虚拟DOM会将出现不同的位置换掉,所以才会出现切换后,input输入框中数据还在的问题,因为vue在虚拟DOM中会复用,有些东西不会删掉(用户输入的东西没有删除,而是直接复用了)
不想出现这种复用的情况,就通过key属性来区分即可
v-show 与 v-if 的不同之处:
v-if是添加/移除dom元素
v-show只是改变dom的样式,仅仅让元素隐藏起来,仍然在页面中。
v-if v-show各自合适的使用位置:
当一个元素的显示与隐藏切换的非常频繁,使用 v-show,因为没有删除dom,不用反复重构,减小游览器负担
当切换显示隐藏的次数很少,或者要移除dom时,使用 v-if 我们项目中用的多的是v-if
v-for 循环
v-for 循环遍历
遍历数组:
遍历对象:
:key=“item” 绑定key,区分循环的内容
使用 v-for的时候,要带上一个 :key=“item” ,用于提升更新虚拟DOM的效率
:key一定要和循环中的每个数据一一对应,不要用index(角标),(举个例子:当你插入数据的时候,index就发生改变了,原本的index和原本那个数据就不是一一对应的了,所以:key要用数据item进行和对应数据的绑定。这样才会一一对应【或者用其他能保证唯一性的数据进行绑定】) 要用数据item进行key的绑定,那么就要保证data中的item不重复,否则如果data有重复,那么key会报【重复错误】
循环的应用:
lable通过for指定id,注意要用v-bind(:) 进行动态绑定,否则就是字符串了
老规矩,继续下一篇~
Vue的学习之旅-part5