指令是指v-开头，作用于html标签。

1、v-for：遍历数组进行渲染。

2、v-on：事件监听，简写为 @要绑定的事件类型。

3、v-html：将data的属性作为html语法输出，类似js中的innerHtml属性和jQuery的html()方法。

4、v-text：数据绑定标签，将对象data中的属性绑定给对应的标签作为内容显示出来，类似js的innerText属性和jQuery的text()方法。

5、v-show：实际是控制了dom的css的display属性。当这个指令为true时dom标签显示，否则为dom标签隐藏。

6、v-if：是条件指令，作用和v-show一样也是控制dom的显隐，只是原理不同，当v-if为false时，dom被直接删除掉；为true时，又重新渲染此dom。

v-else-if和v-else的作用和与v-if一致，都是用来控制dom显隐的。

注意：v-else必须和v-if使用

5、v-pre：要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

6、v-cloak：解决插值表达式闪烁的问题。因为页面在渲染之前会出现双花括号。

7、v-bind：动态绑定属性，简写为  :要绑定的指令，它的简写也称为语法糖

1）绑定常见的属性有class、style、src、href和一些自定义的属性。

2）这个指令只能实现数据的单向绑定，从M 自动绑定到V , 无法实现数据的双向绑定。

8、v-model ：指表单和数据绑定，只能运用在表单元素中。可以实现表单元素和 M中数据的双向绑定，我们通常称的双向数据绑定。

1）使用方法：在表单dom中添加v-model指令，并绑定变量。

2）双向绑定：指当原数据发生变化时，form表单元素值也跟着发生变化，反过来在form表单进行输入和删除时，原数据也发生了变化。

3）原理：在表单元素中动态绑定value属性并赋予一个变量，此时原数据会在表单中显示，该方式和花括号展示是一样的，然后再绑定一个监听事件@input,，当表单实时操作时会通过事件参数下的tager.value值获表单中取数据然后赋予原数据。

表单元素有：文本框、文本域、单选按钮、多选框和下拉框

1）v-modle与radio使用

是否属于同一组单选框一般是通过name属性名称划分，但是在vue模板中，我们通过给radio添加v-modle指令并绑定同一变量时，name属性可以不写，他们起到的效果实质一样的。

2）v-modle与checkbox使用，有单选和多项2中情况

单选：常用应用场景，比如下一步前勾选协议。变量值是布尔值，在绑定v-modle指令时，指向的变量为true时，则checkbox被选中，否则不选中。

多选：常用应用场景，比如兴趣爱好，一般有多个选择。变量值是一个数组，并绑定到v-modle指令上，当某个复选框被勾选时，会把该复选框的值添加到该数组中，取消时将该值从数组中移除。最后把数据提交到后台。

3）v-modle与select使用，有以下2种情况

单选项：在select标签上v-modle绑定的变量类型是字符串，当option选项选择某个值后，会将该值赋予该变量。

多选项：在select标签上v-modle绑定的变量类型是数组，option可以多选，选择后该值添加到数组中，取消时将该值会从数组中移除。设置select多选，需要在select标签上添加multiple属性。

​