Introduction to VueJS & Vuex

About me
Bernd Alter
Technical Director at Turbine Kreuzberg
Tech lead, father, boardgame enthusiast, DJ
bernd.alter@turbinekreuzberg.com
@bazoo0815

Agenda
Basics
Bindings
Conditionals & lists
Slots
Routing
Components
State management with Vuex
Tipps & tricks

Basics
Use npm package vue-cli
Easy scaffolding
vue init <template-name> <project-name>
vue init webpack my-vue-app

Basics
Vue instance (single/multiple)
Mustache template syntax
Lifecycle hooks: created, mounted, updated, destroyed
<span>Message: {{ msg }}</span>
<script>
var vm = new Vue({
data () {
return {
msg: 'my message'
}
},
mounted () {
this.$emit('mounted');
}
// more code
})
</script>

Bindings
Attributes: v-bind (shorthand :)
Example:
Result:
<div class="static"
v-bind:class="{ active: isActive, 'danger': hasError }"
:text="dynamicText">
</div>
<script>
data: {
isActive: true,
hasError: false,
dynamicText: 'my dynamic text'
}
</script>
<div class="static active">my dynamic text</div>

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>

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>

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>

Conditionals
v-if, v-else, v-else-if
v-show
always rendered, toggled by CSS classes
v-show vs. v-if
v-if: higher toggle costs
v-show: higher initial render costs
<button v-if="isUserLoggedIn">Logout</button>
<button v-else>Login</button>
<div v-show="showInfo">Hidden info</div>

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>

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>

Routing
Use component vue-router
<template>
<div id="app">
<router-link to="/demo">Demo</router-link>
<router-view/>
</div>
</template>
<script>
Vue.use(Router)
export default new Router({
routes: [
{
path: '/demo',
name: 'Demo',
component: Demo
}
]
})
</script>

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>

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>

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() {}
}
}

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
}
}

Components
watch
similar to computed
usually not necessary, rather use computed

Vuex
state management library/pattern
based on/inspired by Flux & Redux
organized in so-called store
store can be split into modules

Vuex
https://vuex.vuejs.org/en/intro.html

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)

Tipps & tricks
use Chrome plugin Vue
DevTools
great inspections for
components & events
Vuex state management
(with time travel
functionality)

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
}
})

Links
VueJS guide:
VueJS API:
VueJS video tutorials:
Awesome Vue (link collection):
Vue Devtools (Chrome plugin):
Vuex:
Vuex video tutorials:
https://vuejs.org/v2/guide/
https://vuejs.org/v2/api/
https://laracasts.com/series/learn-vue-2-step-by-
step
https://github.com/vuejs/awesome-vue
https://chrome.google.com/webstore/detail/vuejs-
devtools/nhdogjmejiglipccpnnnanhbledajbpd
https://vuex.vuejs.org/en/
https://www.youtube.com/playlist?
list=PL55RiY5tL51pT0DNJraU93FhMzhXxtDAo

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

Thanks for listening
@bazoo0815
https://github.com/coding-berlin/vuejs-demo
https://de.slideshare.net/berndalter7

Introduction to VueJS & Vuex

More Related Content

What's hot

What's hot (20)

Similar to Introduction to VueJS & Vuex

Similar to Introduction to VueJS & Vuex (20)

Recently uploaded

Recently uploaded (20)

Introduction to VueJS & Vuex