一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

前言

指令主要是使用在模板中，以v-xxx的格式，作用于绑定的dom。

vue本身有提供很多指令。今天咱们来学学这些指令。

指令

v-model

这个指令主要是用在表单和组件上。如果是用在表单上，则会代替本身的value,checked属性,实现value的双向绑定。

{{value}}
<input v-model="value">

输入的时候，value实时改变。

如果是用在组件上，相当于语法糖，给组件传入一个prop为value的值，以及组件内触发input事件时会更新value。

// father
<my-component v-model="value"></my-component>

// my-component
{
 props: {
  value: {}
 },
 methods: {
   fn() {
     this.$emit('input', '答案cp3')
   }
 }
}

value通过props传入my-component，然后执行fn的时候，触发input事件，达到更新v-model的value。

v-html

等同于innerHTML，插入html

 <div v-html="content"></div>
 
 content:`<h3>答案cp3</h3>`

div内部会渲染成<h3>答案cp3</h3>。

v-text

等同于dom的textContent属性，把内容当作文本来渲染，与Mustache语法({{}})实现的效果一样

以上面的v-html为例子

 <div v-text="content"></div>
 
 content:`<h3>答案cp3</h3>`

h3并不是标签，而是文本。

v-if/v-else-if/v-else

条件渲染

v-if 满足该条件才会渲染内容。

v-else-if 配合v-if使用，后面跟条件，如果满足条件则使用该部分的内容渲染。

v-else 配合v-if或者v-else-if使用，不满足v-if和v-else-if的条件就使用v-else的内容渲染。

这几个指令和js中的if/else-if/else逻辑是一样。

    <div v-if="status1">if</div>
    <div v-else-if="status2">else-if</div>
    <div v-else>else</div>

如果status1为true，则div的内容渲染成if

如果status1为false,status1为true，则div的内容渲染成else-if

如果status1为false,status1也为false，则div的内容渲染成else

v-for

列表渲染

v-for会对后面的表达式进行遍历，然后把对应内容遍历渲染。

遍历最多的是数组

<div v-for="(item, i) in [{name: '答案cp3'}, {name: '答案cp3'}]" :key="i">{{item.name}}</div>

会渲染成2个div，内容是答案cp3。

除了数组，也可以是数字，代表遍历的次数。

<div v-for="(item, i) in 2" :key="i">item</div>

也可以是对象

<div v-for="(val,key,i) in {name:'答案cp3'}" :key="key">{{key}}</div>

数组和数字，遍历的得到的是当前值和索引。

对象遍历，遍历得到的是值val和键key，索引。遍历的顺序和Object.keys()是一致的。

然后遍历需要提供key, 而且要唯一，这个是必须的，因为vue是根据key来实现复用的。

如果v-for和v-if在同一个元素上使用，v-for会比v-if的优先级高。