The document presents an overview of Vue.js, a progressive framework for building applications and websites, highlighting its ease of use and strong community support. It includes code examples demonstrating fundamental concepts such as data binding, conditional rendering, computed properties, and component management. Additionally, it discusses advanced topics like lifecycle hooks, event buses, and transitions to enhance user experience.

1. LEVEL-UP APPS & WEBSITES
WITH VUE.JS

2. Level-up
apps & websites
with vue.js
twitter:
@loregirardi
github:
@liqueflies

3. hey folks
i am
lorenzo girardi
twitter:
@loregirardi
github:
@liqueflies

4. hello commit

5. i am a
front-end dev
and a passionate
musician
twitter:
@loregirardi
github:
@liqueflies

6. digital company with strong focus on
strategy and technology
website:
https://www.develondigital.com/

7. international group
+15 years
+55 people
+5 departments
website:
https://www.develondigital.com/
thanks for having us!

8. is it easy
to build websites?
twitter:
@loregirardi
github:
@liqueflies

11. Our team was searching for a tool
with data driven development in mind...
...and a lean learning curve because
we had to be production-ready ASAP.
twitter:
@loregirardi
github:
@liqueflies

12. + =
website:
https://vuejs.org/

13. /vjuː/
website:
https://vuejs.org/

15. website:
https://vuejs.org/
progressive
framework
evan you
vue vue-router vuex vue-cli

16. website:
https://vuejs.org/
numbers
> 82k stars (87k react, 32k angular)
~ 4000 packages depends on it
> 1.000.000 download last month
$ 11.567 per month by 204 patreons
2 vueconf in 2018 (amsterdam, new orleans)

17. basic
concepts
website:
https://vuejs.org/

18. website:
https://vuejs.org/

19. website:
https://vuejs.org/

21. <script src="vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello commit people!'
}
})
</script>
https://vuejs.org/ hello world

22. <script src="vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello commit people!'
}
})
</script>
https://vuejs.org/ hello world

23. <script src="vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello commit people!'
}
})
</script>
https://vuejs.org/ hello world

25. <script src="vue.js"></script>
<div id="app">
<img v-bind:src="src" :alt="alt" />
</div>
<script>
new Vue({
el: '#app',
data: {
src: 'https://picsum.photos/200/300',
alt: 'A random pic from the web.'
}
})
</script>
https://vuejs.org/v2/guide/syntax.html attributes binding

26. <script src="vue.js"></script>
<div id="app">
<img v-bind:src="src" :alt="alt" />
</div>
<script>
new Vue({
el: '#app',
data: {
src: 'https://picsum.photos/200/300',
alt: 'A random pic from the web.'
}
})
</script>
https://vuejs.org/v2/guide/syntax.html attributes binding

27. <script src="vue.js"></script>
<div id="app">
<img v-bind:src="src" :alt="alt" />
</div>
<script>
new Vue({
el: '#app',
data: {
src: 'https://picsum.photos/200/300',
alt: 'A random pic from the web.'
}
})
</script>
https://vuejs.org/v2/guide/syntax.html attributes binding

29. <script src="vue.js"></script>
<div id="app">
<p v-if="visible"> I’m not rendered </p>
<p v-show="visible"> I’m hidden [i.e. display: none] </p>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
}
})
</script>
https://vuejs.org/v2/guide/syntax.html conditional render/display

30. <script src="vue.js"></script>
<div id="app">
<p v-if="visible"> I’m not rendered </p>
<p v-show="visible"> I’m hidden [i.e. display: none] </p>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
}
})
</script>
https://vuejs.org/v2/guide/syntax.html conditional render/display

31. <script src="vue.js"></script>
<ul id="app">
<li v-for="todo in todos" :key="todo">
{{ todo }}
</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
todos: ['eat', 'sleep', 'repeat']
}
})
</script>
https://vuejs.org/v2/guide/syntax.html loop through elements

32. <script src="vue.js"></script>
<ul id="app">
<li v-for="todo in todos" :key="todo">
{{ todo }}
</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
todos: ['eat', 'sleep', 'repeat']
}
})
</script>
https://vuejs.org/v2/guide/syntax.html loop through elements

34. <script src="vue.js"></script>
<div id="app">
<p> {{ message }} </p>
<button @click="message = ''"> Reset </button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Please, reset me!'
}
})
</script>
https://vuejs.org/v2/guide/syntax.html handle user input

35. <script src="vue.js"></script>
<div id="app">
<p> {{ message }} </p>
<button @click="message = ''"> Reset </button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Please, reset me!'
}
})
</script>
https://vuejs.org/v2/guide/syntax.html handle user input

36. <script src="vue.js"></script>
<div id="app">
<p> you typed: {{ message }} </p>
<input v-model="message" placeholder="start typing..." />
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
https://vuejs.org/v2/guide/syntax.html handle user input

