vue常用指令详解

1.v-html

往div里插入标签，v-html不仅可以渲染数据，而且可以解析标签

如果需要定义插入标签的样式，可以这样写

2.v-text

v-text和{{}}表达式渲染数据，不解析标签

示例如上

3.v-for

v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字

① 遍历简单的数组

data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式{{}}来展示当前遍历的对象

有时除了遍历数据外，我们还需要当前遍历的序号：

（item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：

② 遍历对象数组

通过"item.score"的方法，来获取对象的属性值。运行结果如下：

③ 遍历对象

这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中XX为对象的值，YY为对象的key

当然也可以写成：(XX,YY,i)，其中i为索引值

④ 遍历数字

这里in后面直接写的是具体的数字。运行结果：

4.v-if

条件渲染，即，使用了 v-if

如果满足条件，则整个子节点都会被渲染出来，包括事件的绑定等

如果不满足条件，则整个子节点都会被删除，包括事件也会被解绑

要加快初始化时的渲染速度，使用 v-if

如果加入v-else-if

5.v-show

实际上就是 display:none 的快捷方式。

v-show 只是隐藏了节点的显示，但是节点还在，其绑定的事件也都还在

v-if 和 v-show 的不同使用场景，从两者的原理可以看出，v-if 的来回切换成本很高。而 v-show 在初始化时，需要全部渲染，成本相对 v-if 要高

所以：需要频繁切换状态的场景，使用 v-show

           要加快初始化时的渲染速度，使用 v-if

v-show呢如果条件为false，运行后，还是生成了条件为false所在的标签，但是只是让其display属性为none，即该标签不进行显示，看下面的代码:

运行后：

发现没，运行后的代码中有

Error!

，就是说Erroe!所在的标签还是生成了代码，只是没有进行显示而已，而v-if 如果条件为false，就直接不生成代码，两者之间有本质的区别

6.v-bind

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

使用v-bind进行样式的修改

因为v-bind指令的初衷就是为了动态的切换class，如果绑定的对象属性太多的话，就会影响代码的可阅读性了，因此我们很多时候会绑定一个定义在data上的对象，或者绑定一个返回对象的计算属性

除此以外，v-bind指令还可以用于绑定其他的html属性，例如

在实际开发中，Vue.js还为v-bind指令提供了一种缩写，对比如下：

7.v-on

给元素进行事件绑定，需要通过v-on:指令实现

鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等

键盘事件：onkeyup onkeydown onkeypress 等等

语法

在vue中声明事件处理函数

有时，根据业务要求，事件方法需要传递参数，形式有如下3种:

如果传递就使用传递的(有传递实参)

如果没有声明() ，形参就是“事件对象”

如果声明(),还没有传递实参，形参就是undefined

事件操作数据信息

methods中的事件方法如果需要操作vue实例的data数据，可以通过this关键字调用，this代表vue实例对象，这个对象可以对本身的许多成员进行调用

8.v-model