Se mettre au travail avec le framework Vue.js 2.0 –

Vous voulez apprendre le jeu Vue.js? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ par mois ou essayez notre essai gratuit de 7 jours .

Cet article a été mis à jour, principalement pour mettre à jour la section outillage.

Comme Dès que le populaire framework JavaScript Vue.js est disponible v2 j'étais impatient de l'essayer et de voir à quoi ça ressemble de travailler. En tant que connaisseur d'Angular et de React, j'avais hâte de voir leurs similitudes et leurs différences avec Vue.

Vue 2 affiche d'excellentes statistiques de performances, une charge utile relativement réduite (la version d'exécution groupée de Vue pèse 30 Ko). une fois minifiées et gzippées), ainsi que des mises à jour de bibliothèques associées telles que vue-router et Vuex, la bibliothèque de gestion d’état de Vue. Il y a beaucoup trop d'éléments à couvrir dans un seul article, mais gardez un œil sur certains articles ultérieurs dans lesquels nous examinerons de plus près diverses bibliothèques qui s'intègrent parfaitement au cadre principal.

Inspiration provenant d'autres bibliothèques

Si vous parcourez ce didacticiel, vous verrez de nombreuses fonctionnalités de Vue clairement inspirées par d’autres frameworks. C'est une bonne chose; C’est formidable de voir que les nouveaux cadres prennent certaines idées d’autres bibliothèques et les améliorent. En particulier, vous verrez que les modèles de Vue sont très proches de ceux d'Angular, mais que ses composants et leurs méthodes de cycle de vie sont plus proches de ceux de React (et d'Angular également).

Un exemple de cela est que, tout comme React et presque Tous les frameworks de JavaScript tombent aujourd'hui, Vue utilise l'idée d'un DOM virtuel pour rendre le rendu efficace. Vue utilise un fork de snabbdom l'une des bibliothèques DOM les plus populaires. Le site Vue comprend de la documentation sur son rendu Virtual DOM mais en tant qu'utilisateur, tout ce que vous devez savoir, c'est que Vue est très efficace pour garder votre rendu rapide (en fait, il fonctionne mieux que React dans de nombreux cas). Cela signifie que vous pouvez être sûr de bâtir sur une plate-forme solide.

Composants, Composants, Composants

À l'instar des autres frameworks, le composant de base de Vue est aujourd'hui. Votre application doit être une série de composants qui se superposent pour produire l'application finale. Vue.js va encore plus loin en suggérant (bien que non contraignant) que vous définissiez vos composants dans un seul fichier .vue qui peut ensuite être analysé par des outils de construction (nous y reviendrons sous peu). Étant donné que le but de cet article est d'explorer en profondeur Vue et son travail, je vais utiliser cette convention pour mon application.

Un fichier Vue ressemble à ceci:

Vous pouvez également attribuer à chaque élément un attribut src et pointer vers un fichier HTML, JS ou CSS séparé, respectivement, si vous n'aimez pas avoir toutes les parties du composant dans un fichier.

Mise en place d'un projet

Alors que l'excellent Vue CLI existe pour faciliter la mise en place d'un projet complet, lorsque je commence avec une nouvelle bibliothèque, j'aime tout faire à partir de zéro pour que je comprenne mieux

Ces jours-ci, webpack est mon outil de construction préféré, et nous pouvons l'associer au plug-in vue-loader pour prendre en charge le format de composant Vue.js. que j'ai mentionné précédemment. Nous aurons également besoin de Babel et du paramètre prédéfini env pour pouvoir écrire tout notre code à l'aide de la syntaxe JavaScript moderne, ainsi que du webpack-dev-server qui mettra à jour le navigateur. quand il détecte un changement de fichier.

Initialisons un projet et installons les dépendances:

 mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @ babel / core @ babel / preset-env babel-loader vue-loader vue-template-compilateur webpack-dev-serveur html-webpack-plugin --save-dev

Créez ensuite les dossiers et fichiers initiaux:

 mkdir src
appuyez sur webpack.config.js src / index.html src / index.js

La structure du projet devrait ressembler à ceci:

.
├── package.json
├── package-lock.json
├── src
├── ├── index.html
└── index.js
└── webpack.config.js

Maintenant, configurons la configuration du Webpack. Cela se résume à ce qui suit:

• Dites à Webpack d'utiliser le vue-loader pour tous les fichiers .vue
• Dites au Webpack d'utiliser Babel et le env prédéfini pour tous les fichiers .js
• Indiquez à Webpack de générer un fichier HTML destiné au serveur de développement à utiliser, à l'aide de src / index.html :

. ] // webpack.config.js
const VueLoaderPlugin = require ('vue-loader / lib / plugin')
const HtmlWebPackPlugin = require ("html-webpack-plugin")

