Vue的14个内置指令、自定义指令和5个指令钩子函数

声明：部分内容来自vue官方文档或网络。

一、从Vue官方文档中可以了解Vue的14个内置指令，如表格所示：

序号	指令代码	作用
1	v-text	更新元素的 textContent。
2	v-html	更新元素的 innerHTML。
3	v-show	根据表达式之真假值，切换元素的 display CSS 属性。
4	v-if	根据表达式的值的真假条件渲染元素。
5	v-else	为 v-if 或者 v-else-if 添加“else 块”。
6	v-else-if	表示 v-if 的 “else if 块”。可以链式调用。
7	v-for	基于源数据多次渲染元素或模板块。
8	v-on	缩写为“@”。绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
9	v-bind	缩写为“:”。动态地绑定一个或多个特性，或一个组件 prop 到表达式。
10	v-model	在表单控件或者组件上创建双向绑定。
11	v-slot	缩写为“#”。 提供具名插槽或需要接收 prop 的插槽。
12	v-pre	跳过这个元素和它的子元素的编译过程。
13	v-cloak	这个指令保持在元素上直到关联实例结束编译。
14	v-once	只渲染元素和组件一次。

二、示例如下：

1.v-text

<span v-text="msg"></span>
或
<span>{{msg}}</span>

2.v-html

<div v-html="html"></div>

3.v-show

<div v-show="isShow"></div>

4.v-if

5.v-else-if

6.v-else

<div v-if="theState===1">1</div>
<div v-else-if="theState===2">2</div>
<div v-else-if="theState===3">3</div>
<div v-else>0</div>

7.v-for

<li v-for="item in items">{{item.text}}</li>
<!-- item 为当前项，index 为索引 -->
<li v-for="(item, index) in list">{{item}} -- {{index}}</li>
<!-- item 为值，key 为键，index 为索引 -->
<li v-for="(item, key, index) in obj">{{item}} -- {{key}}</li>

8.v-on

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
或
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

用到的修饰符有：
.stop：调用event.stopPropagation()。
.prevent：调用event.preventDefault()。
.capture：添加事件侦听器时使用 capture 模式。
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调。
.native：监听组件根元素的原生事件。
.once：只触发一次回调。
.left：(2.2.0) 只当点击鼠标左键时触发。
.right：(2.2.0) 只当点击鼠标右键时触发。
.middle：(2.2.0) 只当点击鼠标中键时触发。
.passive：(2.3.0) 以{ passive: true }模式添加侦听器。

9.v-bind

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
或
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<div :style="isBorder?'border-radius:50%':''"></div>

10.v-model

<!-- 计算器 -->
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{message}}</p>

11.v-slot

<Hello-world>
      <h1>你好</h1>
      <h2 slot="h2" @click="say">这是一个插槽h2</h2>
      <h3 slot="h3">这是一个插槽h3</h3>
</Hello-world>

<template id="hello">
      <div>
        <slot name="h2"></slot>
        <slot name="h3"></slot>
        <slot></slot>
      </div>
</template>

12.v-pre

<span v-pre>{{ 这里将不会被编译 }}</span>

13.v-cloak

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

14.v-once

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

三、Vue支持自定义指令：

1.定义全局自定义指令

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
})

2.定义局部自定义指令

new Vue({
 directives: {
   focus: {
     inserted: function (el) {
       el.focus(); // 聚焦元素
     }
   }
 }
})

四、5个指令钩子函数：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次，指令与元素解绑时调用。