vue基础

2.2.1 vue指令 v-text 和 v-html

语法:

v-text='vue数据变量'

v-html='vue数据变量'

v-text :只是把内容当成普通字符串,引入盒子中

v-html:会解析标签,把标签中的内容放入盒子中

会覆盖插值表达式

2.2.2 vue显示与隐藏

语法:

v-show='vue变量'

v-if='vue变量'

原理:

v-show用的是display-none隐藏(可以频繁切换使用)

v-if 直接从DOM数上移除

v-else 与 v-if 可以一起用,相当于if else

2.2.3 v-for

语法:

v-for='(值变量,索引变量) in 目标结构'

v-for='值变量 in 目标结构'

目标结构

可以遍历数组/对象/数字

注意

v-for 的临时变量名不能用到v-for范围外

2.2.3.1 v-for更新检测

1.数组反转

2.数组截取

3.更新值

口诀

1.数组变更方法,就会导致v-for更新,页面更新

2.数组非变更方法,返回新数组,就不会导致v-for更新,可采用覆盖数组或this.$set()

shift() 数组前添加

unshift() 数组前删除

push() 数组后添加

pop() 数组后删除

splice() 截取数组

sort() 排序

reverse() 反转

不更新原数组,返回一个新数组

slice 截取

filter 遍历

concat

2.2.3.2 v-for更新

循环出新的虚拟DOM结构,和旧的虚拟DOM.

结构对比,尝式复用标签就地更新内容.

2.2.4 key

无key ,就地更新

有key ,按照key比较

key:唯一不重复的字符串或者数值

用法:

有id用id,无id用索引

2.2.5 class,style

:class={类名:布尔值}

:style={css属性名:值}

2.2.6 过滤器

过滤器只能用在,插值表达式和v-bind动态属性里

场景

字符串反转:字母转大写:

语法

vue.filter('过滤器名',(值)=>{return'返回处理后的值'})

2.2.4.1 多个过滤器

语法

过滤器传参:vue变量|过滤器(实参)

多个过滤器:vue变量|过滤器1|过滤器2