Installation

Note: Note écrite à partir du guide v2 de vuejs.org du 2018-06-25. https://vuejs.org/v2/guide/installation.html

Note sur la compatibilité

Vue est compatible avec tous les navigateurs supportant ECMAScript 5. Internet Explorer 8 et moins de Microsoft n'est pas supporté car le navigateur ne supporte pas ES5 (Vue utilise des fonctions non-shimmable).

Sur cette page, je vais utiliser des syntaxes de ES6 et +

Version

La dernière version stable (2018-06-25) est: 2.5.16

On peut trouver les informations pour chaque version sur GitHub

Intégration avec la balise <script>

On peut ajouter vue.js à une page HTML en incluant une seule balise <script>. Vue sera la seule variable globale enregistrée (window.Vue). 

Version de développement: https://vuejs.org/js/vue.js
Version de production: https://vuejs.org/js/vue.min.js (30.90 KB min+gzip)
CDN: https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
NPM: https://cdn.jsdelivr.net/npm/vue/
unpkg: ...
cdnjs: ...

Introduction

Première étape

Créer une page HTML5 sur un serveur web, télécharger le script vue.js de développement et ajouter la balise <script>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

Source: emptyhtml5.htm

Télécharger le script:

$ wget https://vuejs.org/js/vue.js

Ajouter la balise script dans l'entête

...
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="vue.js"></script>
    </head>
...

Source: emptyvuejs.htm

Affichage déclaratif

Voici comment utiliser Vue pour un système de gabarit simple.

Dans le corps du document (balise body), ajouter une balise div et une balise script:

Lier le texte d'une balise

...
        <div id="app">
            {{ message }}
        </div>
        <script src="app.v1.js"></script>
...

Source: helloworld.htm

Dans le fichier app.v1.js, déclarer un object de type Vue qui associe la balise avec l'id "app" à la valeur du message. On écrit #app, car on utilise un sélecteur CSS (compatible avec document.querySelector)

const app = new Vue({
    el: '#app',
    data: {
        message: '<Hello World>'
    }
})

Source: app.v1.js

Fonctions DOM Associése: node.removeChild(), node.appendChild(), document.createTextNode()

Lors que les deux fichiers sont enregistrés, on devrait voir "<Hello World>" dans la page ou <div id="app">Hello World</div> dans l'inspecteur DOM de la console du navigateur. Le code source (original) du fichier helloworld.htm est différent du code généré, la version DOM dans la mémoire utilisée par le navigateur. La chaîne de caractères est affichée telle quelle en texte. Il n'y a pas d'injection de HTML.

Lier l'attribut d'une balise

Les données d'une vue peuvent aussi être liées à des attributs HTML. De plus, on peut faire la liaison avec une balise enfant de la balise principale "el".

...
        <div id="app">
            <span v-bind:title="spantitle">{{ spantext }}</span>
            {{ message }}
        </div>
        <script src="app.v2.js"></script>
...

Source: helloworld2.htm

Dans le fichier app.v1.js, déclarer un object de type Vue qui associe la balise avec l'id "app" à la valeur du message. On écrit #app, car on utilise un sélecteur CSS (compatible avec document.querySelector)

const app = new Vue({
    el: '#app',
    data: {
        message: '<Hello World>',
        spantitle: 'Mon titre',
        spantext: 'Mon texte'
    }
})

Source: app.v2.js

Fonction DOM Associée: node.setAttribute()

En tout temps, si on modifie une variable de l'application Vue, le DOM sera modifié. Ainsi, si on ouvre la console et on écrit: app.message = 'bla' ou app.spantitle = 'test', le texte ou l'attribut sera modifié.

Les attributs spéciaux tel que v-bind=:title="" n'existe plus dans le DOM après la liaison de la Vue.

Lire les commentaires | Laisser un commentaire