VUE

.JS

INTRODUCTION + WORKSHOP

alex - 38

DEv Fullstack - applicatif

VUE fan boy2017

@xlanex6

VUE

Evan You

2016

Community driven

167 k ⭐

VUE

Evolutif

Déclaratif

Facile lire / écrire

Puissant

Elégant

Productif

VUE

REACT - ANGULAR

Virtual DOM

State ( optionel )

Single File Component

Puissant

Trop bien ...

VUE

VOUS et VUE ?

VOUS et FRAMEWORKS ?

VOUS et ES6 ?

VOUS et JavaScript ?

Programme

THEORIE

PRATIQUES ++

MISSIONS + SOLUTIONS

LIVE CODE

RESSOURCES

MODULE

BEST PRATICES

SETUP ?

https://github.com/xlanex6/workshop-vue

⭐

FORK ou CLONE

LiveCODE

001

PROGRESSIF

VSC

LiveCODE

002

COMPOSANT BASE

VSC

DIRECTIVES

?

Les directives sont des attributs spéciaux avec le préfixe v-___

Les valeurs attendues pour les attributs de directives sont

une unique expression JavaScript

v-if / v-else

v-if != v-show

<div v-if="machin === true ">
  Là vous me voyez
</div>
<div v-else>
  Là vous ne me voyez pas
</div>

v-for

<div v-for="item in items" :key="item">
  {{ item }}
</div>

//
...
data() {
	return {
    	items: ['Vue', 'React', 'Angular', 'Polymer']
    }
},	
...

v-model

<input type="text" v-model="email">
//
...
data() {
	return {
    	email: "alex@atypeak.dev"
    }
},	
...

v-once

v-html

v-pre

custom directives

Plus tard

...

LiveCODE

002

COMPOSANT BASE

MISSION 2

VSC

DIRECTIVES

v-BIND || :

DIRECTIVES

v-BIND || :

DOCUMENTATION >

<!-- lie un attribut -->
<img v-bind:src="imageSrc">

<!-- nom d'attribut dynamique (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- notation abrégée -->
<img :src="imageSrc">

DIRECTIVES

v-on || @

DOCUMENTATION >

DIRECTIVES

v-on || @


<button v-on:click="faireCeci"></button>

<button v-on:[event]="doThis"></button>

<button v-on:click="faireCela('hello', $event)"></button>

<button @click="faireCeci"></button>

<button @[event]="doThis"></button>

METHODS

COMPOSANTS

COMPUTED

WATCH

METHODS

COMPOSANTS

...
 data() {
    return {
      name: null
  },
  methods: {
    defineName(name) {
      this.name = name;
    }
  }
 ...

MODIFIE LES DATA

pas cache

executé sur appel

METHODS

COMPOSANTS

COMPUTED

WATCH

COMPUTED

COMPOSANTS

// template

{{ name }}
{{ salutation }}
// script
...
 data() {
    return {
      name: 'machin'
  },
  computed: {
    salutation() {
     return `Salut ${this.name.toUpperCase()}, 
	 ton nom a ${this.name.length} lettres.`
    }
  }
 ...

RETOURNE LES DATA

modifié, calculé ...

cache

RE-calculé si dependance modifié

METHODS

COMPOSANTS

COMPUTED

WATCH

watchers

COMPOSANTS

// template

<input v-model="name">
  
// script
...
 data() {
    return {
      name: 'machin'
  },
  watch: {
    name(value, oldValue) {
     	// faire des trucs ici...
    }
  }
 ...

REACTIF

nested

GET / SET

LiveCODE

002

COMPOSANT BASE

MISSION 2.1

VSC

local

Global

COMPOSANTS

local

COMPOSANTS

// dans le composant parent.vue

<script>
import enfant from "./components/enfant";
export default {
  components: { enfant },
 ...

GLOBAL

COMPOSANTS

// dans main.js

import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

Parent

enfants

COMPOSANTS

Parent

enfant

COMPOSANTS

Parent

enfant

props

event

Parent

enfant

props

Parent

enfant

props

<parent>
	...
	<enfant v-bind:key="value" >
		...
	</enfant>
    ...
</parent>

Parent

enfant

props

<user-list>
	...
	<user :user="singleUserValue" >
		...
	</user>
    ...
</user-list>

exemple parent

Parent

enfant

props

{{ user }}
...
props: ['user'],
...
this.user

exemple enfant

<user-list>
	...
	<user :user="singleUserValue" >
		...
	</user>
    ...
</user-list>

exemple parent

Parent

enfant

event

...
this.$emit('eventName', payload )
...

Depuis le composant enfant

Parent

enfant

event

...
<button 
@click="defineFavorite(user.name)"> 
⭐ 
</button>
...
props: ["user"],
  methods: {
    defineFavorite(name) {
      this.$emit("favoriteUser", name);
    }
  }
...

Exemple Enfant

Exemple Parent

Parent

enfant

event

...
<button 
@click="defineFavorite(user.name)"> 
⭐ 
</button>
...
props: ["user"],
  methods: {
    defineFavorite(name) {
      this.$emit("favoriteUser", name);
    }
  }
...

Exemple Enfant

<user-list>	
 ...
  <user 
    v-bind:user="singleUserValue" 
    v-on:favoriteUser="defineFavorite">
    ..
  </user>
 ...
</user-list>


data() {
	return {
    	favorite: null
    }
}
...
methods: {
	defineFavorite(name) {
      this.favorite = name;
    }
}

Exemple Parent

LiveCODE

003

VUE-CLI

MISSION

VSC

SLOT

COMPOSANTS

SLOT

COMPOSANTS

// Composant myBtn.vue
...
<template>
  <button class="text-xl mx-2 my-1 
      bg-blue-200 hover:bg-blue-600" 
      type="submit"
     >

    <slot></slot>

  </button>
</template>
...

SLOT

COMPOSANTS

// Composant myBtn.vue
...
<template>
  <button class="text-xl mx-2 my-1 
      bg-blue-200 hover:bg-blue-600" 
      type="submit"
     >

    <slot></slot>

  </button>
</template>
...

// dans le parent
...
<my-btn>
	Mon texte
</my-btn>
...

LIFECYCLE HOOK

beforeCreate()

created()

beforeMount()

mounted()

beforeUpdate()

updated()

beforeDestroy()

destroyed()

LIFECYCLE HOOK

beforeCreate()

created()

beforeMount()

mounted()

beforeUpdate()

updated()

beforeDestroy()

destroyed()

NUXT

LiveCODE

004

NUXT

MISSION

VSC

VUEX

COMP

VUEX

COMP

STATE

STORE

COMP

VUEX

STATE

STORE

state

getters

mutations

actions

data()

computed

methods

async methods

STORE

COMPOSANT

Ressources

DOC VUE js

DOC NuxtJS

@vue___

EN - Vue Mastery

Awesome vue

dev.to // medium

Vue intro

By Alex Duval