Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo
2. About me
Bernd Alter
Technical Director at Turbine Kreuzberg
Tech lead, father, boardgame enthusiast, DJ
bernd.alter@turbinekreuzberg.com
@bazoo0815
7. Bindings
Events: v-on (shorthand @)
<button v-on:click="onClick">click me</button>
<button @click="onClick">click me</button>
<script>
methods: {
onClick () { // do something on clicking the button }
}
</script>
8. Bindings
Events: v-on - Modifiers
Key modi ers
use key codes
or more convenient: built-in modi ers
.enter, .tab, .esc, .space, .up, .down, .left, .right, .delete (both 'delete' and
'backspace')
<input v-on:keyup.13="onKeyEnter"></input>
# same as previous
<input @keyup.enter="onKeyEnter"></input>
9. Bindings
Events: v-on - Modifiers
Event modi ers
.prevent, .stop, .capture, .self, .once
System modi ers
v2.1.0+: .ctrl, .alt, .shift, .meta
v2.5.0+: .exact (single key only)
Mouse button modi ers
.left, .right, .middle
<a v-on:click.prevent="onClick"></a>
11. Lists/loops: v-for
possible for both HTML elements and Vue components
use key attribute for better binding
index or key can be used
<ul>
<li v-for="(user,index) in users" key="user.id">{{ index }} {{ user.name }}</li>
</ul>
<script>
data: {
users: [
{ id: 1, name: 'Bernd' },
{ id: 2, name: 'Stefan' }
]
}
</script>
12. Slots
like containers inside components
can have default content
name multiple slots
<template>
<div>
<h1>List</h1>
<slot>
Some default content
</slot>
</div>
</template>
<my-component>
<p>Lorem <strong>ipsum</strong> dolor sit amet</p>
</my-component>
<div>
<h1>List</h1>
<p>Lorem <strong>ipsum</strong> dolor sit amet</p>
</div>
14. Components
Wrapped in single les with ending .vue
### MyBoxComponent.vue
<template>
<div>
<h1><slot name="title">Default title</slot></h1>
<p><slot>Default content</slot></p>
</div>
</template>
<script>
export default {
data () {
return {
// component data
}
}
}
</script>
<style>
/* some css here */
</style>
15. Components
<script>
export default {
props: {
// data to pass into component on init
}
data () {
return {
// component data
}
},
methods: {
// component methods go here
},
computed: {
// computed properties with reactive binding
},
watch: {
// watcher functions (rather use computed properties)
}
}
</script>
16. Components
props
component properties
de ned with type (mandatory) & default value (optional)
props: {
label: {
type: String,
default: 'click me',
required: true
},
importantProp: {
type: Number,
required: true
},
callback: {
type: Function,
default: function() {}
}
}
17. Components
computed & methods
computed vs methods:
computed properties are cached as long as data does not change
computed: by default only getters, but also setters possible
computed: {
fullname () {
return this.firstname + ' ' + this.lastname; // cached
}
},
methods: {
fullname () {
return this.firstname + ' ' + this.lastname; // always executed
}
}
21. Vuex
state
immutable, changed only by mutations
mutations
only place to modify (=mutate) the store state
actions
methods calling mutations
for asynchronous calls
getters
methods to access state properties
use mapGetters in computed of components
add more custom computed properties by using ... (spread operator)
22. Tipps & tricks
use Chrome plugin Vue
DevTools
great inspections for
components & events
Vuex state management
(with time travel
functionality)
23. Tipps & tricks
use hot reloading with vue-loader
applies changes without page-reload
enabled by default
make sure to add watchOptions to dev-server.js
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
},
// add these lines if missing
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
})
25. Take aways
Use VueJS!
Split up your app into reusable components
Use Vuex for complex state handling
Stick with simple event (bus) handling for simple apps
Use Vue DevTools for dev/debugging