sfc html 元素上的 vue 事件消失了

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 Sander_P想提请更多人关注这个问题。

我正在使用 Electron Forge 和Webpack + Typescript 模板项目开发 ElectronJs 项目

我还为 webpack 安装了 Vue 和 vue-loader，因此我可以使用单文件组件 (SFC) 文件：

  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },

一切正常，但现在发生了一些奇怪的事情：当我在编辑器中添加@click 或 v-on:click 并执行“electron-forge start”时，output 中缺少此事件。

这是代码：

    <button v-for="item in logFilesList?.content"
    class="abc" onmouseleave="alert('hi')" v-on:click="validateAndSubmit('item')"
    >{{ item }}</button>

这就是我在应用程序中看到的：

我添加了“abc”，所以我确定这是正确的代码。 我还添加了 onmouseleave 并且这有效。

但是为什么 v-on:click 事件丢失了？

（我在 VS Code 中使用 Volar）

这似乎是 webpack output，onClick 在那里：

((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n        class: \"abc\",\n        onmouseleave: \"alert('hi')\",\n        
onClick: _cache[0] || (_cache[0] = $event => 
($options.validateAndSubmit(item)))\n      }, 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item), 1 /* TEXT 
*/))\n

Answer 1

这是正常的、正确的行为。

v-on:click和类似的指令特定于 Vue 框架。 它们不是 DOM 结构，也不会被渲染。 模板代码被提取并预编译为 JavaScript 渲染函数。 这就是允许指令在浏览器中仍然是 function 而没有出现在 DOM 中的原因。 用最简单的话来说，当它到达您的浏览器时，它就是 JavaScript。