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. webpack中常见的Plugin?解决了什么问题?

    一.是什么 Plugin(Plug-in)是一种计算机应用程序,它和主应用程序互相交互,以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序,只能运行在程序规定的系统下,因为其需要调用原纯 ...

  2. 力扣602(MySQL)-好友申请Ⅱ:谁有最多的好友(中等)

    题目: 在 Facebook 或者 Twitter 这样的社交应用中,人们经常会发好友申请也会收到其他人的好友申请. RequestAccepted 表: (requester_id, accepte ...

  3. 让微服务开源更普惠,阿里云微服务引擎MSE全球开服

    ​简介:MSE 于2020年10月在国内开启商业化服务,目前已吸引近万客户使用,用于在云上更低成本构建.更稳定运行微服务架构.此次,MSE 向阿里云国际站开放服务,旨在帮助更多客户享受到更加普惠的微服 ...

  4. 与容器服务 ACK 发行版的深度对话第二弹:如何借助 hybridnet 构建混合云统一网络平面

    简介:本次采访我将继续为大家详细讲解我的好伙伴:阿里巴巴的开源 Kubernetes 容器网络解决方案 hybridnet,以及我是如何借助它来构建混合云统一网络平面. 作者:若禾.昱晟.瑜佳 记者: ...

  5. 基于Delta lake、Hudi格式的湖仓一体方案

    ​简介: Delta Lake 和 Hudi 是流行的开放格式的存储层,为数据湖同时提供流式和批处理的操作,这允许我们在数据湖上直接运行 BI 等应用,让数据分析师可以即时查询新的实时数据,从而对您的 ...

  6. 实验8 #第8章 Verilog有限状态机设计-2 #Verilog #Quartus #modelsim

    2. 汽车尾灯控制器 2.1 实验要求:设计一个汽车尾灯控制电路. (1)功能:汽车左右两侧各有3个尾灯,要求控制尾灯按如下规则亮灭. 汽车沿直线行驶时,两侧指示灯全灭. 右转弯时,左侧的指示灯全灭, ...

  7. java.lang.NoSuchMethodException: tk.mybatis.mapper.provider.base.BaseSelectProvider

    解决错误: java.lang.NoSuchMethodException: tk.mybatis.mapper.provider.base.BaseSelectProvider 整合一遍通用mapp ...

  8. 远程协助软件哪个好,IT远程支持用什么软件

    软件行业做售后支持,有时候需要远程控制客户电脑以实现远程协助,远程解决客户问题. IT远程支持用什么软件比较好?这个我们可以逐个分析下. 一.QQ远程 一看就不专业,的确也不专业.QQ远程协助可以实现 ...

  9. IPv6 — 地址格式与寻址模式

    目录 文章目录 目录 前文列表 IPv6 的地址格式 站点前缀 地址生成方式 IPv6 地址的分类以及寻址模式 单播(Unicast)地址 Interface ID 全球唯一地址(Global Uni ...

  10. ASP.NET Core如何禁用模型验证(或者从模型状态中移除某些属性)?

    这是一篇4年前的文章:[经验分享]在ASP.NET Core中,如果禁用某个请求的模型验证? 事隔多年,又有网友问到这个问题.我就来重新整理一下,顺便扩展一下之前的解决办法. ===== 这是一个来自 ...