module.exports = {
  module: {
    règles: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

Enfin, nous allons ajouter du contenu au fichier HTML et nous sommes prêts à partir!

Nous créons un div vide avec l'ID de app car c'est l'élément dans lequel nous allons placer notre application Vue. Je préfère toujours utiliser un div plutôt que l'élément body car cela me permet de contrôler le reste de la page.

Écriture de notre première application Vue.js

Nous allons rester fidèle à chaque didacticiel de programmation et écrire une application Vue affichant «Hello, World!» à l'écran avant de plonger dans une tâche un peu plus compliquée.

Chaque application Vue est créée en important la bibliothèque, puis en instanciant une nouveau Vue exemple:

 import Vue Vue de 'vue'

const vm = new Vue ({
  el: '#app',
})

Nous donnons à Élément un élément à afficher sur la page. Nous avons donc créé une application Vue! Nous passons un sélecteur pour l'élément que nous voulons que Vue remplace par notre application. Cela signifie que lorsque Vue s'exécutera, nous prendrons le div # app que nous avons créé et le remplacerons par notre application.

Si nous utilisons le nom de variable vm c'est parce qu'il signifie «Voir le modèle». Bien que n'étant pas strictement associé au modèle «Modèle de vue modèle» (MVVM) Vue s'inspirait en partie de ce modèle et de la convention consistant à utiliser le nom de variable vm pour les applications Vue a collé. Bien sûr, vous pouvez appeler la variable comme bon vous semble!

Pour l'instant, notre application ne fait rien, alors créons notre premier composant, App.vue qui restituer quelque chose sur la page.

Vue ne dicte pas la structure de votre application, celle-ci dépend donc de vous. J'ai fini par créer un dossier par composant, dans ce cas-ci App (j'aime bien la lettre majuscule, qui désigne un composant), avec trois fichiers:

• index.vue [19659026] script.js
• style.css

 mkdir src / App
appuyez sur src / App / {index.vue, script.js, style.css}

La structure du fichier devrait maintenant être:

.
├── package.json
├── package-lock.json
├── src
├── App
│ ├── index.vue
│ ├── srcipt.js
│ └── style.css
├── ├── index.html
└── index.js
└── webpack.config.js

App / index.vue définit le modèle, puis importe les autres fichiers. Ceci est conforme à la structure recommandée dans la section De la séparation des problèmes des documents de Vue.

J'aime l'appeler index.vue mais vous voudrez peut-être l'appeler app.vue aussi, ce qui facilite la recherche. Je préfère importer App / index.vue dans mon code par rapport à App / app.vue mais encore une fois, vous pourriez ne pas être d'accord, alors n'hésitez pas, choisissez ce que vous et votre équipe préférez. 19659007] Pour l'instant, notre modèle n'est que

Bonjour, World!

et je laisse le fichier CSS vide. Le travail principal va dans script.js qui ressemble à ceci:

 export default {
  nom: 'App',
  Les données() {
    revenir {}
  },
}

Cette opération crée un composant que nous allons nommer App principalement à des fins de débogage, auquel je reviendrai plus tard, puis définit les données que ce composant a et est responsable. Pour l’instant, nous n’avons aucune donnée, nous pouvons donc le dire à Vue en renvoyant un objet vide. Nous verrons plus loin un exemple de composant utilisant des données.

Nous pouvons maintenant revenir à src / index.js et indiquer à l'instance de Vue de rendre notre application . composant:

 import Vue Vue de 'vue'

importer AppComponent à partir de './App/index.vue'

const vm = new Vue ({
  el: '#app',
  Composants: {
    app: AppComponent,
  },
  rendre: h => h ('app'),
})

Tout d'abord, nous importons le composant, en faisant confiance à webpack et à vue-loader, pour nous en occuper. Nous déclarons ensuite le composant. Il s'agit d'une étape importante: par défaut, les composants Vue ne sont pas disponibles globalement. Chaque composant doit avoir une liste de tous les composants qu’il va utiliser et de la balise vers laquelle il sera mappé. Dans ce cas, parce que nous enregistrons notre composant comme suit:

 composants: {
  app: AppComponent,
}

Cela signifie que dans nos modèles, nous pourrons utiliser l'élément app pour faire référence à notre composant.

Enfin, nous définissons la fonction de rendu . Cette fonction est appelée avec un assistant – communément appelé h – capable de créer des éléments. Ce n’est pas si différent de la fonction React.createElement utilisée par React. Dans ce cas, nous lui donnons la chaîne 'app' car le composant que nous voulons restituer est enregistré avec le tag app .

Le plus souvent (et pour Dans la suite de ce didacticiel, nous n'utiliserons pas la fonction render sur d'autres composants, car nous définirons des modèles HTML. Mais le guide Vue.js de la fonction de rendu mérite une lecture si vous souhaitez plus d'informations.

Une fois que nous avons terminé, la dernière étape consiste à créer un script npm dans package.json :

 "scripts": {
  "start": "webpack-dev-server --mode development --open"
},

Maintenant, exécutez npm run start . Votre navigateur par défaut devrait s'ouvrir à http: // localhost: 8080 / et vous devriez voir «Hello, World!» À l'écran.

Essayez de modifier src / index.vue . changer le message en autre chose. Si tout s'est correctement déroulé, webpack-dev-server doit actualiser la page pour refléter vos modifications.

Yay! Nous sommes opérationnels avec Vue.js.

Avant de plonger dans une application un peu plus compliquée avec Vue, le temps est venu de mentionner que vous devez absolument installer le Vue devtools . Celles-ci se trouvent dans les outils de développement de Chrome et vous offrent un excellent moyen de parcourir votre application et toutes les propriétés transmises, en indiquant le contenu de chaque composant, etc.

Construction de l'application

En tant qu'exemple d'application, nous allons utiliser l'API GitHub pour créer une application nous permettant de saisir un nom d'utilisateur et d'afficher certaines statistiques de GitHub concernant cet utilisateur. J'ai choisi ici l'API GitHub, familière à la plupart des utilisateurs, utilisable sans authentification et nous fournissant une quantité d'informations considérable.

Avant de démarrer une application, j'aime bien réfléchir rapidement aux composants que nous utilisons. J'en aurai besoin, et je pense que notre composant App générera deux composants supplémentaires: GithubInput pour prendre les entrées de l'utilisateur, et GithubOutput qui affiche les informations de l'utilisateur à l'écran. Nous allons commencer par l'entrée.

Remarque: vous pouvez trouver tous les codes sur GitHub et même consulter l'application qui s'exécute en ligne .

Configuration initiale

Créez des dossiers pour les composants GithubOutput et GithubInput du répertoire src :

 mkdir src / {GithubInput, GithubOutput}.

Ajoutez les fichiers nécessaires à chacun:

 touch src / GithubInput / {index.vue, script.js, style.css}
touchez src / GithubOutput / {index.vue, script.js, style.css}

La structure du dossier src devrait maintenant ressembler à ceci:

.
├── App
├── index.vue
├── script.js
└── style.css
├── GithubInput
├── index.vue
├── script.js
└── style.css
├── GithubOutput
├── index.vue
├── script.js
└── style.css
├── index.html
└── index.js

Forms in Vue.js

Commençons par le composant GithubInput . Comme avec le composant App le fichier index.vue doit contenir le modèle, ainsi que le chargement dans le script et le fichier CSS. Le modèle contient simplement

github input

pour l'instant. Nous allons le remplir correctement sous peu. J'aime insérer du code HTML factice pour vérifier que le modèle est correctement branché lors de la création d'un nouveau composant:

Lors de la création de ce composant, l’une des choses que nous faisons différemment est de créer une donnée associée au composant. Ceci est très similaire au concept d’état de React:

 // src / GithubInput / script.js
défaut d'exportation {
  nom: 'GithubInput',
  Les données() {
    revenir {
      Nom d'utilisateur: '',
    }
  }
}

Cela signifie que ce composant a une donnée, nom d'utilisateur qu'il possède et est responsable. Nous mettrons bientôt cette fonctionnalité à jour en fonction des entrées de l'utilisateur.

Enfin, pour que ce composant s'affiche à l'écran, je dois l'enregistrer auprès du composant App car il s'agit de l'application App composant qui le rendra.

Pour ce faire, j'actualise src / App / script.js et lui parle de GithubInput :

 // src / App /script.js
importer GithubInput de '../GithubInput/index.vue'

défaut d'exportation {
  nom: 'App',
  Composants: {
    'github-input': GithubInput,
  },
  Les données() {
    revenir {}
  },
}

