Vue.js中的JavaScript方法和子元素

Vue.js是我的第一个反应式库，我在方法和子元素方面遇到了问题。我想我遗漏了一些明显的东西

在我的示例中，呈现的listitems具有悬停（mouseenter&mouseleave）事件的方法处理程序。每个列表项都是

元素的父元素，默认情况下已暂停。当鼠标进入列表项时，其子项将播放（elem.play（））。当鼠标离开listitem时，视频暂停

完整示例：

---

但是，

这个

的范围当然是由我的$el变量定义的，而不是像我习惯的那样由附加事件的元素定义的。play（）方法是否会以某种方式作为组件的属性传递？

Vue允许您访问事件对象

当您仅提供方法名称时，它会隐式传递：

<div @click="clickHandler">

您可以使用事件的目标来访问触发事件的元素。从那里，您可以按照描述访问其子级。以下是使用mouseenter和mouseleave的示例：

newvue({
el:“.contentList”，
方法：{
视频播放：功能（事件）{
document.getElementById（“consolelog”）.innerText=“播放”；
event.currentTarget.getElementsByTagName（“视频”）[0].play（）；
},
视频暂停：功能（事件）{
document.getElementById（“consolelog”）.innerText=“暂停”；
event.currentTarget.getElementsByTagName（“视频”）[0]。暂停（）；
}        
}  
});
li{
列表样式：无；
填充：1em；
边缘：2米；
背景色：#f1f1；
}
李：悬停{
背景色：#ccc；
}





谢谢你的明确回答。现在我知道了如何访问事件。
$("li").mouseenter(function() {
    this.getElementsByTagName("video")[0].play();
});

<div @click="clickHandler">

<div @click="clickHandler($event)">