Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Vue.js 2

Comprendre l'objet d'instance

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Un objet d'instance vous permet de démarrer Vue.js à un endroit de la page. Apprenez également à en manipuler le contenu.
05:25

Transcription

On va maintenant voir comment c'est organisé. Qu'est-ce qu'on a comme fichiers et qu'est-ce qui fait que ça fonctionne actuellement et que dans le navigateur, évidemment, on a bien un rendu actuel de l'application ? Alors on a plusieurs fichiers qui vont rentrer en ligne de compte. Le premier fichier ce sera main.js qu'on a ici. On voit qu'on a des imports alors si vous n'avez jamais vu ça, comme ça, des déclarations import, ça va être un peu compliqué pour vous. Sachez simplement qu'import ça permet de faire un import de quelque chose. Ça peut être soit une librairie qui est déjà disponible et qui est chargée par auto loading, soit directement un composant qui est déclaré et que vous avez ajouté et que vous pouvez ajouter facilement. On a deux exemples qui sont très concrets. L'import de Vue se fait par la librairie vue directement et l'import de App se fait par le fichier. On voit qu'on a un ./ qui se trouve à cet endroit-là avec App et en fait c'est ce fichier-là, le App.vue. C'est un peu particulier parce que comme vous pouvez le voir ici on n'a pas besoin de donner l'extension .vue, ça se fait automatiquement. Quand on fait ./App, ça va aller chercher directement ce qui se trouve dans App.vue. On va voir comment c'est possible et ce qui fait que ça fonctionne. On a ensuite une instance de vue qui est créée. New Vue permet de déclarer une nouvelle instance d'une vue donc la vue c'est vue.js évidemment. On le déclare sur un élément, l'élément c'est un identifiant, l'identifiant App. Vous remarquez qu'ici c'est la même syntaxe que pour le css. On va lui attribuer un template ici et on va lui déclarer qu'il y a un composant donc un component qui va être inséré à l'intérieur et ce component qu'est-ce que c'est ? C'est le component App. Là on en a un seul, pourquoi ? Parce que ce fichier-là, le main.js c'est ce qu'on appelle aussi le bootstrap. C'est le fichier de base, celui qui sera le premier à être chargé. Donc il va charger le composant App qui sera le composant route, le composant parent de tous les autres composants. On va aller voir un peu ce qu'il y a dans App du coup. App.vue c'est composé de quoi ? On reviendra un peu sur les types de template un peu plus tard. Ce qui va vraiment nous intéresser pour le moment c'est cette partie-là, le script. On a un import qui est fait. Si on fait un import c'est qu'on compte le réutiliser. Gardez bien ça en tête, c'est important. On fait un import de Hello depuis le dossier composants et le fichier Hello. On voit qu'effectivement dans le dossier components qu'on a ici, on a bien Hello.vue effectivement, on va chercher Hello. Ensuite on va faire ici un export. C'est un peu particulier. Pourquoi on fait un export ? On fait un export parce que c'est importé. Rappelez-vous, dans main.js ici, qu'est-ce qu'on fait ? On fait un import de App. L'export que l'on a dans App.vue permet de réaliser l'import de l'autre côté. En fait on exporte d'un côté et on importe de l'autre. En faisant le export default ici, on vient exporter ce composant-là et on va lui donner un nom. Son nom c'est App et on va lui dire qu'il est composé de components et en l'occurence ici on n'a que le components Hello. Mais on pourrait en rajouter d'autres plus tard. Alors, comprenenez bien qu'actuellement dans notre page, il n'y a qu'une seule instance de vue.js et elle se trouve ici c'est New Vue qui vient créer ici le bootstrap sur un élément de template App avec un élement qui va avoir ici comme identifiant App qui va, lui, injecter ce template et ce template-là fait appel à ce composant-là. En fait, tout est lié par nommage. C'est le nom que donnez à votre composant que vous allez réutilser ensuite en tant que balise html dans le template et bien sûr vous allez injecter cette instance de vue dans un élément approprié. Mais où est-ce qu'on le trouve l'élément approprié ? C'est là où ça devient un peu particulier. Vous allez vous dire oui c'est pas mal mais où est-ce qu'on a le composant particulier ? Le composant particulier regardez où il se trouve. Il faut revenir au basic, au tout début index.html qui sera chargé et c'est ce index.html qui comporte une div avec un id App, un identifiant App qui sera utilsé pour injecter le composant App et c'est fait par quelle méthode ? Tout simplement par celle-ci. On va donner ici un élément parent qui sera l'élément qui contiendra l'instance de vue qui sera chargée et c'est en donnant l'identifiant que vous allez charger cette instance de vue. Vous voyez que c'est par imbrication en fait. App va charger App, le composant App ici va charger le composant Hello. Si vous avez bien remarqué qu'effectivement on a ici Hello qui est appelé et on voit que Hello.vue, qui va être exporté également et va avoir un name et on y reviendra un peu plus tard quand on va créer nous-même un composant en plus, il va être exporté également ce qui fait que dans App, il va être importé et utilisé sans aucun problème dans le template. Donc tout ça c'est un jeu de noms. Quand vous aurez compris un peu compris l'imbrication qui n'est pas très compliquée en soit, vous allez pouvoir facilement venir modifier tout ça et créer vous-même vos propres applications. Vous verrez que c'est extrêmement rapide. Tout ce qu'il a pour le moment à comprendre, ne vous complexifiez pas l'esprit, tout ce qu'il y a à comprendre pour le moment, c'est simplement l'export et l'import qui sont très importants. Les endroits où on place les informations, le main.js qui est le premier fichier à charger, l'App.vue qui est pour le moment notre premier composant parent et ensuite dans le dossier components, les composants enfants qui seront chargés plus tard.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !