vueschool.io @vueschoo_io
Teacher + co-founder @ Vue School
Meetup organizer in Oslo
Full Stack developer & Consultant
Foodie 🌶
Oslo, Norway
Teacher @ Vue School
Author of The Majesty of Vue.js 1 & 2
Vue.js Contributor
Consultant @ Building Link
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
Alexander Lichter
Lydia Hallie
Filip Rakowski
@rahaug
window.addEventListener()
<button @click="doSomething">My Button</button>
@rahaug
<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: {
//...
}
}
@rahaug
<event-listener event="scroll" @fired="doSomething" />
@rahaug
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" />
@rahaug
<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" />
@rahaug
<event-listener event="keyup" @fired="toggleVideo"/>
<event-listener @keydown.space="toggleVideo"/>
@rahaug
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)
}
}
@rahaug
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)
}
}
@rahaug
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)
}
}
@rahaug
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)
})
}
}
@rahaug
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)
})
}
}
@rahaug
<event-listener @keydown.space="toggleVideo"/>
Vue takes care of the .space key modifier for us automatically
@rahaug
@rahaug
<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>
@rahaug
@rahaug
vueschool.io @vueschoo_io
@rahaug
Vue.js 3 courses
coming soon
vueschool.io