vue指令

1、v-text，v-html

更新DOM对象的innerText/innerHTML

语法:

v-text="Vue数据变量"
v-html="Vue数据变量"

注意:

会覆盖插值表达式

两者区别:

v-text把值当成普通字符串显示； v-html把值当成标签进行解析显示。

2、v-show、v-if

控制标签的隐藏或出现。

语法:

(它们会对vue变量进行判断，如果为false则隐藏或移除，如果为true则不做任何操作)

v-show="Vue变量"

v-if="Vue变量"

两者区别：

v-show是用css方式隐藏标签；

v-if直接从DOM树上移除；

v-if 可以配合v-else或者v-else-if使用。

延申：v-else-if，v-else

作用：

进行条件筛选。

注意：

v-else不用传值，其它情况都不满足，则满足它；if、else if、else必须是相邻的。

二、v-for更新

虚拟dom

虚拟DOM是什么?

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

虚拟DOM好处?

提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)。

原生js的dom更新，都是针对dom实体的，这样就会有一个弊端，实体dom里面会有很多很多的方法或者属性，例如下图

但我们更新的值可能只对一个属性做了改变，比如更新innerText值，可是实际上，程序却把dom的全部属性或方法重新渲染了一遍，这样一来未免显得有些浪费性能。

vue技术就这一问题做了改变，vue技术并不是直接操作实体dom的。

首先vue会创建一个虚拟dom，这个虚拟dom会缓存在内存中，而且这个虚拟dom里只包含了我们设置了的值，实体dom里的方法和属性，因为没有调用所以并不会去加载并缓存，比如下图：

当我们对dom进行更新或改变的时候，程序会重新生成一个新的虚拟dom，并拿出缓存在内存中的虚拟dom和新的虚拟dom进行对比。

如果两者没有差别，那么程序就会延用旧虚拟dom，而且不会去更新实体dom；

如果两者内容有改变的话，程序就会把更新的东西更新到旧虚拟dom上，并缓存到内存中，再去更新实体dom的内容(这里的实体dom更新并不会把全部的方法和属性重新渲染，只是对有更新的地方做更新)，这样也可以达到dom更新的效果。

可以看出，在这里就没有像原生js更新实体dom那样对全部方法和属性进行重新渲染，也就解决了性能浪费的问题。

v-for

就地更新

就地更新原则，新旧DOM产生后对比, 然后决定是否复用真实DOM/更新内容

弊端：

就地更新的触发条件是，vue检测到了更新；

如果vue没有检测到更新，那么页面上显示的内容就不会变。就如：数组使用方法filter()、concat()、slice()、数组元素修改。

由于语言的限制，数组更新值，vue识别不到。

口诀:

数组方法会改变原数组, 就会导致v-for更新,页面更新；

数组方法不会改变原数组, 而是返回新数组, 就不会导致v-for更新；

数组元素修改可采用覆盖数组或 this.$set()

无key更新

介绍：

无key的话会采用就地更新；

以原虚拟dom为准，拿之前的结构内容和更新后的结构内容水平进行对比，就如下图

无key就地更新机制

有key更新

介绍：

交换顺序，不采用就地更新；

以新虚拟dom为准，以key值查找对应原虚拟dom内容进行对比更新。

有key更新机制

注意： 用索引的话还是会采用就地更新。

动态设置class

用v-bind给标签class设置动态的值；

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

动态style：

给标签动态设置style的值

语法 :style="{css属性名: 值}"

过滤器：

介绍：

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

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

Vue中过滤器应用示例：

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

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

局部过滤器

语法:

filters: {过滤器名字: (值) => {return "处理后的值"}---在有需要的 vue文件中声明。

使用示例：

全局过滤器

语法：

Vue.filter("过滤器名", (值) => {return "处理后的值"})---注意： 全局过滤器必须在main.js里声明。

示例1：

示例2：

注意：

数据A | 函数名=>数据A就为函数的第一个参数；

数据A | 函数名(实参a)=>数据A还是函数的第一个参数，实参a为函数的第二个参数...

数据 | 函数名 | 函数名=>传多个过滤器。

计算属性：computed

示例以及语法：

注意： 以这种写计算属性有弊端，就是我们修改计算属性值的时候会报错。

原理：

计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果。

计算属性的完整写法：

语法：

原理：

例：a+b=c，a和b为影响属性名的其它条件，c为属性名的值。

如果a+b有一个数变了，就会触发get函数，并把return值赋值给属性名c；

如果c变化了，则触发set函数，形参值为c改变之后的值，我们可以在set函数里设置影响a+b的代码。

注意：

computed的属性名不用在data里声明