Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Vue.js
Marek Jakimiuk
Introduction.
pagepro.co
About Author.
Evan You
● Previously worked as a Creative
Technologist at Google
● Core dev at Meteor
● Since 2016 working ...
Statistics.
React.js
Vue.js
Angular.js
(March 13,
2019)
pagepro.co
Statistics.
React.js
Vue.js
Angular.js
(February 13, 2019 – March 13,
2019)
pagepro.co
Which big companies use Vue.js?
Sources:
https://www.monterail.com/state-of-vuejs-report
https://www.quora.com/Which-big-c...
Why Vue.js?
● Easy to start
● Vue template file component
● Virtual DOM
● Scoped css
● Built-in Transitions & Animation su...
Ecosystem.
● vue-router - Single-page application routing
● vuex - Large-scale state management
● vue-cli - Project scaffo...
How it works?
● Inspired by Model-view-
viewmodel (MVVM)
architectural pattern.
● Dependency tracking
system with getters ...
Lifecycle & hooks
pagepro.co
Enough Introduction !
pagepro.co
Structure.
pagepro.co
Vue component. <!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.pn...
Vue component VS Basic template.
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src...
Vue component VS Basic template.
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src...
Vue component.
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.pn...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
<!-- Basic Vue template - ./app.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld...
Structure of Vue component.
export default {
name: 'RangeSlider',
components: {}, // when component uses other components
...
Structure of Vue component.
export default {
name: 'RangeSlider',
components: {}, // when component uses other components
...
Structure of Vue component.
export default {
name: 'RangeSlider',
components: {}, // when component uses other components
...
Interpolations.
pagepro.co
Interpolations - Text.
<template>
<div id="app">
<p>Message: {{ msg }}</p>
<p v-once>This will never change: {{ msg }}</p>...
Interpolations - Text.
<template>
<div id="app">
<p>Message: {{ msg }}</p>
<p v-once>This will never change: {{ msg }}</p>...
Interpolations - About data.
pagepro.co
Interpolations - Raw HTML.
<template>
<div id="app">
<p v-html="msg"></p>
<p v-once>This message will never change: {{ msg...
Interpolations - Raw HTML.
<template>
<div id="app">
<p v-html="msg"></p>
<p v-once>This message will never change: {{ msg...
Interpolations - Attributes.
<template>
<div id="app">
<span>{{ dynamicName }}</span>
<input v-bind:name="dynamicName"/>
<...
Interpolations - Attributes.
<template>
<div id="app">
<span>{{ dynamicName }}</span>
<input v-bind:name="dynamicName"/>
<...
Interpolations - JavaScript expression.
<template>
<div id="app">
{{ index + 1 }}
User: {{
user.toLowerCase()
.split(' ')
...
Interpolations - JavaScript expression.
<template>
<div id="app">
{{ index + 1 }}
User: {{
user.toLowerCase()
.split(' ')
...
Directives.
pagepro.co
Directives - V-BIND.
<template>
<div id="app">
<img
v-bind:title="title"
v-bind:src="src"
v-bind:alt="'description-' + alt...
Directives - V-BIND.
<template>
<div id="app">
<img
v-bind:title="title"
v-bind:src="src"
v-bind:alt="'description-' + alt...
Directives - V-ON - Component data.
<template>
<div id="app">
<p>Counter : {{ counter }}</p>
<!-- full syntax -->
<button ...
Directives - V-ON - Methods.
<template>
<div id="app">
<p>Counter : {{ counter }}</p>
<!-- full syntax -->
<button v-on:cl...
Directives - V-ON - Click and key events.
pagepro.co
Directives - V-ON - Event modifiers.
<template>
<div id="app">
<form v-on:submit.prevent="onSubmit">
<input type="text" na...
Watchers, Filters
& Computed Properties.
pagepro.co
Watchers.
pagepro.co
Watchers.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Jakimiuk',
fu...
Watchers.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Jakimiuk',
fu...
Watchers.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Jakimiuk',
fu...
Computed Properties.
pagepro.co
Computed properties.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Ja...
Computed properties.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Ja...
Computed properties.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Ja...
Computed properties.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
lastName: 'Ja...
Filters.
pagepro.co
Filters.
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data: fu...
Filters.
<template>
<div id="app">
<p>{{ message | capitalize }}</p>
</div>
</template>
<script>
export default {
name: 'a...
Filters.
<template>
<div id="app">
<p>{{ message | capitalize }}</p>
</div>
</template>
<script>
export default {
name: 'a...
Methods.
pagepro.co
Methods.
<template>
<div id="app">
<p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p>
<button v-on:click="toggle"> Toggle </b...
Methods.
<template>
<div id="app">
<p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p>
<button v-on:click="toggle"> Toggle </b...
Methods.
<template>
<div id="app">
<p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p>
<button v-on:click="toggle"> Toggle </b...
Form Input Bindings.
pagepro.co
Two-way Data Bindings.
pagepro.co
Binding - Input text.
<template>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message ...
Binding - Input text.
<template>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message ...
Binding - Checkbox.
<template>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox...
Binding - Checkbox.
<template>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox...
Binding - Multi Checkbox.
<template>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
...
Binding - Multi Checkbox.
<template>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
...
Binding - Select.
<template>
<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</optio...
Class Binding.
pagepro.co
Class Binding
(Passing Object).
pagepro.co
Class Binding - Passing Object.
<template>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
</templat...
<template>
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
<!-- Content -...
Class Binding
(Passing Array).
pagepro.co
Class Binding - Passing Array.
<template>
<div id="app">
<div v-bind:class="[activeClass, errorClass]">
<!-- Content -->
<...
<template>
<div id="app">
<div v-bind:class="[activeClass, errorClass]">
<!-- Content -->
</div>
</div>
</template>
<scrip...
Style Binding.
pagepro.co
Style Binding.
<template>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
Lorem ipsu...
<template>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
Lorem ipsum dolor sit ame...
<template>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
Lorem ipsum dolor sit ame...
<template>
<div id="app">
<button @click="fontSize += 1">+</button>
<button @click="fontSize -= 1">-</button>
<div v-bind:...
Conditional Rendering.
pagepro.co
Conditional Rendering - if.
<template>
<div id="app">
<h1 v-if="awesome">
😍 Vue is awesome!
</h1>
</div>
</template>
<scri...
Conditional Rendering - else
<template>
<div id="app">
<h1 v-if="awesome">
😍 Vue is awesome!
</h1>
<h1 v-else>
😢 It’s impo...
Conditional Rendering - else-if.
<template>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'...
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-...
Transitions & Animations.
pagepro.co
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<p v-if="show">hello</p>
</div>
</template>
...
Enter/Leave & List Transitions.
pagepro.co
Enter/Leave & List Transitions.
pagepro.co
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hell...
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hell...
Transitions & Animations - Groups.
pagepro.co
List Rendering.
pagepro.co
List Rendering
Array.
pagepro.co
<template>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
</template>
<script>
expor...
<template>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
</template>
<script>
expor...
<template>
<div id="app">
<ul>
<li v-for="item in items" v-bind:key="item.message">
{{ item.message }}
</li>
</ul>
</div>
...
List Rendering
Object.
pagepro.co
<template>
<div id="app">
<ul>
<li v-for="value in user">
{{ value }}
</li>
</ul>
</div>
</template>
<script>
export defau...
<template>
<div id="app">
<ul>
<li v-for="(value, index) in user" v-bind:key="index">
{{ index }}: {{ value }}
</li>
</ul>...
List Rendering - Object.
pagepro.co
List Rendering - Object.
<h2>Transactions</h2>
<ol>
<li
class="daily-list-item"
v-for="(group, index) in transactionsGroup...
List Rendering - Object.
<h2>Transactions</h2>
<ol>
<li
class="daily-list-item"
v-for="(group, index) in transactionsGroup...
List Rendering - Object.
<h2>Transactions</h2>
<ol>
<li
class="daily-list-item"
v-for="(group, index) in transactionsGroup...
List Rendering - Array.
<h2>Transactions</h2>
<ol>
<li
class="daily-list-item"
v-for="(group, index) in transactionsGroupe...
Component
Communication.
pagepro.co
Component Communication - Basics.
pagepro.co
Component Communication - Basics.
pagepro.co
Component Communication - Basics.
pagepro.co
Component Communication - Basics.
<App/>
pagepro.co
Component Communication - Basics.
<App/>
<TaskList/>
pagepro.co
Component Communication - Basics.
<App/>
<TaskList/>
<Task/>
pagepro.co
Component Communication
(Props).
pagepro.co
<App/>
<TaskList/>
<Task/>
<!-- <App/> -->
<template>
<div id="app">
<TaskList
:title="listTitle"
:tasks="filteredTasks"/>...
<!-- <App/> -->
<template>
<div id="app">
<TaskList
:title="listTitle"
:tasks="filteredTasks"/>
</div>
</template>
<script...
<!-- <TaskList/> -->
<template>
<div class="container">
<h1>{{ title }}</h1>
<ul>
<Task
v-bind:key="index"
:task="task"
:i...
<!-- <TaskList/> -->
<template>
<li class="c-task" v-bind:class="task.done ? 'is-done' : ''">
<input v-model="task.done" t...
Component Communication
(Emit).
pagepro.co
Component Communication - Emit.
<!-- <TaskList/> -->
<template>
<li class="c-task" v-bind:class="task.done ? 'is-done' : '...
<!-- <TaskList/> -->
<template>
<div class="container">
<h1>{{ title }}</h1>
<ul>
<Task
v-bind:key="index"
:task="task"
:i...
Component Communication - Receive Emit.
<!-- <App/> -->
<template>
<div id="app">
<TaskList
:title="listTitle"
:tasks="fil...
Component Communication
(Props).
pagepro.co
Practice.
pagepro.co
pagepro.co
pagepro.co
Thank You :)
Próxima SlideShare
Cargando en…5
×

An introduction to Vue.js

54 visualizaciones

Publicado el

Do you hear of Vue.js everywhere lately? With this presentation, you will be able to create your first app in just 30 minutes. Understand the basics and get yourself a solid knowledge to start your journey with the new progressive JavaScript Framework.

Publicado en: Software
  • Sé el primero en comentar

An introduction to Vue.js

  1. 1. Vue.js Marek Jakimiuk
  2. 2. Introduction. pagepro.co
  3. 3. About Author. Evan You ● Previously worked as a Creative Technologist at Google ● Core dev at Meteor ● Since 2016 working full-time on Vue.js framework pagepro.co
  4. 4. Statistics. React.js Vue.js Angular.js (March 13, 2019) pagepro.co
  5. 5. Statistics. React.js Vue.js Angular.js (February 13, 2019 – March 13, 2019) pagepro.co
  6. 6. Which big companies use Vue.js? Sources: https://www.monterail.com/state-of-vuejs-report https://www.quora.com/Which-big-companies-use-Vue-js ● GitLab ● Behance ● Livestorm ● Fox News ● Alibaba pagepro.co
  7. 7. Why Vue.js? ● Easy to start ● Vue template file component ● Virtual DOM ● Scoped css ● Built-in Transitions & Animation support ● Documentation ● Community ● Ecosystem pagepro.co
  8. 8. Ecosystem. ● vue-router - Single-page application routing ● vuex - Large-scale state management ● vue-cli - Project scaffolding ● vue-loader - Single File Component (*.vue file) loader for webpack ● vue-rx - RxJS integration ● vue-devtools - Browser DevTools extension ● vue-server-renderer - Server-side rendering support ● vue-class-component - TypeScript decorator for a class-based API pagepro.co
  9. 9. How it works? ● Inspired by Model-view- viewmodel (MVVM) architectural pattern. ● Dependency tracking system with getters and setters pagepro.co
  10. 10. Lifecycle & hooks pagepro.co
  11. 11. Enough Introduction ! pagepro.co
  12. 12. Structure. pagepro.co
  13. 13. Vue component. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> pagepro.co
  14. 14. Vue component VS Basic template. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> !<!DOCTYPE html> <html> <head> <script src="https://npmcdn.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ msg }} </div> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script> </body> </html> pagepro.co
  15. 15. Vue component VS Basic template. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> !<!DOCTYPE html> <html> <head> <script src="https://npmcdn.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ msg }} </div> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script> </body> </html> pagepro.co
  16. 16. Vue component. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> pagepro.co
  17. 17. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - view template. <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> pagepro.co
  18. 18. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - script. <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> pagepro.co
  19. 19. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - style. <style scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> pagepro.co
  20. 20. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style lang="scss" scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - style preprocessor. pagepro.co
  21. 21. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style lang="scss" scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - style scoped. pagepro.co
  22. 22. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style lang="scss" scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - style scoped. <!-- Src --> <template> <div class="example">hi</div> </template> <style scoped> .example { color: red; } </style> pagepro.co
  23. 23. <!-- Basic Vue template - ./app.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style lang="scss" scoped> div { font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } </style> Vue component - style scoped. <!-- Src --> <template> <div class="example">hi</div> </template> <style scoped> .example { color: red; } </style> <!-- Out --> <template> <div class="example" data-v-f3f3eg9>hi</div> </template> <style> .example[data-v-f3f3eg9] { color: red; } </style> pagepro.co
  24. 24. Structure of Vue component. export default { name: 'RangeSlider', components: {}, // when component uses other components data() {}, // component variables props: {}, // component properties computed: {}, // component properties watch: {}, // watch variables filters: {}, // filters methods: {}, // methods // Component Lifecycle hooks beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, errorCaptured() {} }; pagepro.co
  25. 25. Structure of Vue component. export default { name: 'RangeSlider', components: {}, // when component uses other components data() {}, // component variables props: {}, // component properties computed: {}, // component properties watch: {}, // watch variables filters: {}, // filters methods: {}, // methods // Component Lifecycle hooks beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, errorCaptured() {} }; name: 'RangeSlider', components: {}, // when component uses other components data() {}, // component variables props: {}, // component properties computed: {}, // component properties watch: {}, // watch variables filters: {}, // filters methods: {}, // methods pagepro.co
  26. 26. Structure of Vue component. export default { name: 'RangeSlider', components: {}, // when component uses other components data() {}, // component variables props: {}, // component properties computed: {}, // component properties watch: {}, // watch variables filters: {}, // filters methods: {}, // methods // Component Lifecycle hooks beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, errorCaptured() {} }; // Component Lifecycle hooks beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, activated() {}, deactivated() {}, beforeDestroy() {}, destroyed() {}, errorCaptured() {} pagepro.co
  27. 27. Interpolations. pagepro.co
  28. 28. Interpolations - Text. <template> <div id="app"> <p>Message: {{ msg }}</p> <p v-once>This will never change: {{ msg }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { msg: 'Hello World!' } } } </script> pagepro.co
  29. 29. Interpolations - Text. <template> <div id="app"> <p>Message: {{ msg }}</p> <p v-once>This will never change: {{ msg }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { msg: 'Hello World!' } } } </script> pagepro.co
  30. 30. Interpolations - About data. pagepro.co
  31. 31. Interpolations - Raw HTML. <template> <div id="app"> <p v-html="msg"></p> <p v-once>This message will never change: {{ msg }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { msg: '<h1>Hello <strong>World</strong></h1>' } } } </script> pagepro.co
  32. 32. Interpolations - Raw HTML. <template> <div id="app"> <p v-html="msg"></p> <p v-once>This message will never change: {{ msg }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { msg: '<h1>Hello <strong>World</strong></h1>' } } } </script> pagepro.co
  33. 33. Interpolations - Attributes. <template> <div id="app"> <span>{{ dynamicName }}</span> <input v-bind:name="dynamicName"/> <button v-bind:disabled="isButtonDisabled">Button</button> </div> </template> <script> export default { name: 'app', data: function () { return { isButtonDisabled: false, dynamicName: 'first-name' } } } </script> pagepro.co
  34. 34. Interpolations - Attributes. <template> <div id="app"> <span>{{ dynamicName }}</span> <input v-bind:name="dynamicName"/> <button v-bind:disabled="isButtonDisabled">Button</button> </div> </template> <script> export default { name: 'app', data: function () { return { isButtonDisabled: false, dynamicName: 'first-name' } } } </script> pagepro.co
  35. 35. Interpolations - JavaScript expression. <template> <div id="app"> {{ index + 1 }} User: {{ user.toLowerCase() .split(' ') .map((s) => s.charAt(0).toUpperCase() + s.substring(1)) .join(' ') }} Task: {{ done ? 'Completed' : 'Incomplete' }} <span v-bind:id="'list-' + index"></span> </div> </template> <script> export default { name: 'app', data: function () { return { index: 0, done: false, user: 'marek jakimiuk' } } } </script> pagepro.co
  36. 36. Interpolations - JavaScript expression. <template> <div id="app"> {{ index + 1 }} User: {{ user.toLowerCase() .split(' ') .map((s) => s.charAt(0).toUpperCase() + s.substring(1)) .join(' ') }} Task: {{ done ? 'Completed' : 'Incomplete' }} <span v-bind:id="'list-' + index"></span> </div> </template> <script> export default { name: 'app', data: function () { return { index: 0, done: false, user: 'marek jakimiuk' } } } </script> pagepro.co
  37. 37. Directives. pagepro.co
  38. 38. Directives - V-BIND. <template> <div id="app"> <img v-bind:title="title" v-bind:src="src" v-bind:alt="'description-' + alt" /> <!-- shorthand - <img :src="src" :title="title" --> </div> </template> <script> export default { name: 'app', data: function () { return { title: 'Cat on laptop', alt: 'I guess he wants to tell: Mark its enough for today!', src: 'https://scontent-frx5- 1.cdninstagram.com/vp/c96596da302ef2bfc8351a70180a32bd/5D 29AE53/t51.2885- 15/sh0.08/e35/s640x640/15035741_1827043654199892_23011 7407052529664_n.jpg?_nc_ht=scontent-frx5-1.cdninstagram.com' } } } </script> pagepro.co
  39. 39. Directives - V-BIND. <template> <div id="app"> <img v-bind:title="title" v-bind:src="src" v-bind:alt="'description-' + alt" /> <!-- shorthand - <img :src="src" :title="title" --> </div> </template> <script> export default { name: 'app', data: function () { return { title: 'Cat on laptop', alt: 'I guess he wants to tell: Mark its enough for today!', src: 'https://scontent-frx5- 1.cdninstagram.com/vp/c96596da302ef2bfc8351a70180a32bd/5D 29AE53/t51.2885- 15/sh0.08/e35/s640x640/15035741_1827043654199892_23011 7407052529664_n.jpg?_nc_ht=scontent-frx5-1.cdninstagram.com' } } } </script> pagepro.co
  40. 40. Directives - V-ON - Component data. <template> <div id="app"> <p>Counter : {{ counter }}</p> <!-- full syntax --> <button v-on:click="counter += 1">Add</button> <!-- shorthand --> <button @click="counter -= 1">Subtract</button> </div> </template> <script> export default { name: 'app', data: function () { return { counter: 0 } } } </script> pagepro.co
  41. 41. Directives - V-ON - Methods. <template> <div id="app"> <p>Counter : {{ counter }}</p> <!-- full syntax --> <button v-on:click="counter += 1">Add</button> <!-- shorthand --> <button @click="counter -= 1">Subtract</button> <button @click="reset">Reset</button> </div> </template> <script> export default { name: 'app', data: function () { return { counter: 0 } }, methods: { reset: function () { this.counter = 0 } } } </script> methods: { reset: function () { this.counter = 0 } } <button @click="reset">Reset</button> pagepro.co
  42. 42. Directives - V-ON - Click and key events. pagepro.co
  43. 43. Directives - V-ON - Event modifiers. <template> <div id="app"> <form v-on:submit.prevent="onSubmit"> <input type="text" name="first-name"/> <input type="text" name="last-name"/> <button type="submit">Send</button> </form> </div> </template> <script> export default { name: 'app', methods: { onSubmit: function () { // for example - some validate instructions } } } </script> <form v-on:submit.prevent="onSubmit"> methods: { onSubmit: function () { // for example - some validate instructions } } pagepro.co
  44. 44. Watchers, Filters & Computed Properties. pagepro.co
  45. 45. Watchers. pagepro.co
  46. 46. Watchers. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', fullName: 'Marek Jakimiuk' } }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } } </script> pagepro.co
  47. 47. Watchers. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', fullName: 'Marek Jakimiuk' } }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } } </script> watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } pagepro.co
  48. 48. Watchers. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', fullName: 'Marek Jakimiuk' } }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } } </script> <template> <div id="app"> {{ firstName }} {{ lastName }} {{ fullName }} </div> </template>
  49. 49. Computed Properties. pagepro.co
  50. 50. Computed properties. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', score: [2, 3, 4, 5] } }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName }, userScore: function () { return this.score.reduce(function (prevValue, currentValue) { return prevValue + currentValue }, 0) } } } </script> pagepro.co
  51. 51. Computed properties. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', score: [2, 3, 4, 5] } }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName }, userScore: function () { return this.score.reduce(function (prevValue, currentValue) { return prevValue + currentValue }, 0) } } } </script> fullName: function () { return this.firstName + ' ' + this.lastName } pagepro.co
  52. 52. Computed properties. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', score: [2, 3, 4, 5] } }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName }, userScore: function () { return this.score.reduce(function (prevValue, currentValue) { return prevValue + currentValue }, 0) } } } </script> userScore: function () { return this.score.reduce(function (prevValue, currentValue) { return prevValue + currentValue }, 0) } pagepro.co
  53. 53. Computed properties. <script> export default { name: 'app', data: function () { return { firstName: 'Marek', lastName: 'Jakimiuk', score: [2, 3, 4, 5] } }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName }, userScore: function () { return this.score.reduce(function (prevValue, currentValue) { return prevValue + currentValue }, 0) } } } </script> <template> <div id="app"> {{ fullName }} {{ userScore }} </div> </template> pagepro.co
  54. 54. Filters. pagepro.co
  55. 55. Filters. <template> <div id="app"> <p>{{ message }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { message: 'Example how vue filter works.' } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } } </script> filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } pagepro.co
  56. 56. Filters. <template> <div id="app"> <p>{{ message | capitalize }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { message: 'Example how vue filter works.' } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } } </script> <p>{{ message }}</p> pagepro.co
  57. 57. Filters. <template> <div id="app"> <p>{{ message | capitalize }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { message: 'Example how vue filter works.' } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } } </script> <p>{{ message | capitalize }}</p> pagepro.co
  58. 58. Methods. pagepro.co
  59. 59. Methods. <template> <div id="app"> <p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p> <button v-on:click="toggle"> Toggle </button> </div> </template> <script> export default { name: 'app', data: function () { return { bulb: true } }, methods: { toggle: function () { console.log('E.g. Event : ', event.currentTarget) this.bulb = !this.bulb } } } </script> pagepro.co
  60. 60. Methods. <template> <div id="app"> <p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p> <button v-on:click="toggle"> Toggle </button> </div> </template> <script> export default { name: 'app', data: function () { return { bulb: true } }, methods: { toggle: function () { this.bulb = !this.bulb } } } </script> methods: { toggle: function () { console.log('E.g. Event : ', event.currentTarget) this.bulb = !this.bulb } } pagepro.co
  61. 61. Methods. <template> <div id="app"> <p> Bulb state : {{ bulb ? 'ON' : 'OFF' }} </p> <button v-on:click="toggle"> Toggle </button> </div> </template> <script> export default { name: 'app', data: function () { return { bulb: true } }, methods: { toggle: function () { console.log('E.g. Event : ', event.currentTarget) this.bulb = !this.bulb } } } </script> <button v-on:click="toggle"> Toggle </button> pagepro.co
  62. 62. Form Input Bindings. pagepro.co
  63. 63. Two-way Data Bindings. pagepro.co
  64. 64. Binding - Input text. <template> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { message: '' } } } </script> pagepro.co
  65. 65. Binding - Input text. <template> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> </template> <script> export default { name: 'app', data: function () { return { message: '' } } } </script> <input v-model="message" placeholder="edit me"> pagepro.co
  66. 66. Binding - Checkbox. <template> <div id="app"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> </template> <script> export default { name: 'app', data: function () { return { checked: false } } } </script> pagepro.co
  67. 67. Binding - Checkbox. <template> <div id="app"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> </template> <script> export default { name: 'app', data: function () { return { checked: false } } } </script> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> pagepro.co
  68. 68. Binding - Multi Checkbox. <template> <div id="app"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </template> <script> export default { name: 'app', data: function () { return { checkedNames: [] } } } </script> pagepro.co
  69. 69. Binding - Multi Checkbox. <template> <div id="app"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </template> <script> export default { name: 'app', data: function () { return { checkedNames: [] } } } </script> pagepro.co
  70. 70. Binding - Select. <template> <div id="app"> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> </template> <script> export default { name: 'app', data: function () { return { selected: '' } } } </script> pagepro.co
  71. 71. Class Binding. pagepro.co
  72. 72. Class Binding (Passing Object). pagepro.co
  73. 73. Class Binding - Passing Object. <template> <div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> </template> <script> export default { data() { return { isActive: true, hasError: false } } } </script> pagepro.co
  74. 74. <template> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> <!-- Content --> </div> </div> </template> <script> export default { data() { return { isActive: true, hasError: false } } } </script> Class Binding - Passing Object. pagepro.co
  75. 75. Class Binding (Passing Array). pagepro.co
  76. 76. Class Binding - Passing Array. <template> <div id="app"> <div v-bind:class="[activeClass, errorClass]"> <!-- Content --> </div> </div> </template> <script> export default { data() { return { activeClass: 'active', errorClass: 'text-danger' } } } </script> pagepro.co
  77. 77. <template> <div id="app"> <div v-bind:class="[activeClass, errorClass]"> <!-- Content --> </div> </div> </template> <script> export default { data() { return { activeClass: 'active', errorClass: 'text-danger' } } } </script> pagepro.co Class Binding - Passing Array.
  78. 78. Style Binding. pagepro.co
  79. 79. Style Binding. <template> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </div> </template> <script> export default { data() { return { activeColor: 'red', fontSize: 30 } } } </script> pagepro.co
  80. 80. <template> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </div> </template> <script> export default { data() { return { activeColor: 'red', fontSize: 30 } } } </script> pagepro.co Style Binding.
  81. 81. <template> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </div> </template> <script> export default { data() { return { activeColor: 'red', fontSize: 30 } } } </script> Style Binding. pagepro.co
  82. 82. <template> <div id="app"> <button @click="fontSize += 1">+</button> <button @click="fontSize -= 1">-</button> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </div> </template> <script> export default { data() { return { activeColor: 'red', fontSize: 30 } } } </script> pagepro.co Style Binding.
  83. 83. Conditional Rendering. pagepro.co
  84. 84. Conditional Rendering - if. <template> <div id="app"> <h1 v-if="awesome"> 😍 Vue is awesome! </h1> </div> </template> <script> export default { name: 'app', data: function () { return { awesome: true } } } </script> pagepro.co
  85. 85. Conditional Rendering - else <template> <div id="app"> <h1 v-if="awesome"> 😍 Vue is awesome! </h1> <h1 v-else> 😢 It’s impossible! </h1> </div> </template> <script> export default { name: 'app', data: function () { return { awesome: false } } } </script> pagepro.co
  86. 86. Conditional Rendering - else-if. <template> <div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> </template> pagepro.co
  87. 87. <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> Conditional Rendering - else-if. pagepro.co
  88. 88. Transitions & Animations. pagepro.co
  89. 89. <template> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <p v-if="show">hello</p> </div> </template> <script> export default { data() { return { show: true } } } </script> Transitions & Animations. pagepro.co
  90. 90. Enter/Leave & List Transitions. pagepro.co
  91. 91. Enter/Leave & List Transitions. pagepro.co
  92. 92. <template> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> /* ...script */ <style> .fade-enter-active, .fade-leave-active { transition: all .8s; } .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(-20px); } <style> Transitions & Animations. pagepro.co
  93. 93. <template> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> /* ...script */ <style> .fade-enter-active, .fade-leave-active { transition: all .8s; } .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(-20px); } <style> Transitions & Animations. pagepro.co
  94. 94. Transitions & Animations - Groups. pagepro.co
  95. 95. List Rendering. pagepro.co
  96. 96. List Rendering Array. pagepro.co
  97. 97. <template> <div id="app"> <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> </div> </template> <script> export default { name: 'MessageBox', data() { return { items: [ { message: 'Foo' }, { message: 'Bar' } ] } } } </script> List Rendering - Array. pagepro.co
  98. 98. <template> <div id="app"> <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> </div> </template> <script> export default { name: 'MessageBox', data() { return { items: [ { message: 'Foo' }, { message: 'Bar' } ] } } } </script> List Rendering - Array. pagepro.co
  99. 99. <template> <div id="app"> <ul> <li v-for="item in items" v-bind:key="item.message"> {{ item.message }} </li> </ul> </div> </template> <script> export default { name: 'MessageBox', data() { return { items: [ { message: 'Foo' }, { message: 'Bar' } ] } } } </script> List Rendering - Array. pagepro.co
  100. 100. List Rendering Object. pagepro.co
  101. 101. <template> <div id="app"> <ul> <li v-for="value in user"> {{ value }} </li> </ul> </div> </template> <script> export default { name: 'Profile', data() { return { user: { firstName: 'John', lastName: 'Doe', age: 30 } } } } </script> List Rendering - Object. pagepro.co
  102. 102. <template> <div id="app"> <ul> <li v-for="(value, index) in user" v-bind:key="index"> {{ index }}: {{ value }} </li> </ul> </div> </template> <script> export default { name: 'Profile', data() { return { user: { firstName: 'John', lastName: 'Doe', age: 30 } } } } </script> List Rendering - Object. pagepro.co
  103. 103. List Rendering - Object. pagepro.co
  104. 104. List Rendering - Object. <h2>Transactions</h2> <ol> <li class="daily-list-item" v-for="(group, index) in transactionsGrouped" :key="index"> <div class="daily-list-cat"> <span class="daily-list-cat__hour"> {{ index | momentDate('DD-MM-YYYY', 'DD') }} </span> <span class="daily-list-cat__day"> {{ index | momentDate('DD-MM-YYYY', 'MMM') }} </span> </div> <ul> <li v-for="(transaction) in group" v-bind:key="transaction.index" v-bind:class="[ parseInt(transaction.amount, 10) < -20 ? 'negative' : '', transaction.isIncluded ? 'included' : '']"> <!-- list transactions per day → </li> </ol> pagepro.co
  105. 105. List Rendering - Object. <h2>Transactions</h2> <ol> <li class="daily-list-item" v-for="(group, index) in transactionsGrouped" :key="index"> <div class="daily-list-cat"> <span class="daily-list-cat__hour"> {{ index | momentDate('DD-MM-YYYY', 'DD') }} </span> <span class="daily-list-cat__day"> {{ index | momentDate('DD-MM-YYYY', 'MMM') }} </span> </div> <ul> <li v-for="(transaction) in group" v-bind:key="transaction.index" v-bind:class="[ parseInt(transaction.amount, 10) < -20 ? 'negative' : '', transaction.isIncluded ? 'included' : '']"> <!-- list transactions per day → </li> </ol> pagepro.co
  106. 106. List Rendering - Object. <h2>Transactions</h2> <ol> <li class="daily-list-item" v-for="(group, index) in transactionsGrouped" :key="index"> <div class="daily-list-cat"> <span class="daily-list-cat__hour"> {{ index | momentDate('DD-MM-YYYY', 'DD') }} </span> <span class="daily-list-cat__day"> {{ index | momentDate('DD-MM-YYYY', 'MMM') }} </span> </div> <ul> <li v-for="(transaction) in group" v-bind:key="transaction.index" v-bind:class="[ parseInt(transaction.amount, 10) < -20 ? 'negative' : '', transaction.isIncluded ? 'included' : '']"> <!-- list transactions per day → </li> </ol> pagepro.co
  107. 107. List Rendering - Array. <h2>Transactions</h2> <ol> <li class="daily-list-item" v-for="(group, index) in transactionsGrouped" :key="index"> <div class="daily-list-cat"> <span class="daily-list-cat__hour"> {{ index | momentDate('DD-MM-YYYY', 'DD') }} </span> <span class="daily-list-cat__day"> {{ index | momentDate('DD-MM-YYYY', 'MMM') }} </span> </div> <ul> <li v-for="(transaction) in group" v-bind:key="transaction.index" v-bind:class="[ parseInt(transaction.amount, 10) < -20 ? 'negative' : '', transaction.isIncluded ? 'included' : '']"> <!-- list transactions per day → </li> </ol> pagepro.co
  108. 108. Component Communication. pagepro.co
  109. 109. Component Communication - Basics. pagepro.co
  110. 110. Component Communication - Basics. pagepro.co
  111. 111. Component Communication - Basics. pagepro.co
  112. 112. Component Communication - Basics. <App/> pagepro.co
  113. 113. Component Communication - Basics. <App/> <TaskList/> pagepro.co
  114. 114. Component Communication - Basics. <App/> <TaskList/> <Task/> pagepro.co
  115. 115. Component Communication (Props). pagepro.co
  116. 116. <App/> <TaskList/> <Task/> <!-- <App/> --> <template> <div id="app"> <TaskList :title="listTitle" :tasks="filteredTasks"/> </div> </template> <script> import TaskList from '@/components/TaskList.vue' export default { name: 'app', components: { TaskList }, data: function () { return { listTitle: 'Todo list', tasks: [...] } } } </script> Component Communication - Pass Props. pagepro.co
  117. 117. <!-- <App/> --> <template> <div id="app"> <TaskList :title="listTitle" :tasks="filteredTasks"/> </div> </template> <script> import TaskList from '@/components/TaskList.vue' export default { name: 'app', components: { TaskList }, data: function () { return { listTitle: 'Todo list', tasks: [...] } } } </script> <App/> <TaskList/> <Task/> Component Communication - Pass Props. pagepro.co
  118. 118. <!-- <TaskList/> --> <template> <div class="container"> <h1>{{ title }}</h1> <ul> <Task v-bind:key="index" :task="task" :index="index" v-for="(task, index) in tasks" @deleteTask="deleteTask"/> </ul> </div> </template> <script> import Task from '@/components/Task.vue' export default { name: 'TaskList', components: { Task }, props: { title: String, tasks: Array }, </script> <App/> <TaskList/> <Task/> Component Communication - Pass Props. pagepro.co
  119. 119. <!-- <TaskList/> --> <template> <li class="c-task" v-bind:class="task.done ? 'is-done' : ''"> <input v-model="task.done" type="checkbox"/> <span>{{ index + 1 }}. </span> <span> {{ task.name }} </span> <span class="c-btn-delete" v-on:click="deleteTask(index)">X</span> </li> </template> <script> export default { name: 'Task', props: { task: Object, index: Number }, methods: { deleteTask: function (taskId) { this.$emit('deleteTask', taskId) } } } </script> <App/> <TaskList/> <Task/> Component Communication - Pass Props. pagepro.co
  120. 120. Component Communication (Emit). pagepro.co
  121. 121. Component Communication - Emit. <!-- <TaskList/> --> <template> <li class="c-task" v-bind:class="task.done ? 'is-done' : ''"> <input v-model="task.done" type="checkbox"/> <span>{{ index + 1 }}. </span> <span> {{ task.name }} </span> <span class="c-btn-delete" v-on:click="deleteTask(index)">X</span> </li> </template> <script> export default { name: 'Task', props: { task: Object, index: Number }, methods: { deleteTask: function (taskId) { this.$emit('deleteTask', taskId) } } } </script> <App/> <TaskList/> <Task/> pagepro.co
  122. 122. <!-- <TaskList/> --> <template> <div class="container"> <h1>{{ title }}</h1> <ul> <Task v-bind:key="index" :task="task" :index="index" v-for="(task, index) in tasks" @deleteTask="deleteTask"/> </ul> </div> </template> <script> import Task from '@/components/Task.vue' export default { name: 'TaskList', components: { Task }, props: { title: String, tasks: Array }, </script> <App/> <TaskList/> <Task/> Component Communication - Emit. pagepro.co
  123. 123. Component Communication - Receive Emit. <!-- <App/> --> <template> <div id="app"> <TaskList :title="listTitle" :tasks="filteredTasks" @deleteTask="deleteTask"/> </div> </template> <script> import TaskList from '@/components/TaskList.vue' export default { name: 'app', components: { TaskList }, data: function () { return { listTitle: 'Todo list', tasks: [...] } }, methods: { deleteTask: function (taskId) { this.tasks.splice(taskId, 1) } } } </script> <App/> <TaskList/> <Task/> pagepro.co
  124. 124. Component Communication (Props). pagepro.co
  125. 125. Practice. pagepro.co
  126. 126. pagepro.co
  127. 127. pagepro.co Thank You :)

×