在 VueJS 中处理 DOM 元素单击事件

Question

我有一种特殊情况，我不能在我的代码中使用 VueJS HTML 语法，但我想使用 VueJS 函数来处理 DOM 事件，例如单击按钮：

HTML：

<h1 id="header">Not Clicked</h1>
<!-- I can only use simple HTML here so no "@click", "v-bind:on-click" etc. -->
<button id="mybtn" type="button">click me</button>

鉴于上面的按钮，这就是我将如何使用 jquery 来处理点击事件而不接触 HTML：

$('#mybtn').click(function(){
  document.getElementById('header').textContent = "Clicked";
})

如何在 VueJS 中编写相同的 javascript 函数而不用 VueJS 语法更改 HTML 按钮？

现场演示：https://playcode.io/744155

Answer 1

我相信您正在寻找的是这样的东西。它肯定有一些代码味道，但听起来你有一个独特的用例：

mounted() {
  this.$refs['header'].addEventListener('click', (e) => {
    // Do stuff
  }
},
beforeDestroy() {
  this.$refs['header'].removeEventListener('click'), (e) => {
    // Do stuff
  }
}

本质上是获取元素并为其添加一个事件侦听器，然后做一些事情。组件销毁时别忘了removeEventListener。

如果在上面的代码中元素仍然是undefined，那么你需要像这样将它包装在nextTick 中，这将确保元素不仅被创建，而且被插入到 DOM 中：

mounted() {
  this.$nextTick(function() {
    this.$refs['header'].addEventListener('click', (e) => {
      // Do stuff
    }
  });
},