Vue-自定义全局指令

最新推荐文章于 2024-07-03 12:06:55 发布
最新推荐文章于 2024-07-03 12:06:55 发布
阅读量933 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrLsss/article/details/104336727
版权
本文详细介绍了Vue自定义指令的生命周期钩子函数，包括bind、inserted、update、componentUpdated和unbind，以及它们的参数和用法。通过示例展示了如何使用自定义指令实现动态参数和函数简写，提供了对象字面量在自定义指令中的应用，帮助开发者更好地理解和运用Vue的自定义指令功能。
摘要由CSDN通过智能技术生成

Vue自定义指令

Vue指令的声明周期函数：

Vue.directive('gqs',{
   
    bind() {
   
      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
      console.log('bind triggerd')
    },
    inserted() {
   
      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
      console.log('inserted triggerd')
    },
    updated() {
   
      // 所在组件的`VNode`更新时调用.
      console.log('updated triggerd')
    },
    componentUpdated() {
   
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
   
      // 只调用一次，指令与元素解绑时调用.
      console.log('unbind triggerd')
    }
  })

-unbind() 一个把元素从DOM删除触发unbind().—> 仅仅是删除.
-componentUpdated() 一个显示设置元素的隐藏和显示的时候触发 componentUpdated() —> block | none 都触发.位置发生了改变,也会触发(改变是与Vue操作相关)

显示/隐藏 (v-if & v-show)
样式改变 (:class={active:isActive})
内容改变 (v-model=“text”)

