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. 简单的使用Echars制作柱状图

    简单的使用Echars制作柱状图 html如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 力扣697(java)-数组的度(简单)

    题目: 给定一个非空且只包含非负数的整数数组 nums,数组的 度 的定义是指数组里任一元素出现频数的最大值. 你的任务是在 nums 中找到与 nums 拥有相同大小的度的最短连续子数组,返回其长度 ...

  3. Apache Flink 误用之痛

    摘要:本文根据 Flink Forward 全球在线会议 · 中文精华版整理而成,围绕着项目的开始.需求分析.开发,以及测试.上线.运维整个生命周期展开,介绍了 Apache Flink 实践中的一些 ...

  4. 监控最佳实践--redis及业务接口

    简介: 监控最佳实践--redis及业务接口 1. 背景 1.1 问题 2020-12-04,客户侧redis集群版监控DB0 CPU突增至100%,导致数据库无法正常服务,经排查客户侧业务上存在2M ...

  5. 外部工具连接SaaS模式云数据仓库MaxCompute实战——商业BI分析工具篇

    简介: MaxCompute 是面向分析的企业级 SaaS 模式云数据仓库,以 Serverless 架构提供快速.全托管的在线数据仓库服务,消除了传统数据平台在资源扩展性和弹性方面的限制,最小化用户 ...

  6. [ML] 可视化编写运行 Python 脚本的工具 Jupyter

    Jupyter 提供了可视化的编写和运行 python 程序的 Web 界面. https://jupyter.org/install 使用只需要两步: $ pip install jupyterla ...

  7. 本周ddl(4.1-4.5)

    本周ddl(4.1-4.5) cs61a首先完成2.23之前的任务 cs61a完成3.1之前的学习 cs61a完成3.8任务并且ants完成阶段1 csapp的bomblab 记录南京5个景点及其周边 ...

  8. WPF 触摸底层 PenImc 是如何工作的

    在 WPF 里面有其他软件完全比不上的超快速的触摸,这个触摸是通过 PenImc 获取的.现在 WPF 开源了,本文就带大家来阅读触摸底层的代码,阅读本文需要一点 C# 和 C++ 基础 现在 WPF ...

  9. 原生微信小程序

    new Date 跨平台兼容性问题 在 Andriod 使用 new Date("2018-05-30 00:00:00")木有问题,但是在ios 下面识别不出来.因为 IOS 下 ...

  10. 4G 信令中的 PCO 字段

    目录 文章目录 目录 Protocol Configuration Option Protocol Configuration Option PCO(Protocol Configuration Op ...