KEMBAR78
An introduction to Vue.js
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 full-time on Vue.js
framework
pagepro.co
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-companies-use-Vue-js
ā— GitLab
ā— Behance
ā— Livestorm
ā— Fox News
ā— Alibaba
pagepro.co
Why Vue.js?
ā— Easy to start
ā— Vue template file component
ā— Virtual DOM
ā— Scoped css
ā— Built-in Transitions & Animation support
ā— Documentation
ā— Community
ā— Ecosystem
pagepro.co
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
How it works?
ā— Inspired by Model-view-
viewmodel (MVVM)
architectural pattern.
ā— Dependency tracking
system with getters and
setters
pagepro.co
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.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
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
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
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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
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
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
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
Interpolations.
pagepro.co
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
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
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
}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
msg: '<h1>Hello <strong>World</strong></h1>'
}
}
}
</script>
pagepro.co
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
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
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
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
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
Directives.
pagepro.co
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
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
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
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
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" 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
Watchers, Filters
& Computed Properties.
pagepro.co
Watchers.
pagepro.co
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
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
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>
Computed Properties.
pagepro.co
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
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
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
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
Filters.
pagepro.co
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
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
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
Methods.
pagepro.co
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
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
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
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 }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
message: ''
}
}
}
</script>
pagepro.co
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
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
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
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
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
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
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>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
}
}
}
</script>
pagepro.co
<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
Class Binding
(Passing Array).
pagepro.co
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
<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.
Style Binding.
pagepro.co
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
<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.
<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
<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.
Conditional Rendering.
pagepro.co
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
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
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
<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
Transitions & Animations.
pagepro.co
<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
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">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
<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
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>
export default {
name: 'MessageBox',
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
}
</script>
List Rendering - Array.
pagepro.co
<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
<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
List Rendering
Object.
pagepro.co
<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
<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
List Rendering - Object.
pagepro.co
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
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
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
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
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"/>
</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
<!-- <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
<!-- <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
<!-- <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
Component Communication
(Emit).
pagepro.co
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
<!-- <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
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
Component Communication
(Props).
pagepro.co
Practice.
pagepro.co
pagepro.co
pagepro.co
Thank You :)

An introduction to Vue.js

  • 1.
  • 2.
  • 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.
  • 5.
  • 6.
    Which big companiesuse 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.
    Why Vue.js? ā— Easyto start ā— Vue template file component ā— Virtual DOM ā— Scoped css ā— Built-in Transitions & Animation support ā— Documentation ā— Community ā— Ecosystem pagepro.co
  • 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.
    How it works? ā—Inspired by Model-view- viewmodel (MVVM) architectural pattern. ā— Dependency tracking system with getters and setters pagepro.co
  • 10.
  • 11.
  • 12.
  • 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.
    Vue component VSBasic 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.
    Vue component VSBasic 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.
    Vue component. <!-- BasicVue 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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    <!-- Basic Vuetemplate - ./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.
    Structure of Vuecomponent. 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.
    Structure of Vuecomponent. 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.
    Structure of Vuecomponent. 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.
  • 28.
    Interpolations - Text. <template> <divid="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.
    Interpolations - Text. <template> <divid="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.
    Interpolations - Aboutdata. pagepro.co
  • 31.
    Interpolations - RawHTML. <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.
    Interpolations - RawHTML. <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.
    Interpolations - Attributes. <template> <divid="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.
    Interpolations - Attributes. <template> <divid="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.
    Interpolations - JavaScriptexpression. <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.
    Interpolations - JavaScriptexpression. <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.
  • 38.
    Directives - V-BIND. <template> <divid="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.
    Directives - V-BIND. <template> <divid="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.
    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.
    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.
    Directives - V-ON- Click and key events. pagepro.co
  • 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.
    Watchers, Filters & ComputedProperties. pagepro.co
  • 45.
  • 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.
    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.
    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.
  • 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.
    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.
    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.
    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.
  • 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.
    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.
    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.
  • 59.
    Methods. <template> <div id="app"> <p> Bulbstate : {{ 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.
    Methods. <template> <div id="app"> <p> Bulbstate : {{ 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.
    Methods. <template> <div id="app"> <p> Bulbstate : {{ 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.
  • 63.
  • 64.
    Binding - Inputtext. <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.
    Binding - Inputtext. <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.
    Binding - Checkbox. <template> <divid="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.
    Binding - Checkbox. <template> <divid="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.
    Binding - MultiCheckbox. <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.
    Binding - MultiCheckbox. <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.
    Binding - Select. <template> <divid="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.
  • 72.
  • 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.
    <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.
  • 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.
    <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.
  • 79.
    Style Binding. <template> <div id="app"> <divv-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.
    <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.
    <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.
    <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.
  • 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.
    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.
    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.
    <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.
  • 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.
    Enter/Leave & ListTransitions. pagepro.co
  • 91.
    Enter/Leave & ListTransitions. pagepro.co
  • 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.
    <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.
    Transitions & Animations- Groups. pagepro.co
  • 95.
  • 96.
  • 97.
    <template> <div id="app"> <ul> <li v-for="itemin 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.
    <template> <div id="app"> <ul> <li v-for="itemin 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.
    <template> <div id="app"> <ul> <li v-for="itemin 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.
  • 101.
    <template> <div id="app"> <ul> <li v-for="valuein 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.
    <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.
    List Rendering -Object. pagepro.co
  • 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.
    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.
    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.
    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.
  • 109.
    Component Communication -Basics. pagepro.co
  • 110.
    Component Communication -Basics. pagepro.co
  • 111.
    Component Communication -Basics. pagepro.co
  • 112.
    Component Communication -Basics. <App/> pagepro.co
  • 113.
    Component Communication -Basics. <App/> <TaskList/> pagepro.co
  • 114.
    Component Communication -Basics. <App/> <TaskList/> <Task/> pagepro.co
  • 115.
  • 116.
    <App/> <TaskList/> <Task/> <!-- <App/> --> <template> <divid="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.
    <!-- <App/> --> <template> <divid="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.
    <!-- <TaskList/> --> <template> <divclass="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.
    <!-- <TaskList/> --> <template> <liclass="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.
  • 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.
    <!-- <TaskList/> --> <template> <divclass="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.
    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.
  • 125.
  • 126.
  • 127.