bounty还有4天到期。此问题的答案有资格获得+50声望奖励。Sander_P希望引起更多关注这个问题。
我正在使用Electron Forge和Webpack + Typescript template project进行ElectronJs项目
我还安装了Vue和用于webpack的vue-loader，这样我就可以使用单文件组件（SFC）文件：
{
test: /\.vue$/,
loader: 'vue-loader'
},这一切都很正常，但现在发生了一些奇怪的事情：当我在编辑器中添加@click或v-on：click并执行'electron-forge start'时，输出中缺少此事件。
这就是代码：
<button v-for="item in logFilesList?.content"
class="abc" onmouseleave="alert('hi')" v-on:click="validateAndSubmit('item')"
>{{ item }}</button>这是我在App中看到的：
我已经添加了'abc'，所以我确信这是正确的代码。我还添加了onmouseleave和这个作品。
但是为什么缺少v-on：click事件呢？
（我在VS Code中使用Volar）
这似乎是webpack的输出，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
2条答案
按热度按时间yr9zkbsy1#
你似乎期望
...以输出以下HTML标记：
这是不必要的，因为Vue handles events***1***直接，不需要额外的标记。
所有放置在Vue模板中的事件在运行时直接转换为实际的事件侦听器，在渲染后立即绑定到元素。类似于：
...（其中
element是实际的<button>元素），除了在标记中没有实际的脚本标记，因为Vue有一个活动的JavaScript层，它可以在需要时做它需要做的一切。注：
要检查元素上绑定的事件，在Google Chrome***2***中右键单击元素，选择“检查”，进入“元素”选项卡，然后进入控制台的“事件监听器”子选项卡：
1-对于本机事件和特定于组件的事件（也称为 * 自定义 *）事件（方法处理程序，发射器，监视器）
2-所有浏览器都有类似的实用程序，界面可能略有不同。
kpbwa7wx2#
这是正常的、正确的行为。
v-on:click和类似的指令是特定于Vue框架的。它们不是DOM结构，也不会被呈现。模板代码被提取并预编译到JavaScript渲染函数中。这使得指令在浏览器中仍然有效，而不会出现在DOM中。用最简单的话来说，当它进入浏览器时，它都是JavaScript。