Ensuite, je peux mettre à jour le modèle du composant App :

  
 Hello World 
.
   

Une restriction des composants Vue (ce qui est également vrai dans Angular et React) est que chaque composant doit avoir un nœud racine. Ainsi, lorsqu'un composant doit restituer plusieurs éléments, il est important de ne pas oublier de les envelopper dans quelque chose, la plupart communément div .

Suivi d’une entrée de formulaire

Notre composant GithubInput devra faire deux choses:

• Conservez une trace de la valeur actuelle du paramètre input
• Communique que la valeur a changé, de sorte que les autres composants peuvent connaître et donc mettre à jour leur état.

Nous pouvons faire la première version en créant un formulaire avec un entrée élément en elle. Nous pouvons utiliser les directives intégrées de Vue qui nous permettent de garder une trace des valeurs de formulaire. Le modèle pour GithubInput ressemble à ceci:

  
   Go! 

Vous remarquerez deux attributs importants: v-on et v-model .

v-on est comment nous lions aux événements DOM dans Vue et appelez une fonction. Par exemple,

Cliquez sur moi!

appellerait la méthode foo du composant à chaque clic sur le paragraphe. Si vous souhaitez approfondir la gestion des événements, je recommande vivement la documentation Vue sur la gestion des événements .

v-model crée une liaison de données bidirectionnelle entre une entrée de formulaire et une donnée. Dans les coulisses, v-model écoute efficacement les événements de modification dans l'entrée de formulaire et met à jour les données du composant Vue pour les faire correspondre.

