INTRODUCTION TO VUE

Nicolas Payot

👉 https://nicolaspayot.com/

Sahbi Ktifa

Front-End Developer

Full Stack Developer

👉 https://github.com/sahbi-ktifa

👉 https://twitter.com/SahbiKtifa

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!

https://github.com/nicolaspayot/vue-ttt-game

Made with Slides.com