Introduction to modern front-end with Vue.js

Introduction to modern front-end
with Vue.js
Ivan Nikulin
Monterail Academy, Nov. 2017

<html>
<head>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Hello world!
index.html

Hello Vue world!
index.vue
<template>
<h1>Hello Vue world!</h1>
</template>
terminal
npm install -g vue-cli@2.8.0
vue build index.vue

Hello Vue world!
index.vue
<template>
<h1>Hello Vue world!</h1>
</template>
<style>
h1 {
font-family: "Helvetica";
color: #1a94da;
}
</style>

Hello Vue.js world!
index.vue
<template>
<h1>Hello {{ title }} world!</h1>
</template>
<style>
h1 {
color: #1a94da;
}
</style>
...
<script>
export default {
data () {
return {
title: 'Vue.js'
}
}
}
</script>

Hello wild world!
index.vue
<template>
</template>
<style>
h1 {
color: #1a94da;
}
</style>
...
<script>
export default {
data () {
return {
title: 'wild'
}
}
}
</script>

Hello maths world!
index.vue
<template>
<div>
<pre>{{ a }} + {{ b }} = {{ a + b }}</pre>
</div>
</template>
<style>
h1 {
color: #1a94da;
}
</style>
...
<script>
export default {
data () {
return {
title: 'math',
a: 2,
b: 3
}
}
}
</script>

Hello maths world!
index.vue
<template>
<div>
<pre :title="description">
{{ a }} + {{ b }} = {{ a + b }}
</pre>
</div>
</template>
<style>
h1 {
color: #1a94da;
}
</style>
...
<script>
export default {
data () {
return {
title: 'math',
a: 2,
b: 3,
description: 'formula'
}
}
}
</script>

Let’s become a Vue.js developer!
index.vue
<template>
<div>
<h1>
Click below to become a Vue.js developer.
</h1>
<button>
Become a Vue.js developer
</button>
</div>
</template>
...
<style>
h1 {
color: #41b883;
}
</style>

index.vue
<template>
<div>
<h1>
Congratulations, you’re a Vue.js developer!
</h1>
<h1>
</h1>
<button>
</button>
</div>
</template>
...
<style>
h1 {
color: #41b883;
}
</style>

index.vue
<template>
<div>
<h1>
Congratulations, you are a Vue.js developer!
</h1>
<h1>
</h1>
<button>
</button>
</div>
</template>
<script>
export default {
data () {
return {
isVueDeveloper: false
}
}
}
</script>

index.vue
<template>
<div>
<h1 v-if="isVueDeveloper">
</h1>
<h1>
</h1>
<button>
</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

isVueDeveloper: false isVueDeveloper: true

index.vue
<template>
<div>
</h1>
<h1 v-if="!isVueDeveloper">
</h1>
<button>
</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

index.vue
<template>
<div>
</h1>
<h1 v-if="!isVueDeveloper">
</h1>
<button @click="isVueDeveloper = true">
</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

index.vue
<template>
<div>
</h1>
<h1 v-else>
</h1>
<button @click="isVueDeveloper = true">
</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

index.vue
<template>
<div>
</h1>
<h1 v-else>
</h1>
<button @click="becomeVueDeveloper">
</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
becomeVueDeveloper () {
this.isVueDeveloper = true
}
}
}
</script>

What is ES6 anyway?
ES6
<script>
export default {
data () {
return {
}
},
methods: {
becomeVueDeveloper () {
}
}
}
</script>
ES5
<script>
module.exports = {
data: function () {
return {
}
},
methods: {
becomeVueDeveloper: function () {
}
}
}
</script>

Let’s become a better Vue.js developer!
index.vue
<template>
<div>
<h1>
Click 5 times to become a better Vue.js developer.
</h1>
<button>
Become a better Vue.js developer
</button>
</div>
</template>
...
<style>
h1 {
color: #41b883;
}
</style>

index.vue
<template>
<div>
<h1>
Click {{ clicksLeft }} times to become
a better Vue.js developer.
</h1>
<button>
</button>
</div>
</template>
...
<script>
export default {
data () {
return {
clicksLeft: 5
}
}
}
</script>

index.vue
<template>
<div>
<h1>
</h1>
<button @click="decrementClicks">
</button>
</div>
</template>
<script>
export default {
data () {
return {
clicksLeft: 5
}
},
methods: {
decrementClicks () {
this.clicksLeft -= 1
}
}
}
</script>

index.vue
<template>
<div>
<h1>
</h1>
</button>
</div>
</template>
<script>
export default {
data () {
return {
clicksLeft: 5
}
},
methods: {
if (this.clicksLeft > 0) {
}
}
}
}
</script>

index.vue
<template>
<div>
<h1 v-if="clicksLeft === 0">
Congratulations, you are a better Vue.js developer!
</h1>
<h1 v-else>
</h1>
</button>
</div>
</template>
<script>
export default {
data () {
return {
clicksLeft: 5
}
},
methods: {
}
}
}
}
</script>

Looks familiar…
Before
<template>
<div>
</h1>
<h1 v-else>
</h1>
<button @click="becomeVueDeveloper">
</button>
</div>
</template>
Now
<template>
<div>
<h1 v-if="clicksLeft === 0">
Congratulations, you are a better
Vue.js developer!
</h1>
<h1 v-else>
</h1>
</button>
</div>
</template>

