vue指令

一、所有的vue指令都以v-开头，格式：

<元素标签 v-指令名=“”></元素标签>

二、常见指令

1、v-text

渲染data数据，格式：<元素标签 v-text=“data属性名”></元素标签>

注：在元素标签中间所写的内容不会显示。

2、v-html

将字符串结构的dom，转化为dom渲染在页面中。

格式：<元素标签 v-text=“data属性名”></元素标签>

注：在元素标签中间所写的内容不会显示。

3、v-show

可以根据值得真假控制元素的显示与隐藏。

原理：通过控制值得真假，控制元素的display属性，none或者block。

4、v-if

通过控制值得真假，控制元素的销毁与重建。可以单独使用，可以一直编写v-if="条件“，条件的值是布尔值。

5、v-else-if

不能添加条件，需要配合v-if或者v-if使用。

6、v-else

不能添加条件，需要配合v-if或者v-else-if使用。

7、v-for

可以对数据进行循环遍历，类似于js里的for循环。

格式：<元素标签 v-for=”(自定义名字，下标索引）in data属性名" ：key=”下标索引">{{自定义名字}}<元素标签>

其中自定义名字对应的是data里边的每一项数据，如果是数组的话表示数组的每一项。

key是为了对数据进行快速的内部排序，用到了diff算法。

v-for尽可能不要和v-if在一个元素标签上使用。

8、v-on

主要作用是绑定事件。

格式：<元素标签 v-on:事件方法名="自定义时间名(实参)"></元素标签>

<元素标签 @事件方法名="自定义时间名(实参)"></元素标签>

methods:{

自定义时间名（形参）{

//执行代码块

}

}

9、v-bind

动态绑定属性。

格式:<元素标签 v-bind:属性名=“{类名：布尔值}”></元素标签>

<元素标签  :属性名=“{类名：布尔值}”></元素标签>，如果布尔值为true添加类名，为false去除类名。

<元素标签  :属性名=“['类名1‘，{类名2：布尔值}]”></元素标签>,类名1为默认类名，类名2为动态类名。

10、v-mode

绑定表单进行数据的渲染。

<元素标签 v-model=“data属性名”></元素标签>

11、v-pre

跳过当前节点及其子节点，渲染其他元素。

12、v-clock

可以隐藏未编译mustache标签，直到实力准备完毕。

13、v-once

只渲染元素组件一次。