Création d'une app VueJS

Il existe 2 styles d'API pour coder en VUE.js: Options API et Composition API. Donc si vous parcourez la documentation de VUE.js il est possible que vous tombiez sur l'un et l'autre, ne soyez pas intimidé.

Les deux styles d'API sont tout à fait capables de couvrir les cas d'utilisation courants. Il s'agit d'interfaces différentes alimentées par le même système sous-jacent. En fait, l'Options API est mise en œuvre au-dessus de la Composition API ! Les concepts fondamentaux sont partagés entre les deux styles et ils sont équivalents.

Dans le cadre de ce cours, nous utiliserons le style Options API. Plus d'info ici.

Création d'une App

La première étape consiste à appeler la méthode createApp de l'objet global Vue. Celle-ci permet de créer une nouvelle instance d'une app Vue. Afin de pouvoir accéder à l'app ultérieurement, il est nécessaire de stocker le résultat dans une variable.

Par exemple:

const app = Vue.createApp({}); Cette variable peut porter n’importe quel nom, mais par convention elle est généralement nommée "app".

Attacher l'App à un élément (mount)

Il faut ensuite associer l'app à une balise HTML afin de lui indiquer sa portée. Bref, seules cette balise et ses enfants pourront être contrôlées par l'app. Le reste du document n'existera pas à ses yeux.

Pour ce faire, l'app contenue dans la variable doit appeler sa méthode mount et lui passer en paramètre une chaine de caractères correspondant au sélecteur de la balise désirée.

Cette méthode accepte les mêmes sélecteurs que querySelector.

Par exemple, si la balise souhaitée a le id app:

app.mount('#app');

Si le résultat du mount est stocké dans une variable, il est possible d'y accéder afin de changer ses données ou encore d'appeler ses méthodes.

Par exemple:

const vm = app.mount('#app');
createApp()