Vuejs听众

Question

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

HTML：

music: document.getElementById('playerHead');

在Vue对象中，我定义了变量：

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

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

function timeUpdate() {
    //code
}

我的听众应该是这样的：

ready

那么在vuejs中使用监听器的正确方法是什么？我应该在这里使用自定义指令吗？由于我没有活动，我无法使用方法。将整个逻辑放在{{1}}函数中似乎不是正确的方法。提前谢谢！

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。更多信息here。

现在，要为他们添加听众和功能，我会做类似的事情：

...
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');
    }
}
...

显然，您可以将所有视频（或任何其他与事件相关的）内容放在单独的component（非指令，在Vue中）中，以使代码更加整洁。