Si vous prenez notre modèle ci-dessus, voici comment nous utilisons v-on et v-model pour traiter les données sous la forme:

• v-on: submit.prevent = "onSubmit" lie le La méthode sur Soumettre doit être exécutée lors de la soumission du formulaire. En ajoutant .prevent cela signifie que Vue empêchera automatiquement l’action par défaut. (Si Vue ne le faisait pas, nous pourrions appeler event.preventDefault () dans notre code, mais nous pourrions également tirer parti de la fonctionnalité de Vue.)
• v-model: nom d'utilisateur lie la valeur de l'entrée à une valeur, nom d'utilisateur dans notre code. Pour ceux d'entre vous qui connaissent bien Angular, vous reconnaîtrez peut-être que cela ressemble beaucoup à ng-model . Lorsque nous avons créé GithubInput nous avons déclaré qu’il contenait une donnée, nom d’utilisateur et nous l’avons ici liée au champ de saisie. Les deux seront automatiquement synchronisés.

Maintenant, dans le code JavaScript de notre composant, nous pouvons déclarer la méthode onSubmit . Notez que le nom ici est entièrement arbitraire – vous pouvez choisir ce que vous voulez – mais je tiens à rester avec la convention de nommer la fonction après l'événement qui le déclenchera:

 export default {
  nom: 'GithubInput',
  Les données() {
    return {nom d'utilisateur: '',}
  },
  méthodes: {
    onSubmit (event) {
      if (this.username && this.username! == '') {
      }
    }
  }
}

Nous pouvons nous référer aux données directement sur ce donc this.username nous donnera la dernière valeur de la zone de texte. Si ce n’est pas vide, nous voulons que les autres composants sachent que les données ont changé. Pour cela, nous allons utiliser un bus de messages. Ce sont des objets sur lesquels les composants peuvent émettre des événements et les utiliser pour écouter d’autres événements. Lorsque votre application s'agrandit, vous pouvez envisager une approche plus structurée, telle que Vuex . Pour l'instant, un bus de messages fait le travail.

La ​​bonne nouvelle est que nous pouvons utiliser une instance Vue vide en tant que bus de messages. Pour ce faire, nous allons créer src / bus.js qui crée simplement une instance de Vue et l’exporte:

 importez Vue depuis 'vue'.
const bus = new Vue ()

Exporter le bus par défaut

Dans le composant GithubInput vous pouvez ensuite importer ce module et l'utiliser en émettant un événement lorsque le nom d'utilisateur change:

 import bus à partir de '../bus'

défaut d'exportation {
  ...
  méthodes: {
    onSubmit (event) {
      if (this.username && this.username! == '') {
        bus. $ emit ('new-username', this.username)
      }
    }
  },
  ...
}

