Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 27, 2021 01:21 pm GMT

Apprendre Vue.js 3 - Jour 1 : concepts de base

Si vous dsirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Srie d'article sur Vue.js 3

Bonjour, cici est le premier article d'une srie d'article qui couvrira le monde de Vue 3. Cet article ce veut un rsum de mes notes et du coup un excellent aide-mmoire (cheat sheet)

Quest ce que Vue.js ?

Vue.js est un framework progressif pour JavaScript utilis pour crer des interfaces Web et des applications d'une page (SPA). Vue.js peut galement tre utilis pour le dveloppement d'applications de bureau et mobiles avec les frameworks Ionic et Electron.

Pourquoi Vue.js

Avant dutiliser un framework il est important de comprendre dans quel contexte il savre le bon outils.

Voici donc la liste des diffrentes raisons qui pourraient justifier lutilisation dun framework comme Vue.js

Organisation de votre code
Efficacit/rapidit de dveloppement
Rutilisabilit du code
Maintenance et future dveloppement

Extensions VSCode pour tre productif avec Vue

Vetur : Outils d'aide coder comme la coloration syntaxique, le formating, intelliSense, Emmet, etc.
Vue VsCode Snippets : Raccourci clavier pour ajouter des snippets dans votre code
settings.json ajoute

emmet.includeLanguages: {    'vue' : 'html',        'vue-html': 'html'}

Comment Utiliser/installer Vue.js

Vue est un framework dit progressif. Vous pouvez lutiliser juste dans une petite partie de votre page web ou si vous prfrez vous pouvez construire une application entire avec Vue.js.

Voici ce qu'il faut faire pour utiliser Vue seulement dans une partie de votre page web :

Ajouter un tag 'script' qui contient un lien vers la librairie Vue.js
Ajouter un autre tag 'script' qui contient un lien vers votre fichier application Vue (app.js)
Crer une div avec id="app" qui servira de conteneur au rendu de votre application Vue.

Voici un exemple d'une page utilisant Vue.js

(index.html)

<html>    <head>        <title>Ma page Vue.js</title>    </head>    <body>        <div id="app">            {{ title }}        </div>        <script src="https://unpkg.com/vue@next"></script>        <script src="./app.js"></script>    </boby></html>

(app.js)

// fonction qui permet d'initialiser Vue.jsVue.createApp({    data() {        return {            title: "Hello Word Vue"        }    }}).mount('#app') // mount spcifie que l'application Vue s'affichera dans la div avec id="app"

Variables Reactive

La fonction data() sert crer des variables ractives qui seront utilis dans votre application Vue. Chaque fois qu'une variable ractive est modifi, si elle est affich ou utilis dans votre page, Vue la mettra jour immdiatement.

Pour afficher une variable ractive ou une expression dans votre page vous devez utiliser les doubles crochets Vue remplacera le contenu de l'expression par sa valeur

// variable{{ title }}// expression{{ title.toUpperCase() }}

Les directives Vue.js

Les directives Vue.js sont des attributs html qui peuvent tre insr dans votre page afin de modifier le rendu de votre application Vue.

Voici la liste des directives disponible:

v-bind

Permet d'assigner une expression un attribut. Vue va remplacer l'expression par sa valeur

