v-text、v-cloak、v-html、v-once、v-pre、v-bind指令的学习

认识vue指令

         vue的指令directive只是dom的行间属性，vue给这类属性赋予了一定的意义，来实现特殊的功能

所有的指令都是以 v- 开头

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

那么接下来我们可以看看vue提供了哪些指令

( 所有指令的值都是表达式！ )

v-text：文本指令

代码

v-cloak指令的使用：处理页面闪烁问题

第一步要给元素添加v-cloak

代码

第二步：手动的给这个元素添加 display : none

v-html指令：双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，你将需要用到v-html指令

把html字符串当成html渲染，类似于innerHTML

代码

运行结果

使用v-html指令的div，将数据中的h1解析成了标签元素

但是一定要注意的是，v-html指令一定要慎用，可能会攻击，如果在数据中添加一个script标签也能识别，那么script里面就可能会添加攻击你的脚本。

所以如果要使用v-html指令，一定要是可信的，不信任的会有问题。

总结三种将数据渲染的页面的方法

1、虽然上面的三种方法可以将数据渲染到页面上，但是工作中最常用的是大胡子语法

2、插值表达式最常用但是在加载的时候会出现闪烁的问题，无法将html格式数据渲染，只能当字符串展示。

3、v-text虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式的数据。

4、v-html谨慎使用会出现xss攻击的风险。

v-once指令

平时我们使用Mustache语法，包括v-text，v-html指令渲染的页面都是具有响应式的，当数据发生变化，视图也会跟着改变。

v-pre指令

跳过代码编译

v-bind指令：动态属性绑定

未使用v-bind指令的class属性的值是一个字符串，表示给标签添加一个className的类名

使用v-bind指令的class属性值不在是字符串，而是表达式，表达式里的className不是一个普通的字符，而是一个变量，Vue实例data中的数据。

简写方式

Vue对于v-bind指令还提供了简写的方式 ：

代码

vue属性的动态绑定

通过上面的学习，我们知道，v-bind指令可以让我们将属性值关联到Vue data数据中，这样的属性，我们称作属性的动态绑定。

属性的动态绑定比较符合vue以数据驱动的模式，如果需要修改哪个属性值，就可以直接通过修改vue数据即可。

例如：项目中的轮播就像轮播图中的数据，在替换轮播数据的时候就会非常便捷。

代码

注意：

动态属性绑定，在我们需要的时候在使用，如果一个属性的值是固定的，并不会在未来发生改变，就没有必要绑定属性。

但在属性动态绑定过程中有两个属性比较特殊，这两个属性就是class和style属性。

在将 v-bind 用于class和style时，Vue.js做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。

代码

使用动态绑定class属性的div，class属性值被替换成为了vue data属性中的数据，也就是说动态绑定class属性的box是一个变量。

没有使用动态绑定class属性的值就是一个普通的字符串divBox。

动态绑定的class与普通class混用注意事项

动态绑定class和没有绑定的class可以同时使用，步冲突，Vue会将动态class属性与普通class属性在最后显示是合并到一起。

数组语法：动态绑定多个类名，需要数组的写法

因为动态绑定的class值是表达式，我们就可以利用数组来罗列多个动态绑定的类名。

因此可以 v-bind:class 动态绑定class值中协商数组，使用数组来罗列多个绑定的class类名。

代码

这样渲染出来就会有两个类：divbox和pbox

元素审查

动态绑定class值的处理器

既然动态绑定class的值是表达式，那么我们就可以在表达式里，写一些基本的表达式处理数据，通过逻辑的判断来决定要不要给dom元素添加这个类名。

代码

isTrue为真时

isTrue为假时

注意：

        不推荐使用三目运算去做类名切换，因为如果一个标签上有多个需要动态切换的类名，会出现后面的动态绑定的class没有任何效果，所以这种写法是有问题的，同时我们也会发现三目表达式切换类名不是特别的友好。

绑定行内样式

   v-bind动态绑定属性除了class比较特殊外，还有一个style行内样式属性也比较特殊。

未使用vue动态绑定属性的行内样式

代码

分析：

1、和其他动态绑定属性一样，有时候，我们就希望样式的值是可以动态变化的

2、那么我们就需要使用到v-bind动态绑定属性的指令

3、同时使用动态绑定属性以后，style属性的值将变成表达式，以前的写法就不合适了

4、既然是表达式，我们就可以使用对象和数组方式罗列样式

对象语法

动态绑定style属性的基本用法

1、如果使用动态绑定属性方法绑定行内样式，那么style属性值将不再是字符串，而是表达式。

2、动态绑定style的值既然是表达式，那么就可以在表达式中使用对象。

3、如果值为对象，那么对象的属性名则为CSS样式属性，值为样式的值。

4、注意，此时对象中的属性值，可以是确定的样式值，也可以是vue的数据变量。

5、因此有些值不能再像style标签中一样书写，以前使用不加引号，现在使用必须加引号。

表达式里的大括号即为JS对象，对象属性的标识符是不支持-连字符的

如果我们有两种处理方案

1、驼峰式

2、如果要使用连字符，就需要添加双引号，将属性变成字符串的写法