37. <script src="vue.js"></script>
<div id="app">
<p> you typed: {{ message }} </p>
<input v-model="message" placeholder="start typing..." />
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
https://vuejs.org/v2/guide/syntax.html handle user input

39. syntax
Focusing
- semantic code
- easy to read
- easy to maintain
- easy to share code
in teams.

40. setting data
Focusing
set data in vue.js is not async.
is the same as you do in javascript.
this.setState({ counter: this.state.counter++ })
this.setState({ counter: this.state.counter++ })
have you ever tried?

42. computed
and methods
website:
https://vuejs.org/

43. <ul id="app">
<p> The higher number is: {{ higherNumber }} </p>
</ul>
new Vue({
el: '#app',
data: {
numbers: [100, 2, 345, 42, 56]
},
computed: {
higherNumber: function () {
return Math.max(...this.numbers)
}
}
})
https://vuejs.org/v2/guide/syntax.html computed

44. <ul id="app">
<p> The higher number is: {{ higherNumber }} </p>
</ul>
new Vue({
el: '#app',
data: {
numbers: [100, 2, 345, 42, 56]
},
computed: {
higherNumber: function () {
return Math.max(...this.numbers)
}
}
})
https://vuejs.org/v2/guide/syntax.html computed

45. <ul id="app">
<p> The higher number is: {{ higherNumber }} </p>
</ul>
new Vue({
el: '#app',
data: {
numbers: [100, 2, 345, 42, 56]
},
computed: {
higherNumber: function () {
return Math.max(...this.numbers)
}
}
})
https://vuejs.org/v2/guide/syntax.html computed

46. <div id="app">
<p v-show="visible"> I am visible. </p>
<button @click="toggleVisibility"> toggle visibility </button>
</div>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
toggleVisibility: function (event) {
this.visible = !this.visible
}
}
})
https://vuejs.org/v2/guide/syntax.html methods

47. <div id="app">
<p v-show="visible"> I am visible. </p>
<button @click="toggleVisibility"> toggle visibility </button>
</div>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
toggleVisibility: function (event) {
this.visible = !this.visible
}
}
})
https://vuejs.org/v2/guide/syntax.html methods

48. computed
Focusing
- runs when its
own dependencies
updates
- called and used
as data properties
- is cached

49. methods
Focusing
- runs when
you need to use it
- called as a
function in event
bindings
- is not cached

50. summary
Focusing
- no this hell (context is auto-binded)
- no async data beginner failures
- no shouldUpdate worries
- no build steps needed

52. content
management with
components
website:
https://vuejs.org/v2/components.html

54. <the-header />
<aside>
<main-menu />
</aside>
<main>
<blog-posts />
</main>
<the-footer />
https://vuejs.org/v2/components.htm
l
components
tree structure

55. component
Focusing
- encapsulation of elements
that can be accessed
through one single element.
- encapsulation of logic,
but in different instances
- encapsulation of style (module, scoped)

56. // ...in root component
<div id="app">
<card-item />
</div>
Vue.component('card-item', {
template: '...',
data: function () {
return {
...
}
}
})
https://vuejs.org/v2/components.html

57. // ...in root component
<div id="app">
<card-item />
</div>
<script>
Vue.component('card-item', {
template: '...',
data: function () {
return { ... }
}
})
</script>
https://vuejs.org/v2/components.html

58. <script type="text/x-template" id="card-template">
<article>
<h2> {{ title }} </h2>
<img :src="img" :alt="title" />
</article>
</script>
Vue.component('card-item', {
template: '#card-template',
data: function () {
return {
title: 'A card title'
img: 'https://picsum.photos/200/300'
}
}
})
https://vuejs.org/v2/components.html

59. <script type="text/x-template" id="card-template">
<article>
<h2> {{ title }} </h2>
<img :src="img" :alt="title" />
</article>
</script>
Vue.component('card-item', {
template: '#card-template',
data: function () {
return {
title: 'A card title'
img: 'https://picsum.photos/200/300'
}
}
})
https://vuejs.org/v2/components.html

61. {
...
data () {
return {
title: 'A card title'
img: 'https://picsum.photos/200/300'
}
}
...
}
https://vuejs.org/v2/components.html
data is a function

63. now we can encapsulate logic
and style in a component.
by for now, we are using it
statically.
twitter:
@loregirardi
github:
@liqueflies

64. Vue.component('card-item', {
template: '#card-template',
props: ['title', 'img']
})
// ...in root component
<div id="app">
<card-item
title="Title from parent"
src="https://picsum.photos/200/300" />
</div>
https://vuejs.org/v2/components.html
… better use props

65. Vue.component('card-item', {
template: '#card-template',
props: ['title', 'img']
})
// ...in root component
<div id="app">
<card-item
title="Title from parent"
src="https://picsum.photos/200/300" />
</div>
https://vuejs.org/v2/components.html
… better use props

