问题描述
我试图创建一个自定义指令，以在单击元素时执行功能。我无法正常工作，我查看了自定义指令的文档，甚至直接从那里复制示例也没用。
我正在使用单个文件模板和本地指令。这是模板：
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<button v-test:click="clicked">Click me</button>
</div>
</div>
</div>
</template>
这是脚本：
<script>
export default {
name: 'App',components: {
},directives: {
test: {
bind(el,binding) {
const type = binding.arg;
const fn = binding.value;
el.addEventListener(type,fn)
}
}
},methods: {
clicked() {
alert('text');
}
}
}
</script>
我尝试使用Vue 3语法（beforeMount而不是bind）以及全局指令，但是这些东西似乎也不起作用。有人知道我在做什么错吗？
如果我在传递给v-test的值中加上括号，则会在页面加载后立即显示警告框。无论哪种方式，单击按钮都不会发生任何事情。
解决方法
Vue3更改了指令的语法。 New Syntax
bind → beforeMount
inserted → mounted
beforeUpdate (new)
update (has been removed)
componentUpdated → updated
beforeUnmount (new)
unbind -> unmounted