自定义Directive | 弟弟快看-教程

Vuejs除了自身提供的 v-if, v-model 等标准的Directive之外，还提供了非常强大的自定义功能。使用这个功能，我们就可以定义属于我们自己的Directive.

例子

我们看下面例子：

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
</head> 
<body> 
    <div id='app'> 
        下面是使用了自定义的Directive的input, 可以自动聚焦（ 调用 focus() 方法) : <br/> 
        <br/> 
        <input v-myinput/> 
    </div> 
    <script> 
        var app = new Vue({ 
            el: '#app', 
            directives: { 
                "myinput": { 
                    inserted: function(element){ 
                        element.focus() 
                    } 
                } 
            } 
        }) 
    </script> 
</body> 
</html>

上面的代码中，先是在 Vue中，定义了一个 directives 代码段：

directives: { 
    myinput: { 
        inserted: function(element){ 
            element.focus() 
        } 
    } 
}

myinput 就是自定义Directive的名字。使用的时候就是 v-myinput.
inserted: 这是一个定义好的方法（钩子方法），表示在页面被Vuejs渲染的过程中，在该DOM被 “insert”（插入）到页面中的时候，被触发。触发的内容是 element.focus()

用浏览器打开后，可以看到<input/> 标签是会自动聚焦的。这个时候用户就可以直接输入内容了。如下图所示：

如果在“webpack” 等可以修改 “全局Vue实例”的时候，也可以使用这样的方法：

Vue.directive('myinput', { 
  inserted: function (elemenet) { 
    element.focus() 
  } 
})

自定义Directive的命名方法

如果您希望把 v-myinput的调用，写成 v-my-input，那么在定义的时候，就应该：

directives: { 
    // 注意下面的写法. 使用双引号括起来 
    "my-input": {    
        inserted: function(element){ 
            element.focus() 
        } 
    } 
}

那么我们就可以在View中这样使用了：

<input v-my-input />

钩子方法 (Hook Functions)

我们在上面的例子中，知道了 inserted 是一个钩子方法。下面是一个完整的列表：

bind 只运行一次。当该元素首次被渲染的时候。（绑定到页面的时候）
inserted 该元素被插入到父节点的时候（也可以认为是该元素被Vue渲染的时候）
update 该元素被更新的时候。
componentUpdated 包含的component被更新的时候。
unbind 只会运行一次。当该元素被Vuejs从页面解除绑定的时候。

自定义Directive可以接收到的参数

Vuejs 为自定义Directive 实现了强大了功能，可以接收很多个参数。下面是个例子：

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
</head> 
<body> 
    <div id='app'> 
        下面是一个非常全面的自定义Directive的例子： <br/> 
        <br/> 
        <input v-my-input:foo.click="say_hi" /> 
    </div> 
    <script> 
        var a 
        var app = new Vue({ 
            el: '#app', 
            data: { 
                say_hi: '你好啊，我是个value' 
            }, 
            directives: { 
                "my-input": { 
                    inserted: function(element, binding, vnode){ 
                        element.focus() 
                        console.info("binding.name: " + binding.name) 
                        console.info("binding.value: " + binding.value) 
                        console.info("binding.expression: " + binding.expression) 
                        console.info("binding.argument: " + binding.arg) 
                        console.info("binding.modifiers: ") 
                        console.info(binding.modifiers) 
                        console.info("vnode keys:") 
                        console.info(vnode) 
                    } 
                } 
            } 
        }) 
    </script> 
</body> 
</html>

先看运行结果：

在上图中，可以看到，自定义Directive 在声明的时候，接收了3个参数： function(element, binding, vnode)

通过这三个参数，就可以看到很多对应的内容，包括 binding.name, binding.value, binding.expression. 他们的含义都是字面的意思。

借助这些内容，我们可以实现我们自己想要的Directive.

实战经验

1、优先考虑使用Component.；

考虑到维护成本。它的作用跟 JSP 中的自定义标签是一样的。与其使用 Directive, 不如使用 Component.

2、如果一定要用，把它实现的尽量简单；

如果接手的新人水平不如你，那他很可能读不懂这块代码。

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有

43、自定义Directive

例子

自定义Directive的命名方法

钩子方法 (Hook Functions)

自定义Directive可以接收到的参数

实战经验