指令拓展

Guitar大约 4 分钟

Vue 的其他指令

v-cloak

v-cloak 指令存在于 Vue 接管前的元素中，Vue 接管后，指令在真实dom中不存在。（作为vue托管的标记）

可以配合CSS样式，解决胡子的闪现问题。

配置CSS样式：

[v-cloak] {
	display : none;
}

v-once

只渲染一次，渲染完毕后视为静态内容。

v-pre

带有该指令的标签将不会被编译，可以提高编译速度。

在没有 Vue 语法规则的标签中使用可以提高效率。
不要将它用在带有指令语法以及插值语法的标签中。（会导致 vue 语法失效）

Vue 自定义指令

Vue 允许用户自定义指令，实现对普通 DOM 元素进行底层操作。

自定义指令也是一种代码复用和抽象的形式。

自定义指令的组成

指令包括：

指令名（不包含 v- 前缀的部分）
Vue官方建议指令的名字要全部小写，单词间使用 - 进行衔接。
自定义指令也支持动态参数，使得指令参数可以根据组件实例数据进行更新。语法与内置指令一样。
指令钩子函数（特定时刻执行的函数）

指令钩子函数详解

指令钩子函数均为可选，由vue在特定的时刻调用，并传入特定的参数。

钩子函数名与调用时刻

bind：只调用一次，指令第一次绑定到元素时调用。
在这里可以进行一次性的初始化设置。在这里获取不到父节点 element.parentNode （null）。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
在这里可以获取到父节点 element.parentNode 。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的实参

钩子函数由vue调用，并按下列（形参名）顺序传入实际参数。

钩子函数没有自己的this，一般情况下this是window。

指令的完整语法：v-指令名:参数="vue表达式"。

el：指令所绑定的元素，可以用来直接操作 DOM。
binding ：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。如 my-directive 。
- value：指令的绑定值。
  指令使用时，右侧 vue表达式 的值。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

自定义指令的实现

自定义指令可以注册为全局指令，也可以注册为局部指令。以配置项的形式将钩子函数进行封装，称为指令定义对象。（这也被称为对象式）

// 指令定义对象
{
    // 内部封装钩子函数
    bind(...){
         ...
	}
    inserted: function (el) {
      el.focus()
    }
	...
}

指令定义对象可以简写为一个单一的钩子函数，此时 bind、update 钩子都采用这个实现，其他的钩子无实现。（这也被称为函数式）

function (el, binding) {
  el.style.backgroundColor = binding.value
}

此时的调用时机等同于 bind+update 的调用时机，亦即：

模板初次解析时（指令第一次绑定到元素时，bind）。
模板重新解析时（update）。

局部指令 directives 配置项

创建vm时，给出 directives 配置项以注册局部指令。

const vm = new Vue({
    el : '#app',
    data : {
        msg : '自定义指令'
    },
    directives : {
        '指令名' : 指令定义对象 , // 指令名含 - 时
        指令名 : 指令定义对象 // 指令名不含 - 时
    }
}

全局指令

Vue.directive('指令名', 指令定义对象)