Notre formulaire est terminé et nous sommes prêts à commencer à utiliser les données résultantes.

Affichage des résultats depuis GitHub

Le composant GithubOutput a la même structure que notre deux autres composants. Dans GithubOutput / script.js nous importons également le module bus car nous en aurons besoin pour savoir quand le nom d'utilisateur changera. Les données dont ce composant sera responsable seront un objet qui mappera les noms d'utilisateur GitHub aux données que nous avons obtenues de l'API GitHub. Cela signifie que nous n’aurons pas à faire la demande à l’API à chaque fois; si nous avons déjà récupéré les données, nous pouvons simplement les réutiliser. Nous allons également stocker le dernier nom d’utilisateur que nous avons reçu. Nous savons donc quelles données afficher à l’écran:

 // src / GithubOutput / script.js
importateur de '../bus'
importer Vue de 'vue'

défaut d'exportation {
  nom: 'GithubOutput',
  Les données() {
    revenir {
      currentUsername: null,
      githubData: {}
    }
  }
}

Lorsque le composant est créé, nous voulons écouter tous les événements new-username qui sont émis sur le bus de messages. Heureusement, Vue prend en charge un certain nombre de crochets de cycle de vie y compris créés . En tant que développeurs responsables, arrêtons également d’écouter les événements lorsque le composant est détruit à l’aide de l’événement détruit :

 export default {
  nom: 'GithubOutput',
  Les données: { ... },
  créé() {
    bus. $ on ('new-username', this.onUsernameChange)
  },
  détruit () {
    bus. $ off ('new-username', this.onUsernameChange)
  }
}

Nous définissons ensuite la méthode onUsernameChange qui sera appelée et définira la propriété currentUsername :

: {
  onUsernameChange (name) {
    this.currentUsername = nom
  }
},

Notez que nous n’avons pas à lier explicitement la méthode onUsernameChange à la portée actuelle. Lorsque vous définissez des méthodes sur un composant Vue, Vue appelle automatiquement myMethod.bind (this) . Elles sont donc toujours liées au composant. C'est l'une des raisons pour lesquelles vous devez définir les méthodes de votre composant sur l'objet méthodes afin que Vue en soit pleinement conscient et puisse les configurer en conséquence.

Conditional Rendering

Vous n'avez pas de nom d'utilisateur (nous ne le ferons pas lorsque le composant est créé pour la première fois), nous voulons montrer un message à l'utilisateur. Vue a un certain nombre de techniques de rendu conditionnel mais la plus simple est la directive v-if qui prend une condition et ne restitue l'élément que s'il existe. Il peut également être associé à v-else :

Une fois encore, cela semblera très familier à tous les développeurs angulaires. Nous utilisons double égal plutôt que triple égal ici parce que nous voulons que le conditionnel soit vrai non seulement si currentUsername vaut null mais aussi s'il est indéfini, et null == undefined est true .

Extraits de GitHub

Vue.js n'est pas livré avec une bibliothèque HTTP intégrée, et pour de bonnes raisons. De nos jours, l'API fetch est livrée de manière native dans de nombreux navigateurs (bien qu'au moment de l'écriture, pas IE11, Safari ou iOS Safari). Dans l’intérêt de ce didacticiel, je n’utiliserai pas de polyfill, mais vous pouvez facilement polyfiller l’API dans les navigateurs si vous en avez besoin. Si vous n'aimez pas l'API d'extraction, il existe de nombreuses bibliothèques tierces pour HTTP, et celle mentionnée dans Vue docs est Axios .

