vue3中的自定义指令例子
时间: 2023-10-27 22:06:55 浏览: 74
在Vue3中,自定义指令的注册方式与Vue2相比有所变化。下面是一个Vue3中的自定义指令例子:
```
<template>
<div v-highlight="'red'">Hello, World!</div>
</template>
<script>
import { directive } from 'vue';
const highlightDirective = directive('highlight', {
beforeMount(el, binding) {
el.style.backgroundColor = binding.value;
},
updated(el, binding) {
el.style.backgroundColor = binding.value;
}
});
export default {
directives: {
highlight: highlightDirective
}
}
</script>
```
在这个例子中,我们定义了一个名为highlight的局部自定义指令,并将其绑定到一个div元素上。当该元素被渲染时,它的背景色将被设置为指令的参数值。在指令的updated钩子函数中,我们还可以监听参数值的变化,并在变化时更新元素的背景色。
相关问题
vue2中自定义指令
在Vue2中,自定义指令可以通过Vue.directive()方法来创建。
指令主要分为两类:全局指令和局部指令。全局指令可以在所有组件中使用,而局部指令只能在指定组件中使用。
下面是一个简单的例子,创建一个全局指令v-focus,使得输入框获得焦点:
```javascript
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
```
这里定义了一个名为“focus”的指令,当指令被插入到DOM树中时,就会执行inserted钩子函数,这里将输入框元素的焦点设为true,实现了自动聚焦的效果。
使用时在模板中加上v-focus属性即可:
```html
<input v-focus>
```
除了inserted钩子函数外,还有其他的钩子函数可以使用,具体可以参考Vue官方文档。
vue3全局自定义指令
在Vue3中,我们可以使用`app.directive`方法来注册全局自定义指令。下面是一个简单的示例:
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.directive('mydirective', {
mounted(el, binding) {
// 指令绑定到元素上时调用
el.style.color = binding.value;
},
updated(el, binding) {
// 元素更新时调用
el.style.color = binding.value;
},
unmounted(el) {
// 指令与元素解绑时调用
// 清除一些工作
}
});
app.mount('#app');
```
在上面的例子中,我们注册了一个名为`mydirective`的全局指令。指令对象包含了三个生命周期钩子函数:`mounted`、`updated`和`unmounted`。其中`mounted`函数在指令绑定到元素时调用,`updated`函数在元素更新时调用,`unmounted`函数在指令与元素解绑时调用。