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. 浅析Golang map的实现原理

    Golang中的map底层使用的数据结构是hash table,基本原理就和基础的散列表一致,重点是Golang在设计中采用了分桶(Bucket),每个桶里面支持多个key-value元素的这种思路, ...

  2. vue3 快速入门系列 —— 其他API

    其他API 前面我们已经学习了 vue3 的一些基础知识,本篇将继续讲解一些常用的其他api,以及较完整的分析vue2 和 vue3 的改变. 浅层响应式数据 shallowRef shallow 中 ...

  3. 使用C# 创建、填写、删除PDF表单域

    通常情况下,PDF文件是不可编辑的,但PDF表单提供了一些可编辑区域,允许用户填写和提交信息.PDF表单通常用于收集信息.反馈或进行在线申请,是许多行业中数据收集和交换的重要工具. PDF表单可以包含 ...

  4. HarmonyOS NEXT应用开发案例——二级联动

    介绍 本示例主要介绍了List组件实现二级联动(Cascading List)的场景. 该场景多用于短视频中拍摄风格的选择.照片编辑时的场景的选择. 效果图预览 使用说明: 滑动二级列表侧控件,一级列 ...

  5. [Contract] 一次搞懂 ETH Gas, GasPrice, GasLimit 之间关系与使用

    Gas 是一个交易费的基本单位(unit),类似汽油的单位"升",比如一次链上交易可能消耗 5 Gas 汽油,由运行的程序决定. GasPrice 是一个 Gas 的单价,一般用 ...

  6. dotnet 调试应用启动闪退的方法

    应用程序如果启动即闪退,那大部分时候日志模块还没初始化完成,很难通过应用自身的启动流程了解到应用启动失败的原因.本文来告诉几个不同的方法用来调查应用启动失败的原因 应用启动失败的原因可能有很多,例如系 ...

  7. 【AI新趋势期刊#2】AI发明计算机算法,如何给大模型排行,照片秒变二维码,视频一键动漫风

    前言 每天都要浏览大量AI相关新闻,是不是感到信息量爆炸,有效信息少? 这么多新产品和新工具,到底哪些是真正是有价值的,哪些只是浮躁的一时热点? 想参与AI产品和工具的开发,从哪里能够获得大量的灵感和 ...

  8. 学会使用 NumPy:基础、随机、ufunc 和练习测试

    NumPy NumPy 是一个用于处理数组的 Python 库.它代表"Numerical Python". 基本 随机 ufunc 通过测验测试学习 检验您对 NumPy 的掌握 ...

  9. SAP集成技术(二)接口库

    目前还没有一个集中的地方能找到全部SAP接口,它们分散在几个不同的地方. 本文链接:https://www.cnblogs.com/hhelibeb/p/17843509.html 内容部分来自< ...

  10. docker-compose 安装LNMP

    安装DNMP https://github.com/yeszao/dnmp.git https://blog.csdn.net/weixin_34038293/article/details/9427 ...