Je suis un grand partisan de frameworks tels que Vue not expédition avec les bibliothèques HTTP. Il réduit la taille de l'ensemble de la structure et permet aux développeurs de choisir la bibliothèque qui leur convient le mieux et de personnaliser facilement les demandes selon les besoins pour communiquer avec leur API. Je vais m'en tenir à l'API de récupération dans cet article, mais n'hésitez pas à l'échanger contre celle que vous préférez.

Si vous avez besoin d'une introduction à l'API de récupération, consultez le post de de Ludovico Fischer sur SitePoint . ]ce qui vous permettra de vous familiariser rapidement avec la vitesse.

Pour créer la requête HTTP, nous allons donner au composant une autre méthode, fetchGithubData qui envoie une requête à l'API GitHub et stocke le résultat. Il va également d'abord vérifier si nous avons déjà des données pour cet utilisateur, et ne pas faire la demande si c'est le cas:

 méthodes: {
  ...
  fetchGithubData (nom) {
    // si nous avons déjà des données, ne redemande pas
    if (this.githubData.hasOwnProperty (name)) renvoie

    const url = `https://api.github.com/users/$ {name}`
    chercher (url)
      .then (r => r.json ())
      .then (data => {
        // ici nous devons mettre à jour l'objet githubData
      })
  }
}

Nous avons enfin besoin de déclencher cette méthode lorsque le nom d'utilisateur change:

 méthodes: {
  onUsernameChange (name) {
    this.currentUsername = nom
    this.fetchGithubData (nom)
  },
  ...
}

Il y a une autre chose dont il faut être conscient, en raison de la façon dont Vue garde la trace des données avec lesquelles vous travaillez afin qu’elle sache quand mettre à jour la vue. Il existe un grand guide de réactivité qui l'explique en détail, mais Vue n'est pas en mesure de savoir comme par magie quand vous avez ajouté ou supprimé une propriété d'un objet, donc si nous le faisons:

 .githubData [name] = data

Vue ne le reconnaîtra pas et ne mettra pas à jour notre vue. Au lieu de cela, nous pouvons utiliser la méthode spéciale Vue.set qui indique explicitement à Vue que nous avons ajouté une clé. Le code ci-dessus ressemblerait alors à ceci:

 Vue.set (this.githubData, name, data)

Ce code modifiera this.githubData en ajoutant la clé et la valeur que nous lui transmettons. Il informe également Vue de la modification afin de pouvoir le rendre à nouveau.

Notre code ressemble à ceci:

 const url = `https://api.github.com/users/$ {name}`
chercher (url)
  .then (r => r.json ())
  .then (data => {
    Vue.set (this.githubData, nom, données)
  })

Enfin, nous devons enregistrer le composant GitHubOutput avec le composant App :

 // src / App / script.js
importer GithubInput de '../GithubInput/index.vue'
importer GithubOutput de '../GithubOutput/index.vue'

défaut d'exportation {
  nom: 'App',
  Composants: {
    'github-input': GithubInput,
    'github-output': GithubOutput,
  },
  Les données() {
    revenir {}
  },
}

Et incluez-le dans le modèle:

Bien que nous n’ayons pas encore écrit le code de vue pour afficher les données récupérées à l’écran, vous devriez pouvoir remplir le formulaire avec votre nom d’utilisateur, puis inspecter les outils de développement Vue pour voir les données demandées à GitHub. Cela montre à quel point ces devtools sont utiles et puissants; vous pouvez consulter l’état local de chaque composant et voir exactement ce qui se passe.

Affichage de certaines statistiques dans l’affichage

Nous pouvons maintenant mettre à jour le modèle pour afficher certaines données. Enveloppons ce code dans une autre directive v-if afin de ne restituer les données que si la demande est terminée:

   Entrez un nom d'utilisateur ci-dessus pour afficher leurs données GitHub.


   Vous trouverez ci-dessous les résultats de {{currentUsername}}.
  

    
 {{githubData [currentUsername] .name}} 4 
    
 {{githubData [currentUsername] .company}} 
    
 Nombre de mises en pension: {{githubData [currentUsername] .public_repos}} à jour 
  

Grâce à cela, nous pouvons maintenant afficher les détails du GitHub à l'écran, et notre application est terminée!

Refactors

Nous pouvons certainement apporter certaines améliorations. Le bit HTML ci-dessus qui restitue les données GitHub n'a besoin que d'une petite partie – les données de l'utilisateur actuel. C'est le cas idéal pour un autre composant auquel nous pouvons donner les données d'un utilisateur et qui peut le restituer.

