Vuejs听众 [英] Vuejs listeners

问题描述

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

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 函数中似乎不是正确的方法。提前致谢！

解决方案

v-on（简写：@）

< blockquote>

在普通元素上使用时，它仅侦听原生DOM事件。在自定义元素组件上使用时，它还会侦听在该子组件上发出的自定义事件。

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

 < video @ timeupdate =onTimeUpdateListenersrc =... >< /视频> 
  

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

I'm creating simple app, which will have few listeners. I can't figure out how logic behind that should look like.

HTML:

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

In Vue object i have defined variable:

music: document.getElementById('playerHead');

My listener should look like this:

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

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

function timeUpdate() {
    //code
}

So what would be correct way to use listeners in vuejs? Should i use custom directives here? Since I have no event I can't use methods. Putting whole logic in ready function doesn't seem to be correct way. Thanks in advance!

解决方案

v-on (shorthand: @)

When used on a normal element, it listens to native DOM events only. When used on a custom element component, it also listens to custom events emitted on that child component.

So, you could attach an event listener like this:

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

Here is an example where I'm using the MediaElement library: https://jsfiddle.net/248nqk02/

这篇关于Vuejs听众的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！