https://cn.vuejs.org/v2/guide/custom-directive.html

除了核心功能默认内置的指令,Vue也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令绑定到元素上执行相关操作。

自定义指令分为:全局指令和局部指令,当全局指令和局部指令同名时以局部指令为准。

自定义指令常用钩子函数

² bind     第一次绑定到元素时调用

² inserted 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)

² update   数据更新时调用

# 全局

Vue.directive('test',{

bind(el,bind){

console.log(el)

}

})

# 局部

new Vue({

directives: {

test:{

bind(el,bind){}

},

// bind/update

test2(el,bind){}

}

})

vue自定义指令 - directive的更多相关文章

  1. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  2. vue 自定义指令directive

    //自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListe ...

  3. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

  4. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  5. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  6. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  7. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  8. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

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

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  10. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

随机推荐

  1. Jenkins实战系列(一)——Jenkins简介

    Jenkins是一个开源的自动化构建工具,可以帮助开发人员自动构建.测试和部署软件.它支持多种编程语言.版本控制系统和构建工具,如Java.Git.Maven等.Jenkins的核心功能是通过一系列插 ...

  2. 力扣597(MySQL)-好友申请Ⅰ:总体通过率(简单)

    题目: 此表没有主键,它可能包含重复项.该表包含发送请求的用户的 ID ,接受请求的用户的 ID 以及请求的日期. 此表没有主键,它可能包含重复项.该表包含发送请求的用户的 ID ,接受请求的用户的 ...

  3. 如何可视化编写和编排你的 K8s 任务

    简介: 通过任务调度 SchedulerX 来调度你的 K8s 任务,能够降低学习成本,加快开发效率,让你的任务失败可报警,出问题可排查,打造云原生可观测体系下的可视化 K8s 任务. 作者:学仁   ...

  4. 一站式云原生智能告警运维平台——SLS新版告警发布!

    简介: 本文介绍什么是云原生可观测性需求以及告警限制,介绍一站式云原生智能告警运维平台--SLS新版告警. 前言 本篇是SLS新版告警系列宣传与培训的第一篇,后续我们会推出20+系列直播与实战培训视频 ...

  5. 配置审计(Config)变配报警设置

    简介: 本文作者[紫极zj],本篇将主要介绍通过配置审计的自定义规则等服务,对负载均衡进行预警行为的相关介绍. 前言 配置审计(Config)将您分散在各地域的资源整合为全局资源列表,可便捷地搜索全局 ...

  6. 解决 Serverless 落地困难的关键,是给开发者足够的“安全感”

    ​简介:越来越多的云产品都会向全托管.Serverless 形态演进.当云的产品体系 Serverless 化达到一个临界值,通过函数计算这样的 Serverless 计算服务结合其他 Serverl ...

  7. Cube 技术解读 | 详解「支付宝」全新的卡片技术栈

    ​简介: 魔方卡片(Cube),让 App 首页实现敏捷更新. ​ CodeHub#7 正式落幕,来自蚂蚁集团的技术专家「京君」与掘金社区的开发者们分享了「支付宝」全新的卡片技术栈--魔方卡片(Cub ...

  8. 当微服务遇上 Serverless | 微服务容器化最短路径,微服务 on Serverless 最佳实践

    ​简介: 阿里云Serverless应用引擎(SAE)初衷是让客户不改任何代码,不改变应用部署方式,就可以享受到微服务+K8s+Serverless的完整体验,开箱即用免运维. 前言 微服务作为一种更 ...

  9. SemanticFunction 自然语言函数

    本文将和大家介绍 LLM 的魔法,通过自然语言编程的方式开发 SemanticFunction 函数 大家都知道,编程里面的函数可以是一个完成某个功能的逻辑片段,绝大部分的函数都需要使用人类不友好的编 ...

  10. 为何 WPF 对 vcruntime140 有引用

    通过阅读 WPF 官方开源仓库的代码和文档,可以了解到在进行独立发布的时候会在仓库里面带上 vcruntime140 的原因 在独立发布的时候,可以在仓库里面找到 vcruntime140.dll 这 ...