指令(2)：自定义指令

Blackjun 发布于2019-08-22 15:41 / 3289人阅读

摘要：简介自定义指令就像一个迷你的函数，把你自定义的功能塞进这个迷你函数里，在页面上快速的调用，增加用户体验。钩子函数参数因为这几个参数，直接导致灵活度，就像定义一个组件那样，自定义指令因为参数的开放性会有无限种可能。

简介

自定义指令就像一个迷你的函数，把你自定义的功能塞进这个迷你函数里，在页面上快速的调用，增加用户体验。

Vue.directive("dyColor",{
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = "#" + Math.random().toString().slice(2,8)
        } 
    }
})
new Vue({
    el: "#app-1"
})


    
        Lorem
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat beatae neque, quo, hic molestiae accusamus maxime cupiditate impedit quia labore aspernatur doloribus necessitatibus! Odio, quod eaque consectetur dolor asperiores id.

上面这个简单示例中，使用Vue.directive("name",hooks)定义一个指令，在页面上加上前缀v-使用。
bind()为一个钩子函数，也有其他几种钩子，在钩子中完成一些自定义功能，钩子上有几个规定的参数，上面el就是一个，钩子及参数后面分析。

钩子函数

总共有五种Hook，bind、inserted、update、componentUpdated及unbind。

bind: 在指令绑定到元素上时调用。

inserted: 在被绑元素插入到父节点时调用一次（父节点是否插入文档无所谓）

unbind: 指令与元素解绑时调用一次。

inserted是新版新加的，这个时机发生在bind之后，增加点灵活度，就目前为止没发现有什么用。

update:在被绑元素被修改时，修改内容未被插入时调用

componentUpdated: 在被绑元素被修改并把修改内容插入后调用

官网这里是外星人写的，看不清，我暂时就这么理解了，这两个也是基于老版本update修改的。把一个时间分成两部分而已。因为el引用的一个是修改前、一个是修改后的内容，还是有点用。

Vue.directive("test", {
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = "#" + Math.random().toString().slice(2,8)
        } 
        $(el).find("#info_update").append(""  + (el.parentNode?"有父元素":"无父元素") +"
"  + (el.parentNode?"有父元素":"无父元素") +""  + $(el).find("h3").text() +"")
        console.log("update")
    },
    componentUpdated: function (el) {
        $(el).find("#info_update").append(""  + $(el).find("h3").text() +"")
        console.log("componentUpdated")
    },
    unbind: function (el) {
        console.log("unbind")
    }
})
new Vue({
    el:"#app-2",
    data:function(){
        return {
            msg:"test directive",
            show:true
        }
    },
    methods:{
        updateData:function(){
            this.msg = "hello"
        }
        
    }
})



    
    
    
    
        {{msg}}
        
        
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ad aut cupiditate.

插入被绑元素时，可以看到bind阶段的被绑元素没有父元素，而inserted阶段是有的；而update阶段使用的是修改前的数据，componentUpdated阶段是使用后的数据，点击解绑按钮就是移除被绑元素，自然指令也和元素解绑了。

钩子函数参数

因为这几个参数，直接导致Vue灵活度*2，就像定义一个组件那样，自定义指令因为参数的开放性会有无限种可能。

el：指令所绑定的元素，可以用来直接操作DOM

binding：一个对象，包含与指令本身相关的一些属性：

name：指令名，不包括v-前缀

value：指令的绑定值，如例v-hello = "1 + 1"中，绑定值为2

expression：字符串形式的指令表达式。例如v-hello = "1 + 1"中，表达式为"1 + 1"

oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用

arg：传给指令的参数，可选。例如v-hello:message中，参数为"message"

modifiers：一个包含修饰符的对象。例如v-hello.foo.bar中，修饰符对象为{foo:true, bar:true}

vnode：Vue编译生成的虚拟节点。可以看成el的底层表现，我们就可以通过它进一步去操作被绑元素

oldVnode: 修改前的VNODE，仅在update和componentUpdated两个钩子函数中可用

一个有意义的示例不可能覆盖它们，在这里只能做个观察，后面写插件时尽量使用它们。

GPU云服务器云服务器自定义指令自定义指令实例大云软件定义存储支持的指令架构 yii2_rules自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93663.html

每个人都能实现的vue自定义指令

摘要：指令绑定的前一个值，仅在和钩子中可用。字符串形式的指令表达式。上一个虚拟节点在上可根据需要定义一些钩子函数只调用一次，指令第一次绑定到元素时调用。指令的值可能发生了改变，也可能没有。前文先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多...

NickZhou 2019-08-21 18:23 评论0 收藏0
angular自定义指令详解

摘要：在运用的时候，运用自定义指令可以写一些组件，非常方便。这里给大家分享一些关于自定义指令的知识。在运用angularjs的时候，运用自定义指令可以写一些组件，非常方便。这里给大家分享一些关于angular自定义指令的知识。 1. 定义对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 2.定义指令的方法： angular.module(myAp...

PingCAP 2019-08-20 17:20 评论0 收藏0
工具集核心教程 | 第六篇： Freemarker模板引擎入门到进阶

摘要：到目前为止，使用越来越广泛，不光光只是它强大的生成技术，而且它能够与进行很好的集成。注意使用数字范围来定义集合时无需使用方括号数字范围也支持反递增的数字范围如对象对象使用花括号包括中的对之间以英文冒号分隔，多组对之间以英文逗号分隔。 Freemarker的介绍 Freemarker 是一款模板引擎，是一种基于模版生成静态文件的通用工具，它是为程序员提供的一个开发包，或者说是一个类...

赵连江 2019-08-19 11:38 评论0 收藏0
使用vue自定义指令开发一个表单验证插件validate.js

摘要：今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...

warnerwu 2019-05-23 17:26 评论0 收藏0
vue自定义指令升级2.0的坑

摘要：如今升级后，在自定义指令部分的全部变化了对于一个插件作者来说这简直是崩溃的毫无兼容可言。本文我就讲介绍下一个自定义指令从升级到所走的坑。吐槽我们知道，一个方法最重要的就是传参，所以自定义指令最需要的也是这点。前言从1.0.X版本就开始使用vue了，应该也是vue很早的一批用户。在我司使用vue这一年多以来（偏向移动端），我发现vue的插件真的是少之又少，这也是我当初一开始想写v-...

jokester 2019-08-22 10:43 评论0 收藏0
Vue 自定义指令

摘要：自定义指令定义直接看官网的介绍吧觉得官方文档说的很清楚了，所以我基本都是抄他的了。除了核心功能默认内置的指令和，也允许注册自定义指令。然而，有的情况下，你仍然需要对普通元素进行底层操作，这时候就会用到自定义指令。前言最近搞了毕设，需要实现一个场景，点击一块区域，弹出一个编辑区域，点击页面的其他地方的时候，这个编辑区域就隐藏，本想想之前写模态框一样写个方法的时候，突然showImg(...

you_De 2019-08-23 13:42 评论0 收藏0