66. <div id="app">
<card-item
propA="..."
propB="..."
propC="..."
propD="..."
...
/>
</div>
https://vuejs.org/v2/components.html
this could be sick

67. Vue.component('card-item', {
inheritAttrs: false, // important to avoid unwanted markup
template: '#card-template',
props: ['title', 'img']
})
<div id="app">
<card-item v-bind="card" />
</div>
new Vue({
el: '#app',
data: {
card: { title: 'Card title', img: 'https://picsum.photos/200/300' }
}
})
https://vuejs.org/v2/components.html
v-bind to the rescue

68. Vue.component('card-item', {
inheritAttrs: false, // important to avoid unwanted markup
template: '#card-template',
props: ['title', 'img']
})
<div id="app">
<card-item v-bind="card" />
</div>
new Vue({
el: '#app',
data: {
card: { title: 'Card title', img: 'https://picsum.photos/200/300' }
}
})
https://vuejs.org/v2/components.html
v-bind to the rescue

69. lifecycle
Focusing
each vue instance goes through
a series of initialization steps
when it’s created running functions
called lifecycle hooks,
giving users the opportunity to
add their own code at specific stages.

70. Vue.component('card-item', {
template: '...',
data: function () {
return {
image: '...'
}
},
mounted: function () {
var image = this.image
this.image = '...my-spinner-image.png'
new imagesLoaded(this.$el, { this.image = image })
}
})
https://vuejs.org/v2/components.html

71. Vue.component('card-item', {
template: '...',
data: function () {
return {
image: '...'
}
},
mounted: function () {
var image = this.image
this.image = '...my-spinner-image.png'
new imagesLoaded(this.$el, { this.image = image })
}
})
https://vuejs.org/v2/components.html

72. Vue.component('card-item', {
template: '...',
data: function () {
return {
image: '...'
}
},
mounted: function () {
var image = this.image
this.image = '...my-spinner-image.png'
new imagesLoaded(this.$el, { this.image = image })
}
})
https://vuejs.org/v2/components.html

73. <div id="app">
<component :is="componentName" />
</div>
new Vue({
el: '#app',
data: {
componentName: '...'
}
})
https://vuejs.org/v2/components.html
the :is attribute

74. <template lang="pug">
// ...
</template>
<script>
// export default {}
</script>
<style lang="sass|scss|stylus" module|scoped>
// ...
</style>
https://vuejs.org/v2/components.html
single file
components

76. update
data with events
website:
https://vuejs.org/v2/style-guide/

77. by passing props we can mutate
child data from parent.
how can we mutate
parent data from its children?
twitter:
@loregirardi
github:
@liqueflies

78. <script type="text/x-template" id="slider-pag-template">
<div>
<button @click="$emit('next-slide')"> Next slide </button>
<button @click="$emit('prev-slide')"> Prev slide </button>
</div>
</script>
Vue.component('slider-pag', {
template: '#slider-pag-template'
})
<div id="app">
<slider-pag
@next-slide="slide++" @prev-slide="slide--" />
</div>
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

79. <script type="text/x-template" id="slider-pag-template">
<div>
<button @click="$emit('next-slide')"> Next slide </button>
<button @click="$emit('prev-slide')"> Prev slide </button>
</div>
</script>
Vue.component('slider-pag', {
template: '#slider-pag-template'
})
<div id="app">
<slider-pag
@next-slide="slide++" @prev-slide="slide--" />
</div>
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

80. and what if we want
to change data...
...wherever in the
component tree?
twitter:
@loregirardi
github:
@liqueflies

81. // broadcast event
var bus = new Vue()
// send event
bus.$emit('event-name', ...arguments)
// receive event
bus.$on('event-name', ...arguments)
// unbind event
bus.$off('event-name')
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

82. // send event
new Vue({
...
methods: {
myMethod: function () {
bus.$emit('event-name', ...arguments)
}
}
})
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

83. // receive event
new Vue({
...
created: function () {
bus.$on('event-name', myMethod)
},
methods: {
myMethod: function () { ... }
}
})
event bus
https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

85. native
transitions
website:
https://vuejs.org/v2/guide/transitions.html

86. transitions
Focusing
transition component allows
to add enter/leave effects to:
- conditions (v-if / v-show)
- dynamic components
- component root node
- switching :key attribute
website:
https://vuejs.org/v2/guide/transitions.html

87. website:
https://vuejs.org/v2/guide/transitions.html

88. <div id="app">
<transition name="fade">
<p v-show="visible"> I am visible. </p>
</transition>
<button @click="visible = !visible"> toggle </button>
</div>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
https://vuejs.org/v2/guide/syntax.html

89. <div id="app">
<transition name="fade">
<p v-show="visible"> I am visible. </p>
</transition>
<button @click="visible = !visible"> toggle </button>
</div>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
https://vuejs.org/v2/guide/syntax.html

