首页 > 其他分享 >怎么封装一个vue的自定义指令

怎么封装一个vue的自定义指令

时间:2022-11-13 11:35:56浏览次数:45  
标签:Vue 封装 directive 自定义 js vue 指令

自定义指令分为 全局和局部的指令 ;

1. 自定义全局指令:

  在 mian.js 中 ,使用 Vue.directive(‘指令名’ ,  配置对象 )

2. 局部自定义指令

  在组件中使用 directives 属性自定义指令 ;

批量注册自定义指令:

  在src文件新建一个 directive 文件专门用来自定义指令 ,然后在main.js 使用 import * directive from 导入全部的自定义指令 ;得到一个数组 ;

然后遍历数组通过 Vue.directive 注册所有的自定义指令 ;

标签:Vue,封装,directive,自定义,js,vue,指令
From: https://www.cnblogs.com/zhulongxu/p/16885645.html

相关文章

  • 3-Vue高频面试题
    1.你怎样理解VueVue通过MVVM思想实现数据的双向绑定,数据驱动页面视图。Vue不是一个MVVM框架,它是一个视图层框架。Vue是数据驱动的框架,我们不必纠结于DOM元素的获取......
  • 第四十五章 开发自定义标签 - 规则和操作
    第四十五章开发自定义标签-规则和操作CSP允许你开发自定义的HTML标签用于CSP文件。CSP标记语言本身是使用自定义标记机制实现的。自定义标签提供了一种方式:使用熟悉......
  • vue.js3:用html2canvas把html转canvas图片([email protected] / [email protected])
    一,安装html2canvas1,官网:https://html2canvas.hertzen.com/如图:代码站:https://github.com/niklasvh/html2canvas2,通过npm安装liuhongdi@lhdpc:/data......
  • 自定义标记
    目录介绍注册标记使用标签介绍自定义标记首先要在pytest.ini文件当中注册也可以通过fixture注册,不注册的话不影响使用但是执行的时候就会有警告注册标记#pytest.in......
  • Vue.js -- 动态组件&异步组件
    动态组件根据数据的变化,动态切换组件的显示。点击切换组件首先定义两个子组件//子组件app.component('myInput',{template:`......
  • 第二章--使用自定义类
    代码:publicclassClassAndObjectTest{ publicstaticvoidmain(String[]args) { //创建类的实例,定义一个对象变量引用这一实例 MyClassobj=newMyClass(); //......
  • vue监视实操案例-根据导航条点击面包屑发生改动
    监视部分代码: $route(to,From){console.log(to,From);if(to.path=="/Home"){this.path="";this.name="";}else......
  • 谈一谈 vuex 的运行机制
    Vuex提供数据(state)来驱动视图(vuecomponents),通过dispath派发actions,在其中可以做一些异步的操作,然后通过commit来提交mutations,最后mutations来更改state。 ......
  • 我们如何在 vue 应用我们的权限
    权限可以分为用户权限和按钮权限;用户权限,让不同的用户拥有不同的路由映射,具体实现方法:1.初始化路由实例的时候,只把静态路由规则注入,不要注入动态路由规则;2.......
  • Vue生命周期及组件
    目录Vue生命周期钩子钩子函数的由来生命周期钩子函数生命周期图示Vue生命周期钩子钩子函数的由来每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要......