Javascript Vue.js在更改键后不响应鼠标事件

我刚刚在Vue中发现了奇怪的行为。更改组件的键后，我的自定义鼠标事件绑定不再工作。我知道我们不应该将jQuery与Vue混用，但这只是一个测试。我不明白为什么会这样。对此有何解释？它是否与虚拟DOM有关？我更多的是想解释为什么会发生这种情况，而不是寻找解决方案

我注意到，当我检查DOM时，一切看起来都是正确的。但是鼠标事件不起作用

下面是它的工作原理。

1. When you click on the two green buttons it should print out the data-key attribute for that button.
2. Then click on the "Change keys" button and the keys for components will change
3. Now click again on the green buttons but they will no longer print their data-key attributes to the screen.

换钥匙
Vue.组件（“我的按钮”{
数据（）{
返回{
计数：0
}
},
模板：`
你点击我{{count}}次。
`
})
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
关键1:1，
关键2:2，
},
安装的（）
{
$（'.btn'）.mousedown（函数（事件）{
$（“#控制台”）。追加(
'数据键：'+
event.target.getAttribute（'data-key'）+
“
”
)
})
}          
})

这是一把小提琴：

---

更改关键帧时，您正在渲染元素。您的事件将绑定在初始按钮上。新的没有附加事件

如果要绑定应用程序中的所有当前和未来按钮，必须绑定到一个不会消失的元素，语法略有不同：

$('#app').on('mousedown', '.btn', function(event) {
  $('#console').append(
    'data-key: ' +
    event.target.getAttribute('data-key') +
    '<br>'
  )
})

$（'#app'）.on（'mousedown'，'.btn'，函数（事件）{
$（“#控制台”）。追加(
'数据键：'+
event.target.getAttribute（'data-key'）+
“
”
)
})

看到了

工作原理：使用直接绑定语法（您的案例），选择器在绑定时进行评估。对于第二个（委托事件），它在事件发生时根据事件的目标进行评估

---

请阅读jquery页面“委派事件”部分下的完整说明。

谢谢！您能解释一下这种新语法与我以前使用的语法有什么不同吗？其要点是，您需要在绑定和事件发生时找到DOM中的元素。出于性能原因，您希望找到尽可能最小的父级来执行此操作（不要选择

，否则很快就会在事件中绘制）。新语法并不新鲜。大多数与事件相关的jQuery方法都是

.on（）

的缩写，它们都在文档页面的最顶端列出了完整的语法。第二个和第三个参数可以省略，而最后一个是处理程序。还要注意，第一个参数虽然称为

events

，但始终是一个字符串：因此您将使用

mousedown mouseup

绑定到这两个参数，而不是字符串数组。感谢您的解释，现在它更有意义了。

$('#app').on('mousedown', '.btn', function(event) {
  $('#console').append(
    'data-key: ' +
    event.target.getAttribute('data-key') +
    '<br>'
  )
})