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>
相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky5 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld5 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记6 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷7 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求