Découvrir_VueJS.md

Découvrir Vue JS

Vue, c'est quoi ?

A l'instar de ReactJS, Vue est un framework front-end javascript utilisant des modules, celui-ci a pour objectif de fluidifier une page web en la rendant dynamique (ainsi seuls les éléments qui vont changer sur la page (comme un formulaire par exemple) seront rechargés plutôt que la page entière.

Les avantage de Vue :

• Facile à prendre en main et intuitif
• Léger
• Inclu tout le nécessaire pour fonctionner directement
• Grande communauté
• N'a pas besoin d'outil de build (un script suffit)

Installer Vue sur un projet :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Les requêtes

• el = l'élément sur lequel on agit (ex : #app)
• data = les variables
• methods = les fonctions que l'on souhaite définir
• computed = semblable à methods à l'exception que les valeurs sont mises en cache, ce qui permet de faire des modifications seulement lorsque les variables utilisées ont été modifiées
• watch = semblable à methods à l'exception qu'il permet de faire une action lorsque celui-ci détecte qu'une variable a été modifiée
• directives = Pour créer des directive propre à un composant (voir plus bas)
• filters = Permet d'appliquer un filtre à un composant (voir plus bas)
• components = Permet d'appeler un composant (voir plus bas)

exemple de l'utilisation de requêtes:

<div class="ui main container" id="app">
    <p>
        prénom : {{ firstname }}<br>
        nom : {{ lastname }}<br>
        <input type="text" v-model="fullname">
    </p>
</div>

let vm = new Vue({
    el: '#app',
    data: {
        firstname: 'Jean',
        lastname: 'Dupont'
    },
    computed: {
        fullname: {
        get: function (){
            return this.firstname + ' ' + this.lastname
        },

        set: function (value){
            let parts = value.split(' ')
            this.firstname = parts[0]
            this.lastname = parts[1]
        }
        }
    }
})

Les états

VueJS fonctionne comme une suite d'événements, il est ainsi possible d'intéragir à certains moments précis :

1. beforeCreate : juste après l'initalisation des événements et du cycle de vie
2. created : juste après l'initialisation des injections et de la réactivité
3. beforeMount : juste après la compilation du template ou du outerHtml
4. mounted : Lorsque l'élément est monté
5. beforeUpdate : Juste avant que les données chargent
6. updated : Juste après que les données soient chargées
7. beforeDestroy : avant la suppression des observateurs, composants enfants et écouteurs d'événements
8. destroyed : après la suppression

Le cycle de vie est disponible sous forme de diagramme sur le site de Vue

Les directives

Vue utilise des attributs html spéciaux pour définir des conditions particulières, parmi lesquels : v-if, v-else-if, v-else, v-for, v-on, v-show, v-model, v-bind
Exemple :

<div>
    <div v-if="user === 'moderator'">...</div>
  
    <div v-else-if="user === 'admin'">...</div>

    <div v-else>...</div>
</div>

Exemple de création d'une directive globale :

<div class="ui main container" id="app">
    <input type="text" v-test="message">
</div>

Vue.directive('test', function (el, binding) {
    el.value = binding.value
    console.log('bind')
})

let vm = new Vue({
    el: '#app',
    data: {
        message: 'test'
    }
})

Les filtres

Vue offre la possibilité de créer et d'ajouter des filtres à ses variables, ce qui peut s'avérer très utile. Pour ajouter un filtre, il suffit de le créer :

Vue.filter('capitalize', function (value){
    return value.toUpperCase()
})

puis de l'appeler comme ceci avec la variable en question :

{{ variableafiltrer | capitalize }}

Les composants

Exemple 1

La création d'un composant se fait avec la même architecture que pour les filtres :

Vue.component('message', {
    props: ['type', 'message'],
    template: `<div class="ui message" :class="type">{{ message }}</div>`
})

⁉️ Props : correspond aux attributs que l'on souhaite utiliser dans son template.

Il est ensuite possible d'appeler son composant comme ceci :

<message :type="success" :message="message"></message>

Exemple 2

Ici nous allons créer un bouton compteur avec un attribut start qui définit la valeur de départ du compteur.
Le composant :

let counter = {
        data: function() {
            return {
                count: 0
            }
        },
        props: {
            start : {type: Number, default:0}
        },
        computed: {
            total: function (){
                return this.start + this.count
            }
        },
        methods: {
            increment: function () {
                this.count++
            }
        },
        template: `<button @click="increment">{{ total }}</button>`
}

‼️ Ici (dans le composant) data est une fonction locale pour ne pas embrouiller la compilation avec data global de la vue.

La vue :

let vm = new Vue({
    el: '#app',
    components: {counter},
    data: {
        message:"coucou",
    }
})

Appel du composant :

<div class="ui main container" id="app">
    <counter></counter>
    <counter :start="3"></counter>
</div>