(ex: image_url : "http://www.exemple.com/car.jpg"

<img v-bind:src="image_url" />// ou syntaxe raccourci<img :src="image_url" />

v-once

Avec la directive v-once Vue va interpol l'expression seulement une fois. L'expression sera donc ignor pour tous les autres rafraichissement

<div v-once>   {{ title }}</div>

v-html

Permet d'afficher une expression avec des tags HTML.

ex: title: "

Hello World

<div v-html="title"></div>

v-model

Permet de lier la valeur d'un champs de saisie avec une variable. Si vous modifi l'un ou l'autre Vue mettra a jour automatiquement l'autre. Du coup, la variable et le champ de saisie auront toujours la mme valeur.

<input v-model="name" type="text" /><div>    Nom : {{ name }}</div>

v-if, v-else-if et v-else

Rend un lment visible ou non visible selon la valeur vrai ou faux de l'expression. Lorsque non visible l'lment n'est pas rendu dans le html

<div v-if="montant > 100">    Livraison gratuite!<div><div v-else-if="montant > 50">    Livraison 9.95$</div><div v-else>    Livraison 19.95$</div>

v-show

Rend un lment visible ou non visible selon la valeur vrai ou faux de l'expression. Par contre, l'lment reste toujours prsent dans le rendu. Lorsque non visible l'lment est rendu avec l'attribut CSS: display: none;

<div v-show="isError">  {{ errorMessage }}</div>

v-for

Permet d'afficher une liste d'lment

<ul>    <li v-for="item in items" :key="item.id">        {{ item.name }}    </li></ul>

noter le mot cl "key" est ncessaire pour permettre Vue d'identifier uniquement l'lment

Ref

Permet votre application Vue d'identifier un lment html et d'effectuer des actions sur cet lment.

Identification avec la directif ref

<input type="text" ref="name">

Manipulation partir de votre code Vue en utilisant le mot cl spcial: $refs

methods: {  handleClick() {    console.log(this.$refs.name)    this.$refs.name.classList.add('active')    this.$refs.name.focus()  }}

v-bind sur l'attribut "class" et les "style"

Il est possibile de faire un v-bind sur l'attribut class et style

<div class="text-2xl" :class="isAdmin ? 'text-red-500' : 'text-gray-500'">   Hello World</div>

noter que l'attribut class est utilis deux fois. Vue va regrouper ces deux attributs lors du rendu.

Il est galement possible d'utiliser un object pour envoyer du contenu dans notre attribut "class"

<div :class="{ 'text-red-500': isAdmin, 'text-gray-500': !isAdmin }">   Hello World</div>

noter la syntaxe de l'object { attribut : expression } si l'expression retourne vrai alors l'attribut sera ajouter la class

Une syntaxe similaire s'applique l'attribut style

<div :style="{'margin-top': '10px', 'padding': '5px'">   Hello World</div>

Enfin les attributs class et style peuvent tre dfinit par une variable de type objet cr ailleurs dans votre application

titleClass: {    'text-red-400': this.isAdmin,    'text-gray-500': !this.isAdmin}

<div :class="titleClass">   Hello World</div>

L'lment

Cet lment permet d'utiliser des directives de Vue sans crer un lment html.

<template v-show="quantity === 0">    La quantit doit tre suprieur  zro</template>

Les vnements

Vue permet de grer les vnements javascript comme click, input, change, etc. Pour ce faire vous devez utiliser la directive v-on: suivit du nom de l'vnement.

v-on:click

Permet d'excuter du code sur le click d'un lment

<button v-on:click="name = 'Mike'">Afficher message</button>// ou syntaxe raccourci<button @click="name = 'Mike'">Afficher message</button>

v-on:keydown

Permet d'excuter du code sur le appuie d'une touche (ex. enter)

<button v-on:keydown.enter="name = 'Mike'">Afficher message</button>// ou syntaxe raccourci<button @click="name = 'Mike'">Afficher message</button>

Autre valeurs possibles pour v-on:keydown, keyup, keypress

Autre valeur possibles pour .enter, tab, esc, up, down, left, right, delete

v-on:submit

Permet d'excuter du code lors de la soumission d'un formulaire

<form v-on:submit.prevent="name = 'Mike'">    <input v-model="name" type="text" />     <button type="submit">Sauvegarde</button></form>

noter, la prsence de ".prevent" aprs la directive v-on:submit. Cette instruction va prvenir la soumission du formulaire au serveur.

Les mthodes

Vue js permet de crer des mthodes afin d'y placer un block de code rutilisable dans votre applications. Voici la syntaxe pour crer un mthode:

Vue.createApp({    data() {        return {            name: "Mike Taylor",        }    },    methods: {        resetName() {            this.name = ''        }    }}).mount('#app')

noter le mot cl 'this' plac en avant de la variable name. Ce mot cl est obligatoire pour permettre de rfrencer une variable l'intrieure de notre instance de Vue.

Pour appeler une mthode vous pouvez le faire simplement en utilisant son nom.

<input v-model="name" type="text" /> <button @click="resetName" type="text">Effacer</button>

Une mthode peut galement contenir des paramtres

methods: {    resetName(newName) {        this.name = newName    } }

<input v-model="name" type="text" /> <button @click="resetName('John')" type="text">Effacer</button>

Une mthode peut galement envoyer l'object event

methods: {    resetName(newName, e) {        this.name = newName        console.log(e.target.textContent)    } }

<input v-model="name" type="text" /> <button @click="resetName('John', $event)" type="text">Effacer</button>

noter le paramtre spcial $event va envoyer l'object event notre mthode

Les mthodes "computed"

Contrairement aux autres mthodes qui vont se r-excut chaque rendu de votre application, les mthodes "computed" vont tre r-excut seulement si les variables quelle contiennent sont modifi.

computed: {    recalculerTotal(items, taxes) {        return  this.calculerTotal(items, taxes)    }}

Les mthodes "computed" peuvent ensuite tre appel dans notre page.

<button @click="recalculerTotal">Re-Calculer</button>

noter qu'aucun paramtre ni parenthse n'est utilis

Les mthodes "watch"

Ces mthodes vont "regarder" une variable et ds quelle change excutera le code de la mthode.

watch: {    title(newTitle, oldTitle) {        console.log(`Le titre ${oldTitle}  chang pour ${newTitle}`)    }}

Les mthodes "Lifecycle Hook"

Chaque instance de vue traverse une srie dtapes dinitialisation au moment de sa cration - par exemple, elle doit mettre en place lobservation des donnes, compiler le template, monter linstance sur le DOM et mettre jour le DOM quand les donnes changent.

En cours de route, elle va aussi invoquer deshooksde cycle de vie, qui nous donnent lopportunit dexcuter une logique personnalise chaque tape.

Par exemple, le hook"created" est appel une fois linstance cre

created() {    console.log('Mon instance est created')  }

Il existe plusieurs autres mthodes hook. En voici quelques unes:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Les "Components"

Vue.js est un framework qui permet et encourage l'organisation de votre application en plusieurs "components"et sous "components"

Chaque lment distinct de votre page devra avoir son propre component. Par exemple la barre de navigation pourrait tre contenu dans un component NavBar et rutilis sur plusieurs pages

Voici la syntaxe pour crer des "components" et utiliser Vue seulement dans une petite partie de votre page.

const app = Vue.createApp({    data() {        return {            messsage: 'Un message'        }    },    methodes: {        deleteUser(userID) {            console.log(`User ${userID} deleted`)        }    })}app.component('nav-bar', {    template: `        <div>            {{ title }}             ...navigation bar code...        </div>    `,    props: {        title: {            type: String,            required: true,            default: 'Mon application'        }    },    methods: {        sendDelete() {            const userId = 10            this.$emit('delete', userId)        }    }}app.mount('#app')

Les components cres peuvent ensuite tre utilis comme des tags HTML dans votre page

<div>    <nav-bar title="Mon application" v-on:delete="deleteUser($event)" /></div>

L'lment "template" contient le HTML qui sera rendu l'endroit ou vous avez plac votre tag component dans votre page html

L'objet "props" dfinit quel data est attendu lors du rendu du component

props: {    title: {        type: String,        required: true,        default: 'Mon application'    }},

Props peut galement tre utilis avec une syntaxe raccourci

props: ['title'],

Vous pouvez par la suite assigner une valeur ces props lors de l'utilisation du component

<div>    <nav-bar title="Mon application" /></div>

Enfin, le mot-cl $emit permet d'mettre un vnement. Cet vnement pourra ensuite tre capt par votre application avec un v-on:nom-event

methods: {    sendDelete() {        const userId = 10        this.$emit('delete', userId)    }}

<div>    <nav-bar title="Mon app" v-on:delete="deleteUser" /></div>

Crer un application entire avec Vue CLI

L'outils pour crer un projet Vue.js est Vue CLI. Vous devrez l'install

npm install -g @vue/cli

Vue create

Permet de crer un projet Vue.js avec plein de truc dj pr-configur pour vous.

vue create my-app-name

npm run serve

Une fois l'application crer vous pouvez vous positionner dans le dossier et lancer le serveur de dveloppement

cd my-app-namenpm run serve

Vue add

Il est possible d'ajouter des plugin/librairie votre projet Vue en utilisant le raccourci vue add. Voici 3 exemples:

vue add vue-routervue add vuexvue add tailwind

Point de dpart

Vue CLI va crer plusieurs dossiers et fichiers. Le point de dpart est public/index.html et "src/main.js"

import { createApp } from "vue";import App from "./App.vue";createApp(App).mount("#app");

Le component qui sert de point d'entr est donc App.vue

Avec une application Vue, aucun code HTML ne sera crit dans le fichier index.html. Votre code HTML sera crit dans la section de chacun de vos components

Vite

Il est galement possible de crer un projet avec Vite. C'est un outils plus rcent et plus efficace

npm init @vitejs/app my-app-name --template vue

Cette commande va crer exactement un projet Vue.js avec les mmes pr-configuration que le Vue-CLI

Avec un projet Vite, la commande pour lancer le serveur est

npm installnpm run dev

Les Single-File Component

Chaque component Vue est dfinit dans son propre fichier .vue avec la syntaxe suivante

<template>    <img alt="Vue logo" src="./assets/logo.png" />    <HelloWorld msg="Hello Vue 3 + Vite" />    {{ message }}</template><script>    import HelloWorld from './components/HelloWorld.vue'    export default {        components: {            HelloWorld        },        data() {             return {                message: 'Hello World'            }        },        }</script><style scope >    #app {      font-family: Avenir, Helvetica, Arial, sans-serif;      text-align: center;      color: #2c3e50;    }</style>

noter qu'avec l'utilisation des single-file-component, le code HTML du component est saisie dans la section template. Il n'est pas saisie dans la div #app de votre index.html

Comme dmontr dans le dernier exemple, Il est possible d'utiliser un autre component l'intrieur de votre component actuel.

<template>    <HelloWorld msg="Hello Vue 3 + Vite" /></template>

Pour cela il faut utiliser import:

import HelloWorld from './components/HelloWorld.vue'

Emplacement des fichiers components

Les Single-File-Component sont sauvegards dans un dossier src/components ou src/pages selon si le component agit titre de page (ex. About.vue) ou titre de component r-utilisable (ex. NavBar.vue)

Les Slots

Les slots permettent d'ajouter du contenu un component

<custom-button>    Je peux ajouter du contenu...  Titre: {{ title }}</custom-button>

noter que le rendu de 'title' se fera dans le component parent. Le mme principe s'appliquera pour le css. Donc le contenu de la slot doit tre dfinit/accessible dans le component parent

l'interne le custom-button ressemble quelque chose comme ceci:

<template>    <slot></slot></template>

La balise slot va tre remplac par le contenu de 'custom-button'

Il est possible de dfinir une valeur par dfaut pour la slot

<template>    <slot>Si rien n'est spcifier je vais m'afficher</slot></template>

noter que la valeur par dfaut est dfinit dans le component enfant, donc devra utiliser les variables ou le css dfinit dans le component enfant.

Les slots multiples

Permet d'ajouter du contenu associ seulement un slot en particulier

<custom-button>    Je peux ajouter du contenu...  <template #title>    {{ title }}  </template></custom-button>

'#title' indentifie la template au slot title. La syntax v-slot:title p eut galement tre utilis

l'interne le custom-button ressemble quelque chose comme ceci:

<template>    <slot></slot>  <slot name="title"></slot></template>

noter que le slot principal est toujours disponible

(les balise ici sont optionnelles) mais il est possible d'ajouter un second slot avec un nom

Slot Props

Les slot peuvent avoir des props

<template>  <slot name="title" satus="info"></slot></template>

Les Props peuvent ensuite tre utilis

<custom-button>    Je peux ajouter du contenu...  <template #title="titleProps">    {{ title }}    {{ titleProps.status }}  </template></custom-button>

Il est possible de dfinir des Props pour les slot principal en utilisant '#defaut'

<template>    <slot type="ajout"></slot>  <slot name="title" status="info"></slot></template>

<custom-button>  <template #default="defaultProps">       Je peux ajouter du contenu...     {{ defaultProps.type }}  </template>  <template #title="titleProps">    {{ title }}    {{ titleProps.status }}  </template></custom-button>

noter que si il n'y a pas de named slot. Il est possible d'utiliser les Props du default avec cette syntaxe

<custom-button #default="defaultProps">       Je peux ajouter du contenu...     {{ defaultProps.type }}</custom-button>

Conclusion

Merci d'avoir lu cet article. Si vous avez aimez ou si vous avez des commentaires n'hsitez pas les enter ici bas.

Original Link: https://dev.to/ericlecodeur/apprendre-vue-js-3-jour-1-concepts-de-base-2jfn

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To