vue2和vue3自定义指令

最新推荐文章于 2024-09-30 14:28:41 发布

北八大前端工程师

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量269

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wangjunyi6/article/details/136554104

版权

本文介绍了如何在Vue中创建和使用自定义指令，包括全局和局部注册，以及如何通过指令传递参数并实现功能扩展，如设置元素聚焦和颜色。代码示例展示了如何实现在页面加载时自动聚焦输入框和动态改变颜色的功能。

摘要由CSDN通过智能技术生成

自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

自定义指令语法

全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

局部注册

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

使用指令

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。如：

注册指令时不用加v-前缀，但使用时一定要加v-前缀

代码示例

需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

App.vue

<div>
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
  </div>

自定义指令-指令的值

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

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

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

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

3.代码示例

App.vue

<template>
  <div>
     <!--显示红色--> 
    <h2 v-color="color1">指令的值1测试</h2>
     <!--显示蓝色--> 
    <h2 v-color="color2">指令的值2测试</h2>
     <button>
        改变第一个h1的颜色
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1: 'red',
      color2: 'blue'
    }
  }
}
</script>

<style>

</style>