vueschool.io @vueschoo_io
Teacher @ Vue School
Vue.js Community Partner
Vue.js Oslo meetups organizer
Full Stack developer & Consultant
Foodie 🌶
Oslo, Norway
Teacher @ Vue School
Author of The Majesty of Vue.js 1 & 2
Vue.js Contributor
Enterprise Consultant
Amsterdam
Our goal
300+ Lessons from 20 video courses
70 000 users have joined us already!
Alex Kyriakidis
Rolf Haug
Debbie O'Brien
Chris Fritz
Maria Lamardo
Roman Kuba
Sébastien Chopin
Alexandre Chopin
Alexander Lichter
Lydia Hallie
window.addEventListener()
<button @click="doSomething">My Button</button>
<template>
...
</template>
<script>
export default {
props: {
//...
},
data () {
return { ... }
}
methods: {
// ...
}
}
</script>
Does not render it's own HTML
Only manages state and behavior
export default {
render () {
},
data () {
return {
// ...
}
},
methods: {
//...
}
}
<event-listener event="scroll" @fired="doSomething" />
export default {
render () {},
props: {
event: {
type: String,
required: true
}
},
methods: {
handle (e) {
this.$emit('fired', e)
}
},
mounted () {
window.addEventListener(this.event, this.handle)
},
destroyed () {
window.removeEventListener(this.event, this.handle)
}
}
<event-listener event="scroll" @fired="changeBackgroundColor" />
<event-listener event="offline" @fired="showOfflineMessage" />
<event-listener event="online" @fired="hideOfflineMessage" />
<event-listener event="keyup" @fired="toggleVideo"/>
// ...
methods: {
toggleVideo (event) {
if (event.code === 'Space') {
const video = this.$refs.video
video.paused ? video.play() : video.pause()
}
}
}
<video ref="video" src="/puppiness.mp4" />
<event-listener event="keyup" @fired="toggleVideo"/>
<event-listener @keydown.space="toggleVideo"/>
export default {
render () {},
props: {
event: {
type: String,
required: true
}
},
methods: {
handle (e) {
this.$emit('fired', e)
}
},
mounted () {
window.addEventListener(this.event, this.handle)
},
destroyed () {
window.removeEventListener(this.event, this.handle)
}
}
export default {
render () {},
props: {
event: {
type: String,
required: true
}
},
methods: {
handle (e) {
this.$emit('fired', e)
}
},
mounted () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.addEventListener(event, handler)
})
},
destroyed () {
window.removeEventListener(this.event, this.handle)
}
}
export default {
render () {},
props: {
event: {
type: String,
required: true
}
},
methods: {
handle (e) {
this.$emit('fired', e)
}
},
mounted () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.addEventListener(event, handler)
})
},
destroyed () {
window.removeEventListener(this.event, this.handle)
}
}
export default {
render () {},
mounted () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.addEventListener(event, handler)
})
},
destroyed () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.removeEventListener(event, handler)
})
}
}
export default {
render () {},
mounted () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.addEventListener(event, handler)
})
},
destroyed () {
Object.keys(this.$listeners)
.forEach(event => {
const handler = this.$listeners[event]
window.removeEventListener(event, handler)
})
}
}
<event-listener @keydown.space="toggleVideo"/>
Vue takes care of the .space key modifier for us automatically
// ...
methods: {
toggleVideo (event) {
if (event.code === 'Space') {
const video = this.$refs.video
video.paused ? video.play() : video.pause()
}
}
}
<event-listener event="offline" @fired="showOfflineMessage" />
<event-listener event="online" @fired="hideOfflineMessage" />
<event-listener @offline="showOfflineMessage" @online="hideOfflineMessage" />
<event-listener
@keydown.meta.70="showSearch = true"
@keydown.ctrl.70="showSearch = true"
@keydown.esc="showSearch = false"
/>
<div v-if="showSearch">
<!-- awesome search form goes here -->
</div>
github.com/shentao/vue-global-events
Damian Dulisz
Eduardo San Martin Morote
@DamianDulisz
@posva
vueschool.io @vueschoo_io
@rahaug
Vue.js 3 courses
coming soon