最低0.47元/天 解锁文章
MrLss
关注
专栏目录
vue-拖拽-跨容器+排序拖拽----自定义指令
liuhao9999的博客
10-26 658
全局自定义指令：在main.js中填写。
【Vue】基础系列（十一）Vue指令-常用内置指令-自定义指令-全局指令-局部指令
YK菌的博客
01-25 1841
学习Vue常用内置指令与自定义指令
vue全局自定义指令
Wangdr的博客
08-17 3677
通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。新建src/directives/LimitNumber.js文件。批量注册指令，新建 directives/index.js 文件。二、全局批量注册自定义指令。在main.js全局引入。.........
vue3自定义指令（图文教程）
最新发布
xuelang532777032的博客
07-03 1588
问题是你能保证一直都是ul和li结构的组件吗，就像说，table列表也要偶数行改北京你是不是还要去改一次table在封装一次？v-cyc 加上后，自动就去加背景了，不会有哪个公司那么闲，每个个性化的业务都来封装一个组件吧，那得是多大的公司，时间不要钱的吗，肯定是效率第一呀。问题来了，我要每偶数行背景改变，你要么class加个on去判断颜色，要么style去%2，没错吧。好，来看明白每，在src下新建个directives文件夹，在新建个index.ts、和cyc.ts。来，先看目录结构，从网上扒下来。
Vue自定义全局指令
kiligcoding的博客
05-13 944
其中 directiveName 是指令的名称，第二个参数是一个对象，其中包含了指令的配置选项，常用的钩子函数有 bind、inserted、update、componentUpdated 和 unbind，这些函数会在指令与元素绑定、插入到 DOM 中、数据更新、组件重新渲染和解绑等不同阶段触发。当我们使用 Vue 构建应用时，经常需要在模板中添加一些自定义的指令，来实现期望的功能，这些指令可以全局定义，也可以定义在组件内。
在Vue项目中自定义全局指令
LIMI_伞梦的博客
03-28 802
1、编写监控屏幕大小改变的指令 // 监听屏幕宽度改变 export const resize = { // 初始化绑定指令 inserted (el, binding) { // 指令的绑定值，是一个function函数 const callback = binding.value; // 获取屏幕宽高 const param = { e: null, width: window.innerWidth, height: window.innerHeight };
vue自定义指令用法
qq_26642611的博客
12-23 1585
1、vue中的指令有： v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once 2.自定义指令语法： // 注册一个全局自定义指令,例如 `v-focus` Vue.directive('指令名字', 钩子) //注意：自定义指令名字不...
Vue-自定义全局指令和局部指令的方法详解
weixin_44486539的博客
07-20 3539
自定义全局指令 语法： Vue.directive ('Directive_Name',{Hook_Function:callback(el,binding)}) 第一个参为指令名称，自定义指令时不需要加 v- 前缀，调用时必须要加 v- 第二个参数为配置项，是一个对象，里面主要包含一些和自定义指令执行相关的函数，通过对象中的函数可以在特定的阶段执行相关的操作。 Directive_Name...
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
10-18
在Vue.js框架中，自定义全局指令是一种增强DOM操作能力的手段。Vue2提供了Vue.directive方法来定义全局指令，允许开发者编写可复用的指令，以在各种元素或组件上应用定制的行为。本文将详细介绍Vue2中的自定义全局...
Vue--》自定义指令的使用讲解
ztK63LrD的博客
12-07 2637
目录自定义指令自定义指令的分类私有自定义指令：全局自定义指令：总结vue官方提供了v-text、v-for、v-model、v-if等常用的指令，还允许开发者自定义指令。在每个vue组件中，可以在directives节点下声明私有自定义指令。代码如下：注意：directives节点下定义的指令名称必须是要渲染标签样式的 v-指令的v-后面的名称。bind函数：指令与元素成功绑定时执行bind函数。 当然我们也可以为自定义指令赋予静态值和动态值。如下： inserted函数：指令所在元素被插入页面时调
vue自定义全局指令
baronZhuZhu的博客
11-15 429
vue中除了使用固定的一些指令外，也可以自定义一些全局指令，使用Vue.directive()命令。 自定义全局指令实例： 使用实例：
Vue 自定义指令 v-LazyLoad
林中明月间丶
12-18 979
https://zhuanlan.zhihu.com/p/337659611 在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令，新建di.
vue中的自定义全局指令
aliven1的博客
05-24 7138
Vue.directive('qfocus',{ inserted(el){ el.focus() }});这个时候在任何组件位置，类似<input type='text'  v-qfocus />刷新页面，自动获取焦点
Vue 简单的全局指令
weixin_53037175的博客
10-05 567
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <input type="text" v-focus> <button v-color>按钮</button&
vue的全局指令
anshaobiao6449的博客
01-31 570
vue有四个全局指令：directive、extent、set、component directive:自定义指令 //写一个改变颜色的指令 Vue.directive('amie',function(el,binding,vnode){ el.style='color:'+binding.value; }); //HTML <div v-am...
2021.11.28 vue的全局自定义指令（10）
毛毛的博客
11-28 547
vue的全局自定义指令 除了核心功能默认内置的指令(v-model , v-show等等)，Vue 也允许注册自定义指令。 Vue.directive( “eventName”, options) 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，。在这里可以进行一次性的初始化设置。指令第一次绑定到元素时调用 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) update：所在组件的 VNode ( 抽象DOM )更新时调用，但是可能
vue164-自定义指令-全局自定义指令
geyaoisnice的博客
07-27 87
vue
vue中自定义全局指令
07-17
在 Vue 中，我们可以通过自定义全局指令来扩展 Vue 的功能。全局指令可以在整个应用程序中使用，无需在每个组件中单独引入或注册。 要自定义全局指令，可以在 Vue 实例创建之前使用 `Vue.directive` 方法进行注册。下面是一个简单的示例： ```javascript // main.js import Vue from 'vue' // 定义全局指令 Vue.directive('highlight', { bind: function (el, binding, vnode) { el.style.backgroundColor = binding.value } }) new Vue({ // ... }).$mount('#app') ``` 在上面的示例中，我们定义了一个名为 `highlight` 的全局指令。在 `bind` 钩子函数中，我们可以通过 `el` 参数获取到绑定指令的元素，通过 `binding` 参数获取到指令的值。在这个例子中，我们将绑定指令的元素的背景色设置为指令的值（可以通过 `v-highlight="'color'"` 来传递值）。 现在，我们可以在任何组件的模板中使用这个全局指令： ```html <template> <div> <h1 v-highlight="'yellow'">Hello World</h1> <p v-highlight="'lightblue'">This is a custom directive example.</p> </div> </template> ``` 在上面的示例中，我们使用了 `v-highlight` 这个自定义指令，并将不同的背景色作为参数传递给指令。 通过自定义全局指令，我们可以方便地扩展 Vue 的功能，并在整个应用程序中重复使用这些指令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值