Level up apps and websites with vue.js
Download as pptx, pdf0 likes397 views
Vue.js, una libreria per la realizzazione di applicazioni web di front end, che dalla versione 2 sta sempre più acquisendo popolarità.
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-29-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-30-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-31-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-32-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-43-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-44-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-45-320.jpg)
![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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-64-320.jpg)
![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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-65-320.jpg)
![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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-67-320.jpg)
![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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-68-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-94-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-95-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-97-320.jpg)
![<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](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-98-320.jpg)
![<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>](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-103-320.jpg)
![<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>](https://image.slidesharecdn.com/level-upappswebsiteswithvue-180226100712/85/Level-up-apps-and-websites-with-vue-js-104-320.jpg)
More Related Content
What's hot (20)
Similar to Level up apps and websites with vue.js (20)
More from Commit University (20)
Recently uploaded (20)
Level up apps and websites with vue.js
- 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
- 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)
- 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?
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
Editor's Notes
- #3: BENVENUTI AL NUOVO INCONTRO DEL COMMIT UNIVERSITY ->
- #4: 24 anni da verona ->
- #5: ed è un piacere essere qui ->
- #9: sondaggio quando vecchi amici chiedono che lavoro fai...
- #12: ci siamo resi conto che il problema era gestire lo stato della nostra applicazione ->
- #17: i numeri sono raddoppiati dallo scorso anno ->
- #19: dobbiamo pensare che la vista sia la rappresentaziobne visiva del nostro stato, il nostro compito è quello di eseguire i cambiamenti su di esso
- #20: le proprietà di data hanno un setter ed un getter ciascuna, vengono collezionati in watcher che vengono notificati dai setter per triggerare nuovamente il render del layout
- #22: Espressione javascript tra mustache syntax
- #26: Espressione javascript tra attributi html
- #30: differenze v-if per nascondere ciò che non vogliamo vedere v-show per nascondere momentaneamente qualcosa che poi sarà visibile costo di esecuzione maggiore per v-if
- #32: prendere ogni cella dell’array todos ed averla a disposizione dal nodo su cui viene applicato il v-if e anche al suo interno
- #35: eventi direttamente nell’html
- #37: v-model viene applicato in qualsiasi tipo di input, al suo evento change la modifica viene propagata alla proprietà di data sul quale abbiamo applicato l’attributo
- #40: vantaggio sequenziale, una dipende dall’altra
- #44: computed è una proprietà dell’oggetto vue deve ritornare una variabile / dato viene chiamata come una prop di data è cachata se non vengono aggiornate dipendenze
- #47: è una chiave dell’oggetto vue è una funzione che non deve ritornare per forza un valore, solitamente muta delle proprietà non è cachata
- #53: spesso la definizione di component e la sua utilità non vengono concretamente comprese
- #55: chiaramente header e footer non saranno riutilizzabili ma il singolo post del blog probabilmente si
- #56: un insieme di tag html accessibili da un unico nodo ognuno con riferimento al proprio stile e la propria logica