Créons un composant GithubUserData en suivant la même structure que nos autres composants:

 mkdir src / GithubUserData
touchez src / GithubUserData / {index.vue, script.js, style.css}

Il n’ya qu’une petite différence avec ce composant: il faudra une propriété, data qui sera la donnée pour l’utilisateur. Les propriétés (ou «accessoires») sont des bits de données qu'un composant sera transmis par son parent. Ils se comportent dans Vue de la même manière que dans React. Dans Vue, vous devez déclarer explicitement chaque propriété dont un composant a besoin. Par conséquent, je dirai ici que notre composant prendra un seul accessoire, data :

 // src / GithubUserData / script.js
défaut d'exportation {
  nom: 'GithubUserData',
  accessoires: ['data'],
  Les données() {
    revenir {}
  }
}

Une des choses que j'aime vraiment dans Vue, c'est que vous devez être explicite. toutes les propriétés, données et composants qu'un composant utilisera sont explicitement déclarés. Cela rend le code beaucoup plus agréable à utiliser et, je suppose, beaucoup plus facile à mesure que les projets deviennent plus grands et plus complexes.

Dans le nouveau modèle, nous avons exactement le même code HTML qu'auparavant, bien que nous puissions nous référer aux données . plutôt que githubData [currentUsername]:

Pour utiliser ce composant, nous devons mettre à jour le composant GithubOutput . Premièrement, nous importons et enregistrons GithubUserData :

 // src / GithubOutput / script.js
importateur de '../bus'
importer Vue de 'vue'
importer GithubUserData de '../GithubUserData/index.vue'

défaut d'exportation {
  nom: 'GithubOutput',
  Composants: {
    'github-user-data': GithubUserData,
  },
  ...
}

Vous pouvez utiliser n’importe quel nom pour le composant lorsqu’il est déclaré. Par conséquent, là où j’ai placé github-user-data vous pouvez placer tout ce que vous voulez. Il est conseillé de vous en tenir aux composants comportant un tiret. Vue n'impose pas cela, mais la spécification W3C sur les éléments personnalisés stipule qu'ils doivent contenir un tiret pour éviter les conflits de nommage avec des éléments ajoutés dans les futures versions de HTML.

Une fois que nous avons déclaré le composant, nous pouvons l'utiliser notre modèle:

   Voici les résultats pour {{currentUsername}}:
   

La partie cruciale ici est comment je passe la propriété data à la composante:

: data = "githubData [currentUsername]"

Les deux points au début de cet attribut sont cruciaux; il indique à Vue que l’attribut que nous transmettons est dynamique et que le composant doit être mis à jour chaque fois que les données changent. Vue évaluera la valeur de githubData [currentUsername] et veillera à ce que le composant GithubUserData soit tenu à jour à mesure que les données changent.

Si vous trouvez : data a bit court et magique, vous pouvez également utiliser la syntaxe plus longue v-bind :

 v-bind: data = "githubData [currentUsername]"

Les deux sont équivalents, utilisez donc celui que vous préférez.

Conclusion

Notre application GitHub est dans un très bon état! Vous pouvez trouver tous les codes sur GitHub et même consulter l'application en ligne .

J'avais de grands espoirs lorsque j'ai démarré Vue, car je n'avais entendu que de bonnes choses , et je suis heureux de dire que cela a vraiment répondu à mes attentes. Travailler avec Vue donne l'impression de prendre les meilleures parties de React et de les fusionner avec les meilleures parties d'Angular. Certaines directives (comme v-if v-else v-model et ainsi de suite) sont vraiment faciles à démarrer (et plus facile à immediately understand than doing conditionals in React's JSX syntax), but Vue's component system feels very similar to React's.

You're encouraged to break your system down into small components, and all in all I found it a very seamless experience. I also can’t commend the Vue team highly enough for their documentation: it’s absolutely brilliant. The guides are excellent, and the API reference is thorough yet easy to navigate to find exactly what you’re after.

If you’ve enjoyed this post and would like to learn more, the best place to start is definitely the official Vue.js site.

I'm a JavaScript and Ruby Developer working in London, focusing on tooling, ES2015 and ReactJS.