Vue2.0中如何编写自定义指令示例代码详细解析？

本文共计1145个文字，预计阅读时间需要5分钟。

1、什么是指令？指令是带有“v-前缀的特殊属性，Vue知道你正在使用一种特殊的标记。除了Vue核心提供的指令（如v-model和v-show）之外，Vue还允许注册自定义指令。

1、什么是指令？

指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。

除了 Vue 核心携带着的一些默认指令（v-model 和 v-show）之外，

Vue 还允许你注册自己的自定义指令。某些情况下，还是需要对普通元素进行一些底层 DOM 访问，

这也是自定义指令仍然有其使用场景之处。

2、全局指令：

当页面加载时，元素将获取焦点，事实上，在访问页面时，如果你还没有点击任何地方，上面的输入框现在应该处于获取焦点的状态。现在让我们构建指令以完成此效果：

<template> <div class="parent"> <input v-focus> </div> </template> import Vue from 'vue' import cnChildren from './children' // 注册一个名为 `v-focus` 的全局自定义指令 Vue.directive('focus', { // 当绑定的元素插入到 DOM 时调用此函数…… inserted: function (el) { // 元素调用 focus 获取焦点 el.focus() } });

如果你想要注册一个局部指令，也可以通过设置组件的 directives 选项：

directives: { focus: { // 指令定义对象 inserted: function (el) { el.focus() } } }

我们有几个可用的钩子：

bind：在指令第一次绑定到元素时调用，只会调用一次。可以在此钩子函数中，执行一次性的初始化设置。