Vue(10)——自定义指令

自定义指令

自定义指令:可以封装一些dom操作,扩展额外功能。

全局注册-语法:

Vue.directive('指令名',{

"inserted"(el){ inserted指指令所绑定的元素被添加到页面时自动调用

//可以对el标签扩展额外功能

el.focus()

}

})

局部注册-语法:

directives:{

"指令名":{

inserted(){

el.focus()

}

}

}

使用时v-指令名 。


全局注册示例:

局部注册示例:

自定义指令的值

语法:在绑定指令时,可以通过"等号"的形式为指令绑定的具体数值。

<div v-color="color">我是内容</div>

通过binding.value可以拿到指令值指令值修改会触发update函数

directives:{

color:{

inserted(el,binding){

el.style.color = binding.value

},

update(el,binding){

el.style.color = binding.value

}

}

}

复制代码
<template>
  <div>
    <h1 v-color="color1">自定义指令</h1>
    <h1 v-color="color2">自定义指令</h1>
  </div>
</template>

<script>
export default{
  directives:{
    color:{
      inserted(el,binding){
        el.style.color = binding.value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  },
  data(){
    return{
      color1:'red',
      color2:'blue'
    }
  }
}
</script>
相关推荐
举个栗子dhy6 分钟前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript
学习OK呀8 分钟前
后端上手学习React Router基础知识
前端
宁静_致远9 分钟前
React Native 技术栈:基于 macOS 开发平台的 iOS 应用开发指南
前端·javascript·react native
H5开发新纪元10 分钟前
VS Code 插件开发实战:代码截图工具
javascript·visual studio code
Mike_jia12 分钟前
Cronicle终极指南:轻量级分布式任务管理系统的企业实践
前端
qq_5432485218 分钟前
web基础+HTTP+HTML+apache
前端
userkang24 分钟前
消失的前后端,崛起的智能体
前端·人工智能·后端·ai·硬件工程
前端付豪24 分钟前
🚀 2025 年 React 全攻略:40 个高频问题深度解析与实战指南
前端·react.js
五号厂房25 分钟前
论Ant Design ProTable 中如何优雅设置搜索框默认值
前端
不浪brown33 分钟前
WebGISer的福利!基于Cesium+Vue3的智慧数字农田项目,开源!
前端·cesium