Vue.js：如何在同一个元素上触发一个具有多个事件的函数？

Question

我正在学习 Vue，我想将 multipe 事件绑定到 single 函数在同一元素中，如下所示（在纯 JavaScript 中，随意运行代码 sn-p):

let mainElement = document.querySelector("h1");

// I made an 'events' array to loop
["click", "mouseenter", "And we can keep adding events..."]
.forEach( event => {
    mainElement.addEventListener(event, myFunction);
  }
);

function myFunction() {
  // DO SOMETHING, for example:
  mainElement.style.color = "red";
}

const resetButton = document
.querySelector("button")
.addEventListener("click", () => {
  mainElement.style.color = "black";
});

<h1 style="color: black">This is the element we want to control</h1>

<button>Reset</button>

在 Vue.js 中，我可以将 ONE SINGLE EVENT 直接绑定到这样的元素：

<h1 @mouseenter="myFunction">This is the element we want to control</h1>

我想知道是否有办法将 MULTIPLE EVENTS 绑定到同一元素内的单个函数，有人知道是否有这样的语法吗？

<h1 @[mouseenter,click,mouseleave...]="myFunction">This is the element we want to control</h1>

Answer 1

如果我仍然正确，你可以这样做。

<h1 v-on="handlers">This is the element we want to control</h1>

// ...

data() {
  const vm = this;

  return {
    handlers: {
      mousedown: vm.myFunction,
      touchstart: vm.myFunction
    }
  }
},

function myFunction() {
  // DO SOMETHING, for example:
  mainElement.style.color = "red";
}

很久没做vue了，但如果我是正确的，这应该可以工作。