【金秋打卡】第2天 前端开发工程师2022版-vue基础入门(上)

课程名称：前端开发工程师2022版

课程章节：vue基础入门(上)

课程讲师：Elex

课程内容：

1. v-if 和v-show区别

v-if：通过改变dom的结构来实现元素的显示和隐藏效果

v-show：通过修改元素的css属性（display）实现元素的显示和隐藏，不会改变dom结构

总结

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2. vue 双向绑定

一般适用于表单

可以用空数组存储或字符串 valua 的值 sdssd:[],dsdsd:''

{{sdsdsd}}

v-model="sdsdsd"双向绑定指令 和data的sdsdsd值作绑定 

< textarea v-model="sdsdsd" / > 双向绑定

< textarea tepy='checkbox' v-model="sdsdsd" / >

< textarea tepy='radio' v-model="sdsdsd" / >

sletect v-model="sdsdsd" 可多选

true-value="hello"

false-value="asdsad" 定义初始值重置

model修饰符

v-model.lazy='asdasd' model失去焦点的时候才触发双向数据绑定

v-model.number 

trim 去除前后的空格

3. 列表渲染 

v-for=''item in list ' 使用v-for指令对list数据进行循环，循环到第一项的时候会放到item里面 然后使用{item} v-for=''(item，index) in list ' 第二个参数 index 指的是当前循环的下标

v-for=''(value，key，index)  in listobject '  使用v-for指令对listobject对象进行循环 第一个是对象的value值，第二个参数值是 对象的名字 第三个参数是对象的下标值

给循环的每一项增加一个:key=“item” 尽量是唯一的在底层增加性能

当循环一定要给:key值

pop删除函数 push增加函数

shift 从0开始删除函数

unshift 从0开始添加内容

splice sore 

reverse 变更函数取反 

课程收获：

谢谢老师，讲的非常细致，很容易懂。