An introduction to Vue.js

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

Enough Introduction !
pagepro.co

Vue component. 
<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.

<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js
App"/>
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style scoped>
div {
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.
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style scoped>
div {
color: #2c3e50;
}
</style>
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style scoped>
div {
color: #2c3e50;
}
</style>
Vue component - view template.
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js
App"/>
</div>
</template>
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style scoped>
div {
color: #2c3e50;
}
</style>
Vue component - script.
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style scoped>
div {
color: #2c3e50;
}
</style>
Vue component - style.
<style scoped>
div {
color: #2c3e50;
}
</style>
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style lang="scss" scoped>
div {
color: #2c3e50;
}
</style>
Vue component - style preprocessor.
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
div {
color: #2c3e50;
}
</style>
Vue component - style scoped.
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
div {
color: #2c3e50;
}
</style>

<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
pagepro.co

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
div {
color: #2c3e50;
}
</style>

<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>

<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

export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {}
};
pagepro.co

export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {}
};
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {}
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 - 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 - V-BIND.
<template>
<div id="app">
<img
v-bind:title="title"
v-bind:src="src"
v-bind:alt="'description-' + alt" />

</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>

<button v-on:click="counter += 1">Add</button>

<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>

<button v-on:click="counter += 1">Add</button>

<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.
<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',
}
},
watch: {
},
}
}
}
</script>
watch: {
},
}
}
pagepro.co

Watchers.
<script>
export default {
name: 'app',
data: function () {
return {
firstName: 'Marek',
}
},
watch: {
},
}
}
}
</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',
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

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: {
}
}
pagepro.co

Filters.
<template>
<div id="app">
<p>{{ message | capitalize }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
}
},
filters: {
}
}
}
</script>
<p>{{ message }}</p>
pagepro.co

Filters.
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
}
},
filters: {
}
}
}
</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 () {
console.log('E.g. Event : ', event.currentTarget)
this.bulb = !this.bulb
}
}
}
</script>
pagepro.co

Methods.
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
bulb: true
}
},
methods: {
}
}
}
</script>
methods: {
}
}
pagepro.co

Methods.
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
bulb: true
}
},
methods: {
}
}
}
</script>
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">
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
message: ''
}
}
}
</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>
pagepro.co

Binding - Checkbox.
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
checked: false
}
}
}
</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
(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 }">

</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]">

</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]">

</div>
</div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
</script>
pagepro.co
Class Binding - Passing Array.

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>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
}
</script>
pagepro.co
Style Binding.

<template>
<div id="app">
</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>
</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>
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>
pagepro.co

Transitions & Animations - Groups.
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" v-bind:key="item.message">
{{ item.message }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'MessageBox',
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
}
</script>
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>
pagepro.co

pagepro.co

<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

<App/>
pagepro.co

<App/>
<TaskList/>
pagepro.co

<App/>
<TaskList/>
<Task/>
pagepro.co

Component Communication
(Props).
pagepro.co

<App/>
<TaskList/>
<Task/>

<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

<template>
<div id="app">
<TaskList
:title="listTitle"
:tasks="filteredTasks"/>
</div>
</template>
<script>
export default {
name: 'app',
components: {
TaskList
},
data: function () {
return {
tasks: [...]
}
}
}
</script>
<App/>
<TaskList/>
<Task/>
pagepro.co

<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/>
pagepro.co

<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

Component Communication
(Emit).
pagepro.co

Component Communication - Emit.
<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: {
this.$emit('deleteTask', taskId)
}
}
}
</script>
<App/>
<TaskList/>
<Task/>
pagepro.co

<template>
<div class="container">
<h1>{{ title }}</h1>
<ul>
<Task
v-bind:key="index"
:task="task"
:index="index"
v-for="(task, index) in tasks"
</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.

<template>
<div id="app">
<TaskList
:title="listTitle"
:tasks="filteredTasks"
</div>
</template>
<script>
export default {
name: 'app',
components: {
TaskList
},
data: function () {
return {
tasks: [...]
}
},
methods: {
this.tasks.splice(taskId, 1)
}
}
}
</script>
<App/>
<TaskList/>
<Task/>
pagepro.co

An introduction to Vue.js

More Related Content

What's hot (20)

Similar to An introduction to Vue.js (20)

Recently uploaded (20)

An introduction to Vue.js