Vuejs听众

Question

我正在创建简单的应用程序,这将很少有听众.我无法弄清楚它背后的逻辑应该是什么样子.

HTML:

<div id="playerProgressBar">
    <div id="playerHead"></div>
</div>

在Vue对象中我定义了变量:

music: document.getElementById('playerHead');

我的听众应该是这样的:

music.addEventListener("timeupdate", timeUpdate, false);

music.addEventListener("canplaythrough", function () {
    //code
}, false);

function timeUpdate() {
    //code
}

那么在vuejs中使用监听器的正确方法是什么？我应该在这里使用自定义指令吗？由于我没有事件我不能使用方法.将整个逻辑放在ready功能中似乎并不正确.提前致谢!

Answer 1

v-on(简写:@)

在普通元素上使用时,它仅侦听本机DOM事件.在自定义元素组件上使用时,它还会侦听在该子组件上发出的自定义事件.

所以,你可以附加一个这样的事件监听器:

<video @timeupdate="onTimeUpdateListener" src="..."></video>

以下是我使用MediaElement库的示例:https: //jsfiddle.net/248nqk02/

Answer 2

这将是将HTML元素分配给应用程序的Vue-esque方式:

<video v-el:video-element controls>
    <source src="mov_bbb.mp4" type="video/mp4">
</video>

这解决this.$els.videoElement了应用程序中的变量.更多信息在这里.

现在,要为它们添加侦听器和函数,我会做类似的事情:

...
ready: function() {
    this.addListeners();
},
methods: {
    addListeners: function() {
        console.log('adding listeners');
        this.$els.videoElement.addEventListener('timeupdate',this.videoTimeUpdated,false);
    },
    videoTimeUpdated: function() {
        console.log('video time updated');
    }
}
...

显然,您可以将所有视频(或任何其他与事件相关的)内容放在一个单独的组件中(而不是指令,在Vue中),以使代码更加整洁.