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>
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript