Vuejs listeners

Question

I am creating a simple application in which there will be few listeners. I can’t understand what logic should look like.

HTML:

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

In the Vue object, I defined a 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 the right way to use listeners in vuejs? Should I use custom directives here? Since I have no event, I cannot use methods. Putting all the logic in a function readyseems wrong. Thanks in advance!

Answer 1

v-on (transcript: @)

DOM. , .

, :

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

, MediaElement: https://jsfiddle.net/248nqk02/

Answer 2

Vue-esque HTML- :

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

, ( ) component ( , Vue) .