1. 内置指令

　　指令是Vue.js 中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM 行为。

　　Vue.js 本身提供了大量的内置指令来进行对DOM 的操作，同时可以开发自定义指令。

2. 自定义指令

　　在 Vue 2.0 中，代码重用和抽象(reuse and abstraction)的主要是以组件的形式。

　　但是，可能某些情况下，还是需要对普通元素进行一些底层 DOM 访问，这是自定义指令的使用场景之处。

2.1 注册指令

2.1.1 全局自定义指令

　　Vue.directive(id, definition) ：注册全局自定义指令，接收参数id和定义对象。

　　其中，

　　　　id ：指令的唯一标识

　　　　定义对象：指令的相关属性及钩子函数。

<div id="app"><input v-focus />
</div>
<script>// 注册一个名为 `v-focus` 的全局自定义指令
    Vue.directive('focus', {// 当绑定的元素插入到 DOM 时调用此函数……
        inserted: function (el) {// 元素调用 focus 获取焦点
            el.focus()}});var vm = new Vue({el: "#app"});
</script>

2.1.2 局部指令

　　注册局部指令：通过设置组件的 directives 选项。

<div id="app"><input v-focus />
</div>
<script>var vm = new Vue({el: "#app",directives: {// 注册一个局部的自定义指令 v-focus
            focus: {// 指令的定义
                inserted: function (el) {// 聚焦元素
                    el.focus()}}}});
</script>

2.2 钩子函数

　　指令的定义对象提供了几个钩子函数（全部可选）：

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

　　inserted：在已绑定的元素插入到父节点时调用（只能保证父节点存在，不一定存在于 document 中）。

　　update：在包含指令的组件的 VNode 更新后调用，但可能之前其子组件已更新。指令的值可能更新或者还没更新，然而可以通过比较绑定的当前值和旧值，来跳过不必要的更新。

　　componentUpdated：在包含指令的组件的 VNode 更新后调用，并且其子组件的 VNode 已更新。

　　unbind：在指令从元素上解除绑定时调用，只会调用一次。

Vue.js 2.x笔记：指令（4）相关推荐

Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
Vue.js教程学习笔记
官方视频简易教程:https://learning.dcloud.io/ 1. 安装与部署第一阶段(初学)可以通过在html文件中引入脚本来完成安装 <script src="vue ...
js div加载html_说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...
vue.js语法和常用指令
如果已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创 ...
Vue.js中的自定义指令directives
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.自定义指令,需要声明钩子函数.注册自定义指令也分为注册全局自定义指令和注册局部自定义指令.两者用法相同, ...
Vue.js实战梁笔记02（第3-5章）
1.计算属性当表达式过程的时候,不如使用函数,如何使用函数呢,使用methods是一种,使用计算属性也是一种方式. 所有的计算属性都是以函数的形式卸载vue实例内的computed选项内,最终返回计 ...
Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...
Vue.js中的v-model指令（双向绑定）
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景你好! ...

Vue.js 2.x笔记：指令（4）