91. <div id="app">
<transition name="fade">
<p v-show="visible"> I am visible. </p>
</transition>
<button @click="visible = !visible"> toggle </button>
</div>
<style>
.fade-enter-active {
transition: opacity .2s ease;
}
.fade-leave-active {
transition: opacity .3;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
https://vuejs.org/v2/guide/syntax.html

92. <div id="app">
<transition name="fade">
<p v-show="visible"> I am visible. </p>
</transition>
<button @click="visible = !visible"> toggle </button>
</div>
<style>
.fade-enter-active {
transition: opacity .2s ease;
}
.fade-leave-active {
transition: opacity .3;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
https://vuejs.org/v2/guide/syntax.html

94. <div id="app">
<transition name="fade" mode="out-in|in-out">
<component :is="pageName" />
</transition>
</div>
<script>
new Vue({
el: '#app',
props: ['pageName']
})
</script>
https://vuejs.org/v2/guide/syntax.html

95. <div id="app">
<transition name="fade" mode="out-in|in-out">
<component :is="pageName" />
</transition>
</div>
<script>
new Vue({
el: '#app',
props: ['pageName']
})
</script>
https://vuejs.org/v2/guide/syntax.html

96. https://jsfiddle.net/loregirardi/52mn0sqL/
a fiddle

97. <div id="app">
<transition @enter="enterAnimation">
<component :is="pageName" />
</transition>
</div>
<script>
new Vue({
el: '#app',
props: ['pageName'],
methods: {
enterAnimation (el, done) { /* your code */ }
}
})
</script>
https://vuejs.org/v2/guide/syntax.html

98. <div id="app">
<transition @enter="enterAnimation">
<component :is="pageName" />
</transition>
</div>
<script>
new Vue({
el: '#app',
props: ['pageName'],
methods: {
enterAnimation (el, done) { /* your code */ }
}
})
</script>
https://vuejs.org/v2/guide/syntax.html

100. async call
best practices
website:
https://vuejs.org/

101. in real use cases
we have to display
data from server.
what’s the better way
to achieve that?
twitter:
@loregirardi
github:
@liqueflies

103. <script src="vue.js"></script>
<ul id="star-wars">
<li v-for="person in people" :key="person.name">
{{ person.name }}
</li>
</ul>
<script>
new Vue({
el: '#star-wars',
data: {
people: []
},
created: function () {
fetch('https://swapi.co/api/people').then(function (response) {
this.people = response.results
})
}
})
</script>

104. <script src="vue.js"></script>
<ul id="star-wars">
<li v-for="person in people" :key="person.name">
{{ person.name }}
</li>
</ul>
<script>
new Vue({
el: '#star-wars',
data: {
people: []
},
created: function () {
fetch('https://swapi.co/api/people').then(function (response) {
this.people = response.results
})
}
})
</script>

105. in fast connections
we will immediately see
results.
how can we add a loader
for slow connections?
twitter:
@loregirardi
github:
@liqueflies

106. https://jsfiddle.net/loregirardi/5x6392wr/
a fiddle

107. five
reasons why
website:
https://vuejs.org/

108. no build steps
required
Easy to start up, also in old legacy
projects.
website:
https://vuejs.org/

109. effortless
api
update and modify data is easy.
context is auto-binded and rendering
updates are out of the box.
website:
https://vuejs.org/

110. add modularly
what you need
if your app / website needs to scale
just add modules from vue.js ecosystem
to fit your needs.
website:
https://vuejs.org/

111. no es6 knowledge
needed
i am not telling you to not learn es6.
but if you want you can still use
old es2015 syntax so
beginner / not-frontend dev
can easily get into it.
website:
https://vuejs.org/

112. super fast on
mobile devices
is easy achieve fast rendering on desktop,
vue.js get the best experience on mobile
devices.
website:
https://vuejs.org/

114. useful resources
- curated list: https://github.com/vuejs/awesome-vue
- official forum: https://forum.vuejs.org/
- vuex: https://github.com/vuejs/vuex
- vue-router: https://router.vuejs.org/en/
- vue-cli: https://github.com/vuejs/vue-cli
- server-side rendering: https://vuejs.org/v2/guide/ssr.html
website:
https://vuejs.org/

115. vue people
- evan you: https://twitter.com/youyuxi
- kazupon: https://twitter.com/kazu_pon
- linusborg: https://twitter.com/Linus_Borg
- akryum: https://twitter.com/Akryum
- katashin: https://twitter.com/ktsn
- sarah drasner: https://twitter.com/sarah_edo
website:
https://vuejs.org/team.html

116. vue community is
growing quickly but is recent.
let’s share knowledge,
code and passion.
twitter:
@loregirardi
github:
@liqueflies

117. thank you