index.vue
<template>
<div>
<h1 v-if="isBetterVueDeveloper">
Congratulations, you are a better
Vue.js developer!
</h1>
<h1 v-else>
</h1>
</button>
</div>
</template>
<script>
export default {
data () {
return {
clicksLeft: 5
}
},
computed: {
isBetterVueDeveloper () {
return this.clicksLeft === 0
}
},
methods: {
}
}
}
}
</script>

What vs How?
Declarative (yay!)
● what should be shown
● what data means
● what happens on interaction
Imperative (nay)
● how should be rendered
● how data is computed
● how to update after changes
WHAT HOW

Let’s become a super Vue.js developer!
index.vue
<template>
<div>
<h1>
Check all things below to become a super Vue.js developer 0/4
</h1>
<ul>
<li><input type="checkbox"> knows v-if & v-else</li>
<li><input type="checkbox"> knows methods & computed</li>
<li><input type="checkbox"> knows v-model</li>
<li><input type="checkbox"> knows v-for</li>
</ul>
</div>
</template>
<style>
h1 {
color: #41b883;
}
li {
list-style: none;
font-size: 30px;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
}
</style>

index.vue
<template>
<div>
<h1>
Check all things below to become a super
Vue.js developer {{ checkedCount }}/4
</h1>
<ul>
<li>
<input type="checkbox" v-model="isChecked">
knows v-if & v-else
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
isChecked: false
}
},
computed: {
checkedCount () {
if (this.isChecked) return 1
return 0
}
}
}
</script>

index.vue
<template>
<div>
<h1>
Check all things below to become a super Vue.js developer
{{ checkedCount }}/4
</h1>
<ul>
<li>
<input type="checkbox" v-model="isChecked1"> knows v-if & v-else
</li>
<li>
<input type="checkbox" v-model="isChecked2"> knows methods & computed
</li>
<li>
<input type="checkbox" v-model="isChecked3"> knows v-model
</li>
<li>
<input type="checkbox" v-model="isChecked4"> knows v-for
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
isChecked1: false,
isChecked2: false,
isChecked3: false,
isChecked4: false
}
},
computed: {
checkedCount () {
// A lot of ifs...
}
}
}
</script>

index.vue
<template>
<div>
<h1>
</h1>
<ul>
<li v-for="item in items">
<input type="checkbox" v-model="item.isChecked">
knows v-if & v-else
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{ isChecked: false },
{ isChecked: false }
]
}
},
computed: {
checkedCount () {
return 0 // TODO
}
}
}
</script>

index.vue
<template>
<div>
<h1>
</h1>
<ul>
{{ item.description }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{ isChecked: false, description: 'knows v-if & v-else' },
{ isChecked: false, description: 'knows methods & computed' },
{ isChecked: false, description: 'knows v-model' },
{ isChecked: false, description: 'knows v-for' }
]
}
},
computed: {
checkedCount () {
return 0 // TODO
}
}
}
</script>

Imperative (how)
computed: {
checkedCount () {
let count = 0
for (const item of this.items) {
if (item.isChecked) {
count += 1
}
}
return count
}
}
Declarative (what)
computed: {
checkedCount () {
return this.items
.filter(item => item.isChecked)
.length
}
}

index.vue
<template>
<div>
<h1 v-if="isSuperVueDeveloper">
Congratulations, you are a super Vue.js developer!
</h1>
<template v-else>
<h1>
{{ checkedCount }}/4
</h1>
<ul>
</li>
</ul>
</template>
</div>
</template>
<script>
export default {
data () {
...
},
computed: {
checkedCount () {
return this.items
.filter(item => item.isChecked)
.length
},
isSuperVueDeveloper () {
return this.checkedCount === 4
}
}
}
</script>
different stuff

Magical numbers
computed: {
return this.checkedCount === 4
}
}
Declarative logic
computed: {
return this.checkedCount === this.items.length
}
}

index.vue
<template>
<div>
</h1>
<template v-else>
<h1>
{{ checkedCount }}/{{ items.length }}
</h1>
<ul>
<li v-for="item in items" :key="item.description">
</li>
</ul>
</template>
</div>
</template>

All together now!!!
first-challenge.vue
<template>
<div>
...
second-challenge.vue
<template>
<div>
<h1 v-if="isBetterVueDeveloper">
Congratulations, you are a better Vue.js developer!
...
third-challenge.vue
<template>
<div>
...
<template>
<main>
<FirstChallenge />
<hr />
<SecondChallenge />
<hr />
<ThirdChallenge />
</main>
</template>
<script>
import FirstChallenge from './first-challenge'
import SecondChallenge from './second-challenge'
import ThirdChallenge from './third-challenge'
export default {
components: {
FirstChallenge,
SecondChallenge,
ThirdChallenge
}
}
</script>
index.vue

What we learned
Vue.js
● data binding
● v-if, v-else
● methods
● computed
● v-model
● v-for, :key
Front-end
● components
● declarative style
● DRY

What’s yet to learn
● communication between components
● routing
● scoped styles
● transitions
● dynamic styles
● Pug, SCSS/Sass/Stylus/PostCSS
● ... everything else!

Where to learn
https://vuejs.org/v2/guide/

Introduction to modern front-end with Vue.js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to modern front-end with Vue.js

Similar to Introduction to modern front-end with Vue.js (20)

More from monterail

More from monterail (9)

Recently uploaded

Recently uploaded (20)

Introduction to modern front-end with Vue.js