vue02Vue第二天 vue指令 v-text和v-html 语法： v-text="vue数据变量" v-html=

Vue第二天

vue指令

v-text和v-html

语法：

v-text="vue数据变量"

v-html="vue数据变量"

注意: 会覆盖插值表达式

v-text

把内容作为文本直接显示

v-html

把值当做html解析html显示

v-show和v-if

目标: 控制标签的隐藏或出现

语法:

v-show="vue变量"

v-if="vue变量"

原理

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

v-if 原理是否删除，v-if可以和v-else和v-else-if搭配使用

虚拟DOM

本质是一个JS对象, 保存DOM关键信息

优点：提高DOM更新的性能, 不频繁操作真实DOM,

在内存中找到变化部分, 再更新真实DOM(打补丁)

v-for更新监测

目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新

情况1: 数组翻转

情况2: 数组截取

情况3: 更新值

数组方法

不会修改原始数组的方法不会导致v-for更新

array.filter

array.slice

修改原始数组的方法会导致v-for更新

array.push

array.reverse

array[index] = value

不会触发更新

$set(数组, 索引, 值)

v-for的就地更新

在上一次的列表上逐条修改

v-for的key的作用

使用：有id用id, 无id用索引

作用：根据key查找元素，定位和更新

优点：key优化性能

条件控制样式

class

语法：:class="{ 类名: 布尔值 }"

类名有横线，加引号

style

语法：:style="{ 样式属性名: 合法的样式值 }"

样式名有横线，加引号或者小驼峰

过滤器

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

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

Vue中的过滤器场景

字母转大写, 输入"hello", 输出"HELLO"

字符串翻转, "输入hello, world", 输出"dlrow ,olleh"

语法：

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

filters: {过滤器名字: (值) => {return "返回处理后的值"}

过滤器声明

Vue文件data同级的filters属性里

main.js，Vue.filter('过滤器名', 方法)

方法

记得返回数据

方法第一个参数：表达式内容

传给方法的参数从第二个开始

计算属性

目标: 一个数据, 依赖另外一些数据计算而来的结果

语法：{{ 变量 }}

声明在：data同级的computed对象内

计算属性方法要返回值

好处：缓存计算结果，只有依赖项变化才会重新运算

完整写法：

计算属性: { get() {}, set(value) { } }