Level up apps and websites with vue.js

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

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

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

4.
hello commit

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

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

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

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

11.
Our team wassearching 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-routervuex 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.

23.

25.
<script src="vue.js"></script> <div id="app"> <imgv-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.

27.

29.
<script src="vue.js"></script> <div id="app"> <pv-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"> <pv-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"> <liv-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"> <liv-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 datain 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> Thehigher 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.

45.

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 whenits own dependencies updates - called and used as data properties - is cached

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

50.
summary Focusing - no thishell (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 ofelements that can be accessed through one single element. - encapsulation of logic, but in different instances - encapsulation of style (module, scoped)

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

57.
// ...in rootcomponent <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 canencapsulate 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 couldbe 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 instancegoes 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.

72.

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 propswe 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 ifwe want to change data... ...wherever in the component tree? twitter: @loregirardi github: @liqueflies

81.
// broadcast event varbus = 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 newVue({ ... methods: { myMethod: function () { bus.$emit('event-name', ...arguments) } } }) event bus https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

83.
// receive event newVue({ ... 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 toadd 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"> <pv-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"> <pv-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"> <pv-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"> <pv-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 usecases 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"> <liv-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"> <liv-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 wewill 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 Easyto start up, also in old legacy projects. website: https://vuejs.org/

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

110.
add modularly what youneed 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 iam 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 mobiledevices is easy achieve fast rendering on desktop, vue.js get the best experience on mobile devices. website: https://vuejs.org/

114.
useful resources - curatedlist: 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 - evanyou: 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 growingquickly but is recent. let’s share knowledge, code and passion. twitter: @loregirardi github: @liqueflies

117.
thank you

Level up apps and websites with vue.js

More Related Content

What's hot

Similar to Level up apps and websites with vue.js

Recently uploaded

Level up apps and websites with vue.js

Editor's Notes