vue系列自定义指令（三）

今天介绍vue自定义指令。vue指令功能是提供给用户操作dome的，虽然很多时候，我们可以通过选择器是操作dome,但是当dome状态改变是，我们很难捕获，所以vue不建议用户直接操作dome，而是使用指令的形式。
vue内置了很多指令，v-model,v-if,v-show,v-text,v-html等。某些时候这些指令不能满足我们，我们可以通过自定义指令来实现我们想要的指令。

指令可以全局注册和局部注册，全局注册可以在整个项目使用，局部注册，只能在当前.vue页面使用。下面介绍一下注册方式：

直接将指令挂载到vue对象上面，责为全局引入，放到组件里面的directives对象上，则为局部引入。

Vue.directive('lang', { //五个注册指令的钩子函数
            bind: function() { //只调用一次，指令被绑定
                console.log('1 - bind');
            },            inserted: function() { //当被绑定的元素插入到 DOM 中时……
                console.log('2 - inserted');
            },            update: function() { //所在组件的 VNode 更新时调用，此时数据不一定更新
                console.log('3 - update');
            },            componentUpdated: function() { //指令所在组件的 VNode 及其子 VNode 全部更新后调用
                console.log('4 - componentUpdated');
            },            unbind: function() { //只调用一次，指令与元素解绑时调用
                console.log('5 - bind');
            }
        })

可以看到，指令一开始会调用bind，在指令被绑定到dome时，会调用inserted，在有节点更新时，会调用update,节点更新完毕时，会调用componentUpdated，解除绑定时unbind被调用。下面我们实现一个指令，来具体讲解。

很多时候，输入框内只能输入正整数，比如说年龄，手机号等，如果自己实现校验则比较麻烦，我们可以通过指令，操作输入框，将用户输入的非数字字符给去掉。下面先引入自定义指令numCheck

    
    
    解绑

可以看到，我们给指令num-check传递了一个方法，来修改我们的age，当指令发现不符合规则是，会改变这个值，让用户看上去，这个框只能输入数字。当我们改变输入框的值，和销毁实例是，可以看看控制台打印。

运行效果：

运行效果

作者：伊泽瑞尔灬
链接：https://www.jianshu.com/p/434193c60b3a