Démarrer avec Vue.js

• 3 minutes

Pour commencer à utiliser Vue.js, vous devez installer le framework, créer une application Vue, puis l’inscrire sur la page. L’inscription indique à la page comment utiliser l’application.

Commençons.

Ajouter Vue.js à une page

Vous pouvez ajouter Vue.js à une application de plusieurs façons. Dans ce module, vous ajoutez un élément script pour importer Vue à partir d’un réseau de distribution de contenu (CDN). En utilisant un réseau CDN, vous pouvez ajouter Vue à des applications existantes sans les réécrire.

Pour ajouter Vue à une page à l’aide d’un réseau CDN, ajoutez l’élément script suivant à votre page.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Cet élément indique au navigateur d’exécuter le fichier de script référencé par la directive src. Une fois que le script s’exécute, les API Vue sont disponibles.

Créer une application

Toutes les applications Vue.js commencent par la création d’un objet application. L’application est l’emplacement central pour toutes les données et méthodes que votre application utilise. Bien que l’objet application respecte certaines conventions, il s’agit à la base d’un objet JavaScript.

Pour créer une application Vue, appelez la méthode createApp().

const App = Vue.createApp({
    // methods and content go here
});

Ajout de données

Maintenant que vous avez créé votre application, vous pouvez ajouter des propriétés offrant davantage de fonctionnalités à votre application. Une méthode importante utilisée par la plupart des applications est data(). Vue.js utilise cette méthode pour accéder à toutes les informations que vous devez mettre à la disposition de votre application.

Toutes les propriétés au sein de l’objet que data() retourne sont dynamiques. Vue.js détecte automatiquement toute modification de valeur. Il met ensuite à jour et actualise les portions appropriées de l’affichage avec les informations mises à jour.

Créer un objet de données

Vue.js appelle la méthode data(). En retour, Vue.js attend un objet JavaScript.

Dans l’exemple suivant, l’objet retourné contient les propriétés firstName et lastName.

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

À ce stade, les données sont exposées afin de pouvoir être affichées pour l’utilisateur.

Monter l’application

L’objet application créé doit être monté pour que Vue.js puisse l’utiliser. En montant l’application, vous indiquez la partie de la page que l’application contrôle, ce qui lui permet d’afficher des informations ou même du code HTML.

Pour monter l’application, vous référencez l’id d’un élément HTML ordinaire.

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Au moment de l’exécution, le contenu de l’élément id= 'app' est remplacé par le contenu de l’application Vue.js.

Afficher des données

Pour afficher des données sur la page, vous utilisez la syntaxe {{ }}, parfois appelée accolades doubles. Dans la syntaxe {{ }}, vous pouvez fournir le code JavaScript nécessaire pour accéder aux informations que vous souhaitez afficher.

La fonction data() que vous avez créée précédemment retourne un objet. Vue.js rend automatiquement l’objet disponible, vous n’avez donc pas besoin d’appeler data().

Si vous souhaitez afficher le prénom, vous pouvez utiliser la syntaxe {{ firstName }}. L’exemple suivant montre l’application complète, qui peut afficher lastName et firstName.

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>