Vue的学习之旅-part4

前几篇博客: 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