Vue 2020

Only a Sith deals in absolutes

T'as vu ?

CC-BY-NC-4.0 / Feb. 2020 / Loïc TRUCHOT

L'approche VUE

Le meilleurs des deux mondes

  • Declarative rendering (Angular)
    • Les templates ont une syntaxe non-javascript (v-for, v-if...)
  • Virtual DOM & Component composition (React)
    • Component = HTML + CSS + JS d'un élément complet (ex: bouton)
    • Un component peut-être instancié x fois, avec des propriété différentes
    • Un component peut en contenir d'autres, la page elle-même est une composition de components
  • Ni classe, ni fonction:
    • Les components sont des instances

Où Vit VUE?

Workshop

  • Installer le CLI de vue
    • npm i -g @vue/cli
  • Créer un projet Vue.js
    • vue create plantation
    • cd plantation
    • npm run serve
  • Ajouter l'extension "Vetur" à Visual Code
  • Afficher "Ma petite plantation" dans le controlleur, de telle manière que cela apparaisse dans le H1
  • Ajouter lodash au projet, via NPM
  • Ajouter une propriété "data" au composant HelloWorld
    • c'est une fonction
    • elle retourne un objet qui contient les propriétés utilisables dans le template
  • Une de vos propriétés utilise lodash

CLI

Bonus: comment faire pour utiliser lodash directement dans le template ?

La simplicite incarnée

  • 3 balises pour les 3 langages du web
    • <template> contient le HTML / View
    • <script> contient le JavaScript / Controller
    • <style> contient le CSS
  • un composant simple et logique
    • name: le nom
    • props: les noms et type des propriétés passées l'instance
    • components: les components utilisables
    • data: une fonction retournant les données réactives
    • methods: les méthodes reactives du controlleur

La Sobriété assumée

  • du template-binding naturel, avec une seul règle
    • interpolation avec {{ }}
    • v-*
      • v-if/v-else-if/v-else, v-show
      • v-for pour array (item, index) in [] ET objets (value, key) in {}
      • v-on pour les events (@)
      • v-bind pour le "attributs/propriétés" (:)
      • v-text et v-html pour innerText et innerHTML

Workshop

  • Créer un nouveau component "PlantList"
  • Il contient en data une liste de 3 plantes présentent chez vous
  • Chacune a un nom, un age, une image, une pièce de vie et un avis d'arrosage: true ou false
  • Toutes ces données sont présentées dans une liste
  • Si la plante doit être arrosée, un bouton "arroser" apparaît,  et il fonctionne

IOT en vue.js

  • Créer un composant "Plant" qui est instancié pour chaque plantes du tableau

Bonus: trouver un moyen de prévenir le composant parent que toutes les plantes sont arrosées ?

Un routeur très en vue

  • Optionnel mais dépendance officielle (vue-router)
  • Complexité incrémentale
    • <router-view> et <router-link to="/test">
    • nesting, preload, dynamique, params...
  • Très proche d'angular ou react
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
  mode: "history",
  routes: [
    { path: '/hello', component: HelloWorld }
  ]
});
new Vue({
  router,
  template: `<router-view class="view"></router-view>`
}).$mount('#app');

Workshop

  • npm i --save vue-router
  • installer le routeur en vous inspirant de l'exemple
  • Faite de votre liste de plante  la route d'accueil "/"
  • Créer un component "documentation" et sa route du même nom, pour documenter votre installation IOT
  • Le menu présent sur toutes les pages donne accès à ces deux routes grâce à des liens

En route

Bonus: prévoir un route pour chacune de vos plantes grâce à un paramètre: /plant/:slug

Bonus: prévoir une 404

THANK'S EVERYONE
It's finally done ! See you soon

Vue 2020 - Only a Sith deals in absolutes

By Loïc TRUCHOT

Made with Slides.com

Vue 2020 - Only a Sith deals in absolutes

Introduction à Vue, en français et sans compromis.

  • 365

More from Loïc TRUCHOT