INTRODUCTION TO VUE
Nicolas Payot
Sahbi Ktifa
Front-End Developer
Full Stack Developer
Over the last 10 years, web pages became more and more powerful thanks to JavaScript ๐ช
code moved from server side to client side (browser)
= POOR JS CODE ๐
-
Approchable
-
Versatile
-
Performant
-
Maintanable
-
Testable
Component based development
<body>
<tweets>
<tweet text="This is my 1st tweet!"><tweet>
<tweet text="This is my 2nd tweet!"><tweet>
<tweet text="This is my 3rd tweet!"><tweet>
</tweets>
</body>
Component based development
<!-- tweet component -->
<div class="tweet-container">
<div class="username">@johndoe</div>
<div class="tweet-text">This is my 1st tweet!</div>
</div>
A component is an encapsulated set of behaviours / features / logics
A component has a defined interface that allows creation / reusability
ALL major JS frameworks use COMPONENTS
DOM INTERACTIONS
Text rendering
<div id="app">
<span>Hello {{ name }}!</span>
</div>
new Vue({
el: '#app',
data() {
return {
name: 'John Doe'
}
}
})
Text rendering
<div id="app">
<span>Hello {{ name }}!</span>
</div>
when name value changes, the HTML is updated
data object is reactive
Attributes
<button :disabled="buttonDisabled">Click me</button>
// ...
data() {
return {
buttonDisabled: true
}
}
Attributes
<a :href="url">Google</a>
// ...
data() {
return {
url: 'https://www.google.com'
}
}
Class binding
<div :class="{ 'is-active': isActive }"></div>
// ...
data() {
return {
isActive: true
}
}
is-activeย will be added to the div if isActiveย is true
Conditional rendering
<div v-if="quantity === 0">Nothing</div>
<div v-else-if="quantity > 5">Some</div>
<div v-else-if="quantity > 10">Some more</div>
<div v-else>Many</div>
v-else-if must follow v-if directive
v-else must follow v-ifย or v-else-if directive
List rendering
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
// ...
data() {
return {
names: ['John', 'Jane', 'Alice']
}
}
v-for ... ofย also works (closer to JavaScript standard)
List rendering
<ul>
<li v-for="(name, index) in names">
{{ index }} - {{ name }}
</li>
</ul>
// ...
data() {
return {
names: ['John', 'Jane', 'Alice']
}
}
COMPONENTS
The most powerful feature of Vue
.vue files
โ ๏ธ Available with
Webpack
and vue-loader
.vue files
Communication
PROPS
Every component instance has its own isolated scope
A prop is a custom template attribute
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
props: {
message: String
}
})
</script>
HelloWorld.vue
Static props
<!-- If registered as HelloWorld component -->
<HelloWorld message="Hello, World!" />
Hello, World!
Dynamic props
helloMessageย is dynamic and comes from HelloWorld's parent component
<HelloWorld :message="helloMessage" />
Props validation
// ...
props: {
propA: Number,
propB: [String, Number],
propC: {
type: String,
required: true
},
propD: {
type: Number,
default: 100
}
}
A prop type can be:
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
COMPUTED PROPERTIES
<div>
{{ message.split('').reverse().join('') }}
</div>
Sometimes, you need to transform data for display
In-template expressions are convenient but this ๐ is bad
๐ USE COMPUTED PROPERTIES FOR COMPLEX LOGIC
<div>
<span>{{ message }}</span>
<span>{{ reversedMessage }}</span>
</div>
A computed property is a reactive function that returns data in another form
// ...
data() {
return { message: 'Hello, World!' }
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
Hello, World! !dlroW ,olleH
<div>
<span>{{ message }}</span>
<span>{{ reversedMessage }}</span>
</div>
The value of reversedMessage will always be dependent of message
๐
Hello, World! !dlroW ,olleH
Every time message changes, reversedMessage is updated
this.reversedMessage // Ok -> !dlroW ,olleH
this.reversedMessage() // Error
A computed property is a getter function (can't pass arguments)
HANDLING EVENTS
<span>{{ counter }}</span>
<button @click="add">Add 1</button>
Listening to DOM events
// ...
data() {
return { counter: 0 }
},
methods: {
add() {
this.counter++
}
}
<button @click="hello('John')">Hello</button>
Listening to DOM events
// ...
methods: {
hello(name) {
console.log(`Hello ${name}`)
}
}
Event's listeners (= methods) can have arguments
<!-- Child component template -->
<button @click="add">Add 1</button>
Communication from child to parent component
// Child component instance
// ...
methods: {
add() {
this.$emit('addNumber', 1)
}
}
Child component emits a custom event
<!-- Parent component template -->
<Child @addNumber="add"></Child>
Communication from child to parent component
// Parent component instance
// ...
methods: {
add(value) { // Here value is 1
this.counter += value
}
}
Parent component listens to child custom event
LET'S PRACTICE!
Requirements
- Git
- Node.js >= 12.16.1
- npm >= 6.13.1
- Visual Studio Code with the Vetur extension
- Recent version of Google Chrome with the Vue.js devtools extension
- Read the rules ๐ค
- Go to step 0 ๐
- Have fun ๐ฅณ
- And finally, do not hesitate to ask questions โ๏ธ
Introduction to Vue [Epitech]
By Nicolas Payot
Introduction to Vue [Epitech]
- 870