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">1div>
<div v-else-if="theState===2">2div>
<div v-else-if="theState===3">3div>
<div v-else>0div>

7.v-for

<li v-for="item in items">{{item.text}}li>

<li v-for="(item, index) in list">{{item}} -- {{index}}li>

<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">

<div :class="{ red: isRed }">div>
<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">

<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">这是一个插槽h2h2>
      <h3 slot="h3">这是一个插槽h3h3>
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>commenth1>
  <p>{{msg}}p>
div>

<my-component v-once :comment="msg">my-component>

<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: 只调用一次，指令与元素解绑时调用。