学习课程:前端工程师2022版-vue基础入门
lesson8:样式绑定语法2-8 样式绑定语法-慕课网体系课 (imooc.com)
lesson9:条件渲染2-9 条件渲染-慕课网体系课 (imooc.com)
lesson10:列表循环渲染(1)2-11 列表循环渲染(1)-慕课网体系课 (imooc.com)
讲师:Dell老师
今天继续了昨天的课程安排,学习了vue的样式绑定语法、条件渲染和列表循环渲染。
样式绑定语法就是通过v-bind指令在元素上绑定其所拥有属性将其值变为data函数中返回的定义变量。变量的类型可以为字符串类型、对象、数组。使用了这条指令后就可以在data函数中自定义需要书写的属性,使标签的属性变得更加灵活。它不仅可以直接使用,还可以和普通class属性共存。
条件渲染就是通过v-if指令实现元素的展示与隐藏。首先会在data函数中定义一个布尔值变量,其次就是在模板中需要使用指令去实现展示隐藏功能的元素上添加v-if="变量名"的指令。那么当变量的值为真,则该元素展示,反之则不展示。v-else和v-else-if指令则会和离其最近的v-if指令进行匹配,一般情况下会定义多个布尔值变量。当v-if的变量值为false则该元素不显示,执行下一条。此时v-else-if的变量为true,则该元素显示。若都为假,最后会显示v-else指令所在元素。
v-if和v-show之间的区别在于v-if会在dom树中移除或添加该元素,v-show则只是将该元素的display属性值进行block和none之间的修改。每当发生dom操作,页面便会重新加载一次,及其耗费性能,所以能使用v-show的情况下就使用v-show去操作元素。
v-for指令则是会将data函数中定义的数组或者对象进行循环获取其每项的内容,并展示出来。一般形参会有两个item,index和value,key,item数组中的某一项的值,index则表示其所在位置;value表示对象中属性的值,key表示对应的属性。key值一般设置为唯一值,当增加内容后浏览器会判断key值是否存在,如果存在就不会再次渲染,提高页面性能。
继续加油!!!