vue2实现directive自定义指令的封装与全局注册流程

目录
  • 前言
  • 一、directive自定义指令介绍
  • 二、全局注册使用流程
    • 1.准备好我们需要的自定义指令
    • 2.开始在main中导入该文件完成注册功能
    • 3.完成了注册功能开始使用
  • 总结

前言

我们在使用vue框架的时候，指令基本能够覆盖我们平常的工作。可难免我们根据业务需求走总有的指令无法一步到达我们想要的结果。这个时候我们就可以自己动手手动封装来制作一个指令用于完成我们的设计。

一、directive自定义指令介绍

1.概念：

除了 Vue 内置的一系列指令 (比如v-model或者v-show等众多指令 之外，Vue 还允许你注册自定义的指令 (Custom Directives)

2.作用：

丰富我们指令的功能，使我们组件具有原生指令不具备的功能作用

3.使用：

使用Vue.directive('自定义指令名'，{对象中写方法})，随后v-自定义指令名使用（见下）

二、全局注册使用流程

1.准备好我们需要的自定义指令

创建一个单独的文件夹来存储我们的自定义指令

比如博主的路径：src/dynamic/index.js

export const focus = {
  inserted: function(dom, options) {
    console.log(dom, 'dom')// dom相当于$refs
    console.log(options, 'options')// 相当于该属性，我们的值可以从这获取
    dom.focus()
  }
}

我们查看我们的dom与options打印出来的是什么

可以得知：dom是当前的标签，我们的options为我们自定义指令的属性方法等

2.开始在main中导入该文件完成注册功能

main.js中完成导入

// 使用循环注册的方式
import * as directives from '@/directives'
// 开始遍历注册
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})
console.log(Object.keys(directives), 'Object.keys(directives)')
console.log(directives, 'directives')// 这玩意是一个对象

控制台查看我们导入的directives是什么，发现是一个对象

3.完成了注册功能开始使用

  自定义指令<input v-focus="'看看我传递的位置是传递到哪里去了'" type="text">

可以看到我们传递给组件的值用 =" (数据)" 进行传递，我们通过打印options.value可以获取我们传递进来的数据

效果查看：当我们刷新页面后进入直接是触发了focus()方法

注意点：

  • 导入时候 * 是通配符表示全部 as为取别名
  • 使用方法为v-focus,切记加上v-进行使用
  • Object.keys()获取的是对象的键产生的数据用数组包裹起来，forEach()用于遍历数组
  • 值的传递使用value可以获取

总结

到此这篇关于vue2实现directive自定义指令的封装与全局注册流程的文章就介绍到这了,更多相关vue2 directive自定义指令封装与全局注册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue2.x-directive的学习笔记

    详解Vue2.x-directive的学习笔记

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令. 官方建议directive是对纯 DOM 元素进行底层操作使用,一般情况下还是建议使用组件的复用. directive的意义 自定义指令是用来操作DOM的. 尽管数据驱动是Vue的核心之一,但是在实际情况下,并不是所有的情况都可以用数据来驱动视图,我们不

  • 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定.我们可以设置指令在某一个事件发生时的具体行为. 例子如下: 页面一进后, 在控制台中设置一个新值:通过控制台设置的新name 再设置一个新值:通过控制台设置的新name 最后点击解绑,解除绑定(解除绑定之后,id="app"的Dom和vm的实例之间解除mvvm的绑定关系): 代

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • vue2实现directive自定义指令的封装与全局注册流程

    目录 前言 一.directive自定义指令介绍 二.全局注册使用流程 1.准备好我们需要的自定义指令 2.开始在main中导入该文件完成注册功能 3.完成了注册功能开始使用 总结 前言 我们在使用vue框架的时候,指令基本能够覆盖我们平常的工作.可难免我们根据业务需求走总有的指令无法一步到达我们想要的结果.这个时候我们就可以自己动手手动封装来制作一个指令用于完成我们的设计. 一.directive自定义指令介绍 1.概念: 除了 Vue 内置的一系列指令 (比如v-model或者v-show等

  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • 详解Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面

  • Vue.js directive自定义指令详解

    Vue.js directive自定义指令详解

    自定义一个demo指令 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数. <div id="app"> <!-- input输入框获得焦点 --> <input type="text" v-focus/> </div> <script> // 注册一个全局自定义指令

  • Vue.directive自定义指令的使用详解

    很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el

  • vue自定义指令directive实例详解

    vue自定义指令directive实例详解

    下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive

  • Vue的土著指令和自定义指令实例详解

    Vue的土著指令和自定义指令实例详解

    1.土著指令 当我开始学习Vue的时候,看官网的时候看到了"指令"两个字.我愣住了,what?指令是啥啊?后来继续往下看,像这种什么"v-for""v-show""v-if"都叫做指令.等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,比如"v-if""v-show""v-model""v-for""v-bind&

  • vue3 自定义指令详情

    目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

  • Angular的自定义指令以及实例

    Angular的自定义指令以及实例

    前面的文章介绍了很多angular自带的指令,下面我们看看如何使用directive自定义指令. 先看一个例子: <body> <div my-hello></div> </body> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.directive('myHello',function(){ return { restrict

随机推荐