vue 自定义指令

砾滩多态
• 阅读 1424

vue 官网的自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html
全局的自定义指令

Vue.directive('focus', {
    inserted: function () {
        el.focus()
    }
})

在dom 中使用v-focus 使用这个自定义指令

<div v-focus></div>

局部的自定义指令

directives: {
    focus: {
        inserted: function (el) {
            el.focus()
        }
    }
}

inserted函数: 被绑定元素呗插入父节点是调用(仅保证父节点存在,但不一定已被插入文档中)
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

实例: 使用自定义指令跳转页面

directives: {
    gopage: {
        bind: (el, binding, vnode) => {
            // el 获取对应的作用元素的dom
            // vnode vue编译生成的虚拟节点 vnode.context 就是Vue对象也就是我们使用的this
            el.onclick = () => {
                vode.context.$router.path({
                    name: 'page'
                })
                // 跳转到对应的页面
            }
        }
    }
}

在项目中最好是将该指令单独写在一个文件中,在使用的地方直接引用。

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
8个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
vue 节流、拖拽指令
1、在开发中时长遇到按钮重复点击或者多次点击的情况比如创建订单或者其他情况,当然也可以通过设置变量开关,禁止状态,这里就分享一个节流的指令javascriptVUE3好像指令的生命周期和组件的生命周期同步了//立即执行版本,点击后会执行一次,然后进入定时器exportconstthrottle{inserted:function
vue 自定义指令-----文字提示气泡
实现一个简单的鼠标滑过出现文字提示。啥也不说上代码包括了指令类容更新importVuefrom'vue'Vue.directive('mouse',{//初始化bind:function(el,binding,vnode){},//被插入inserted:function(el,
Damumu Damumu
2年前
初识Vue,Hello Vue!
官方网址:https://cn.vuejs.org/第一步,引入Vue选择文档,点击Vue2文档然后选择起步,开始准备起飞进入页面后,选择安装,找到开发版本按钮,点击下载vue.js文件走一个“HelloWorld”小Demo:htmlvue文件引入mes
Easter79 Easter79
3年前
Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发转载请注明出处:葡萄城官网(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.grapecity.com.cn%2F),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。什么是指令(directive)在An
Wesley13 Wesley13
3年前
PIC中档单片机汇编指令详解(5)
位操作指令详述BCF数据寄存器指定位清0语法形式:BCFf,b操作数:f为数据寄存器的低7位地址(0x00~0x7F)B为数据位编号(0~7)执行时间:一个指令周期执行过程:使数据寄存器f的的b位清0状态标志影响:无说明:该指令可对任何数据寄存器的任意一个位置清0,常用于标志位的设定和清除,或者把某一管脚置成低电平。指
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JVM 字节码指令表
字节码助记符指令含义0x00nop什么都不做0x01aconst\_null将null推送至栈顶0x02iconst\_m1将int型1推送至栈顶0x03iconst\_0将int型0推送至栈顶0x04iconst\_1将int型1推送至栈顶0x05ic
Stella981 Stella981
3年前
Angularjs进阶笔记(2)
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题。一.自定义指令自定义指令,是Angularjs用来实现组件化的方式,相比于React和Vue的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,
Stella981 Stella981
3年前
Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等,而@HostListener()可以监听宿主元素上的事件。@HostBinding()和@HostListener()不仅仅用在自定义指令,只是在自定义指令中用的较多本文基于Angular2
砾滩多态
砾滩多态
Lv1
待到秋来九月八,我花开后百花杀。
文章
4
粉丝
0
获赞
0