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!
Listening to Events We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v-on:click="handler" or with the shortcut, @click="handler" .
Vue. js has an incrementally flexible design that emphasizes component composition and declarative rendering. We provide custom web application development services using Vuejs for developing responsive, user-driven frontends that provides an unparalleled user experience.
$listeners and v-bind="$attrs" $listeners is used for passing the event to be invoked in a child component. As similar to $listeners, Setting v-bind="$attrs" in a parent component with props can be also used for passing data.
Vue $emit is a function that lets us emit, or send, custom events from a child component to its parent. In a standard Vue flow, it is the best way to trigger certain events.
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/
This would be the Vue-esque way to assign HTML elements to the app:
<video v-el:video-element controls>
<source src="mov_bbb.mp4" type="video/mp4">
</video>
This resolved to a variable this.$els.videoElement
in the app. More info here.
Now, to add listeners and functions for them, I'd do something like that:
...
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');
}
}
...
Obviously, you could put everything video (or any other event related) stuff in a separate component (not directive, in Vue) to keep the code a bit more neat.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With