Se mettre en service avec le cadre VUE.js 2.0

Vous voulez apprendre Vue.js à partir de zéro? SitePoint Premium propose une collection complète de livres Vue couvrant les bases, les projets, les conseils et les outils, etc. Rejoignez maintenant pour seulement 14,99 $ par mois.

Cet article a été mis à jour, principalement mis à jour la section des outils.

Depuis la version de la version JavaScript JavaScript populaire Vue.js de V2, j'ai hâte de l'essayer et de voir à quoi ça ressemble. En tant que personne qui connaît très bien Angular et React, j'ai hâte de voir les similitudes et les différences entre lui et entre Vue.

Vue 2 a d'excellentes mesures de performances, des charges relativement petites (la version Bundled Vue Runtime pèse environ 30 Ko après le rétrécissement et la compression GZIP), et la gestion de l'État des bibliothèques de support telles que Vue-Router et Vuex, Vue Library). C'est trop pour tout couvrir dans un seul article, mais faites attention aux articles de suivi et nous examinerons plus attentivement les différentes bibliothèques qui sont parfaitement intégrées au cadre principal.

points clés

• vue.js 2.0 introduit un Dom virtuel inspiré de React pour un rendu efficace et intègre des bibliothèques améliorées telles que Vue-Router et Vuex pour la gestion de l'État.
• Les composants sont la base de Vue.js 2.0, le cas échéant, les applications sont intégrées dans une série de composants imbriqués et un seul composant de fichier (.vue) est recommandé pour mieux organiser votre code.
• La configuration des projets Vue à partir de zéro nécessite WebPack et Vue-chargedeur pour traiter les fichiers .vue, et Babel pour utiliser les capacités JavaScript modernes pour améliorer le flux de travail de développement.
• Vue Devtools est essentiel pour le débogage, ce qui donne un aperçu de l'état de l'application et de la façon dont les données traversent les composants.
• vue.js 2.0 facilite la construction de formes interactives en tirant parti du modèle V pour la liaison de données bidirectionnels et en utilisant V-ON pour le traitement des événements personnalisés, rendant ainsi la gestion de l'état transparente entre les composants.
• Cet article montre la création d'une application d'acquisition de statistiques des utilisateurs GitHub qui utilise le système réactif et les crochets de cycle de vie de Vue pour gérer et afficher efficacement les données, et illustre l'utilisation réelle de Vue.js dans des scénarios réels.

Inspiration des autres bibliothèques

Lorsque vous apprenez ce tutoriel, vous verrez que Vue a de nombreuses fonctionnalités qui sont évidemment inspirées par d'autres cadres. C'est une bonne chose; c'est formidable de voir de nouveaux frameworks sur certaines idées d'autres bibliothèques et de les améliorer. En particulier, vous verrez que les modèles de Vue sont très proches des modèles d'Angular, mais que leurs approches de cycle de vie des composants et des composants sont plus proches de celles de React (et d'Angular).

Un tel exemple est que, comme React et presque tous les cadres du champ JavaScript d'aujourd'hui, Vue utilise le concept de Dom virtuel pour maintenir l'efficacité du rendu. Vue utilise une branche de Snabbdom, l'une des bibliothèques Virtual Dom les plus populaires. Le site Web de Vue contient une documentation sur son rendu virtuel DOM, mais en tant qu'utilisateur, il vous suffit de savoir que Vue est très bon pour garder la vitesse de rendu (en fait, dans de nombreux cas, il fonctionne mieux que React), ce qui signifie que vous pouvez être assuré que vous une plate-forme fiable est en cours de construction.

Composants, composants, composants

Comme les autres cadres aujourd'hui, les principaux blocs de construction de Vue sont des composants. Votre application doit être une série de composants qui sont construits les uns aux autres pour générer l'application finale. Vue.js va plus loin, suggérant (bien que non obligatoire) que vous définissez des composants dans un fichier .vue, puis l'outil de construction (que nous couvrirons en peu de temps) peut analyser ces fichiers. Étant donné que le but de cet article est d'explorer pleinement Vue et son utilisation, j'utiliserai cette convention pour cette application.

Vue Le fichier est le suivant:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

ou, si vous n'aimez pas mettre toutes les parties du composant dans un seul fichier, vous pouvez fournir à chaque élément un attribut SRC et pointer un fichier HTML, JS ou CSS distinct, respectivement.

Projet de paramètres

Bien que l'excellente Vue CLI facilite la configuration d'un projet complet, j'aime recommencer à zéro en commençant par la nouvelle bibliothèque afin que je puisse en savoir plus sur ces outils.

Maintenant, WebPack est mon outil de construction préféré, que nous pouvons utiliser en conjonction avec le plugin Vue-chargedeur pour prendre en charge le format de composant Vue.js que j'ai mentionné plus tôt. Nous avons également besoin de Babel et Env Presets afin que nous puissions écrire tout le code à l'aide de la syntaxe JavaScript moderne, ainsi que WebPack-Dev-Server, qui met à jour le navigateur lorsque les modifications de fichiers sont détectées.

Initialisons un projet et installons les dépendances:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Créez ensuite le dossier et le fichier initiaux:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

La structure du projet doit être la suivante:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Configuration de la configuration de WebPack maintenant. Cela se résume aux points suivants:

• Dire que WebPack utilise Vue-chargedeur
pour tout fichier .vue
• Dites à WebPack d'utiliser Babel et Envie Presets pour tout fichier .js
• Dire que WebPack utilise SRC / index.html comme modèle pour générer un fichier HTML pour Dev-Server pour fournir des services:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Enfin, nous ajouterons du contenu au fichier HTML et nous pouvons commencer!

<code class="language-html"><!DOCTYPE html>

  
    <title>My Vue App</title>
  
  
    <div id="app"></div>
  
</code>

Nous avons créé un div vide avec ID de l'application car c'est l'élément que nous placerons l'application Vue. Je préfère toujours utiliser des divs plutôt que des éléments corporels, car cela me donne le contrôle du reste de la page.

Rédaction de notre première application Vue.js

Nous resterons fidèles à chaque tutoriel de programmation précédent, écrivons une application VUE et mettez "Hello, World!"

Chaque application Vue est créée en importation de la bibliothèque puis en instanciant une nouvelle instance Vue:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Nous fournissons à Vue un élément à rendre à la page, nous créons donc une application Vue! Nous passons un sélecteur pour sélectionner l'élément que nous voulons que Vue remplace par notre application. Cela signifie que lorsque Vue s'exécute, il faudra l'application div # que nous avons créée et la remplacera par notre application.

La raison pour laquelle nous utilisons le nom de variable VM est parce qu'il représente le "modèle de vue". Bien qu'il ne soit pas strictement associé au modèle de modèle de modèle de vue du modèle (MVVM), VUe est partiellement inspiré par celui-ci, et la convention d'utiliser la machine virtuelle de nom variable pour représenter les applications VUE a été utilisée à ce jour. Bien sûr, vous pouvez nommer des variables comme vous le souhaitez!

Jusqu'à présent, notre application ne fait rien, alors créons notre premier composant, app.vue, qui rendra réellement quelque chose sur la page.

Vue ne spécifie pas la structure de l'application, c'est donc à vous. J'ai fini par créer un dossier pour chaque composant, dans ce cas l'application (j'aime les lettres majuscules, qui signifie un composant), qui contient trois fichiers:

• index.vue
• script.js
• style.css

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

La structure des fichiers doit maintenant ressembler à ceci:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

app / index.vue définit le modèle et importe d'autres fichiers. Cela correspond à la structure recommandée dans la section "À propos de la séparation des préoccupations" de la documentation VUE.

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

J'aime le nommer index.vue, mais vous pouvez également vouloir le nommer app.vue pour une recherche plus facile. Je préfère importer app / index.vue dans mon code plutôt que app / app.vue, mais encore une fois, vous ne pouvez pas être d'accord, alors n'hésitez pas à choisir n'importe quel nom que vous et votre équipe comme le plus.

À l'heure actuelle, notre modèle est juste

Bonjour, monde!

, je laisse le fichier CSS vide. Le travail principal se fait dans Script.js, qui ressemble à ceci:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Le faire crée un composant que nous nommerons en tant qu'application, qui est principalement à des fins de débogage, que je couvrirai plus tard, puis définit les données dont le composant possède et est responsable. Actuellement, nous n'avons pas de données, nous pouvons donc le dire à Vue en renvoyant un objet vide. Plus tard, nous verrons un exemple de composant qui utilise des données.

Maintenant, nous pouvons revenir sur src / index.js et dire à l'instance Vue de rendre nos composants d'application:

<code class="language-html"><!DOCTYPE html>

  
    <title>My Vue App</title>
  
  
    <div id="app"></div>
  
</code>

Tout d'abord, nous importons le composant et pensons que WebPack et Vue-chargedeur seront responsables de l'analyse. Ensuite, nous déclarons le composant. Il s'agit d'une étape importante: par défaut, le composant VUE n'est pas disponible à l'échelle mondiale. Chaque composant doit avoir une liste de tous les composants qu'ils utiliseront, et les balises auxquelles il sera mappé. Dans ce cas, parce que nous enregistrons notre composant comme ceci:

<code class="language-javascript">import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})</code>

Cela signifie que dans notre modèle, nous pourrons utiliser l'élément de l'application pour référencer nos composants.

Enfin, nous définissons la fonction de rendu. Cette fonction utilise un appel d'aide (généralement appelé h) capable de créer des éléments. Il n'est pas très similaire à la fonction React.CreateElement utilisée par React. Dans ce cas, nous lui fournissons l'application de chaîne car le composant que nous rendons est enregistré comme ayant l'application TAG.

La plupart des cas (et dans le reste de ce tutoriel), nous n'utiliserons pas la fonction de rendu sur d'autres composants, car nous définirons le modèle HTML. Cependant, si vous voulez en savoir plus, cela vaut la peine de lire le guide de Vue.js sur les fonctions de rendu.

Après

, la dernière étape consiste à créer un script NPM dans package.json:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Maintenant, exécutez NPM Run Start. Votre navigateur par défaut doit s'ouvrir à https://www.php.cn/link/03b0db8c971432a5e8d163897176a7cc et vous devriez voir "bonjour, monde!" Sur votre écran.

Essayez de modifier src / index.vue pour changer le message en autre chose. Si tout se passe bien, WebPack-Dev-Server doit actualiser la page pour refléter vos modifications.

génial! Nous courons en utilisant Vue.js.

vue Devtools

Avant de fouiller dans une application Vue légèrement plus complexe, il est temps de mentionner que vous devriez certainement installer Vue Devtools. Ceux-ci sont situés dans Chrome Developer Tools, vous offrant un excellent moyen de visualiser votre application et toutes les propriétés adoptées, l'état de chaque composant, et plus encore.

Créez l'application

En tant qu'exemple d'application, nous utiliserons l'API GitHub pour créer une application, entrons un nom d'utilisateur et visons certaines statistiques GitHub pour cet utilisateur. J'ai choisi l'API GitHub ici car elle est familière à la plupart des gens, peut être utilisée sans authentification, et elle nous fournit beaucoup d'informations.

Avant de démarrer l'application, j'aime réfléchir rapidement aux composants dont nous avons besoin, je pense que notre composant d'application rendra deux autres composants: GitHubInput, qui est utilisé pour recevoir les entrées de l'utilisateur, et GitHuboutput, qui affichera les utilisateurs, ce qui affichera l'utilisateur Écran des informations sur. Nous commencerons par l'entrée.

Remarque: Vous pouvez trouver tout le code sur GitHub et même afficher les applications exécutées en ligne.

Paramètres initiaux

Créer des dossiers pour les composants GitHuboutput et GitHubinput dans le répertoire SRC:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Ajouter les fichiers nécessaires à chaque dossier:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

La structure du dossier

src devrait maintenant ressembler à ceci:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Formulaires dans Vue.js

Commençons par le composant GitHubinput. Comme les composants de l'application, le fichier index.vue doit contenir des modèles, ainsi que des scripts de chargement et des fichiers CSS. Actuellement, le modèle ne contient que

entrée github

. Nous le remplirons correctement bientôt. J'aime mettre un HTML virtuel afin que je puisse vérifier si mon modèle est correctement connecté lors de la création d'un nouveau composant:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Ce que nous faisons différemment lors de la création de ce composant, c'est de créer des extraits de données associés au composant. Ceci est très similaire au concept d'état de React:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Cela signifie que ce composant a un morceau de données dont il possède et est responsable, c'est-à-dire le nom d'utilisateur. Nous le mettrons bientôt à jour en fonction de la saisie de l'utilisateur.

Enfin, afin de mettre ce composant à l'écran, je dois l'enregistrer avec le composant de l'application car le composant de l'application le rendra.

Pour cela, je met à jour src / app / script.js et je le dis githubinput:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

Ensuite, je peux mettre à jour le modèle du composant de l'application:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Une limitation des composants Vue (comme c'est vrai dans Angular et React) est que chaque composant doit avoir un nœud racine, donc lorsque le composant doit rendre plusieurs éléments, il est important de se rappeler de les envelopper tous dans quelque chose, la plupart Un commun est div.

Track Form Form Input

Notre composant GitHubinput doit faire deux choses:

• Suivi de la valeur actuelle de l'entrée
• découvert que la valeur a été modifiée afin que les autres composants puissent connaître et mettre à jour leur statut en conséquence.

Nous pouvons compléter la première version en créant un formulaire contenant des éléments d'entrée. Nous pouvons utiliser les directives intégrées de Vue pour suivre les valeurs de formulaire. Le modèle de githubinput est le suivant:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Vous remarquerez qu'il existe deux propriétés importantes: V-on et V-model.

V-on est la façon dont nous nous lions aux événements DOM et aux fonctions d'appel dans Vue. Par exemple,

cliquez sur moi!

Chaque fois qu'un paragraphe est cliqué, la méthode FOO du composant est appelée. Si vous souhaitez en savoir plus sur la gestion des événements, je recommande fortement la documentation de Vue sur la gestion des événements. Le modèle V crée une liaison de données bidirectionnelle entre l'entrée de formulaire et les données. Dans les coulisses, V-model écoute en fait des événements de changement sur l'entrée de formulaire et la mise à jour des données dans les composants VUE à correspondre.

Compte tenu de notre modèle ci-dessus, voici comment nous utilisons V-on et V-model pour traiter les données sous la forme:

• v-on: soumed.prevent = "onSubmit" exécute onSubmit lors de la liaison de la méthode onSubmit pour former la soumission. En ajoutant .Prevent, cela signifie que Vue empêchera automatiquement l'action par défaut de se produire. (Si Vue ne fait pas cela, nous pouvons appeler Event.PreventDefault () dans le code, mais nous pourrions aussi bien profiter de la fonctionnalité de Vue.)
• V-model: le nom d'utilisateur lie la valeur entrée au nom d'utilisateur de la valeur dans le code. Pour ceux qui connaissent Angular, vous pouvez réaliser que cela est très similaire au modèle NG. Lorsque nous créons GitHubinput, nous déclarons qu'il a un nom d'utilisateur de données, où nous lions ces données au champ de saisie. Les deux resteront automatiquement synchronisés.

Maintenant, de retour au JavaScript de notre composant, nous pouvons déclarer la méthode onSubmit. Notez que le nom ici est complètement arbitraire - vous pouvez choisir n'importe quel nom à volonté - mais j'aime m'en tenir à la convention d'utilisation des fonctions nommées selon l'événement qui déclenchera l'événement:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Nous pouvons référencer directement les données à ce sujet, donc ce.Username fournira la dernière valeur de la zone de texte. S'il n'est pas vide, nous voulons que d'autres composants sachent que les données ont changé. Pour ce faire, nous utiliserons le bus de messages. Ce sont des objets que les composants peuvent émettre des événements et utiliser pour écouter d'autres événements. Lorsque votre application s'agrandit, vous voudrez peut-être envisager une approche plus structurée, comme Vuex. Actuellement, le bus de messages peut le faire.

La bonne nouvelle est que nous pouvons utiliser une instance Vue vide comme bus de message. Pour ce faire, nous créerons SRC / Bus.js, qui crée simplement une instance Vue et l'exporte:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Dans le composant GitHubinput, nous pouvons importer le module et l'utiliser en émettant des événements lorsque le nom d'utilisateur change:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

De cette manière, notre formulaire est rempli et nous pouvons commencer à faire quelque chose avec les données générées.

Afficher les résultats de github

Le composant GitHubOutput a la même structure que nos deux autres composants. Dans GitHubOutput / Script.js, nous importons également le module de bus car nous en avons besoin pour savoir quand le nom d'utilisateur change. Les données de ce composant seront responsables seront un objet qui mappe le nom d'utilisateur GitHub aux données que nous obtenons de l'API GitHub. Cela signifie que nous n'avons pas à faire une demande à l'API à chaque fois; Nous stockons également le dernier nom d'utilisateur que nous avons reçu afin que nous sachions quelles données sont affichées à l'écran:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Lors de la création d'un composant, nous voulons écouter tout événement du New-Username émis dans le bus de message. Heureusement, Vue soutient de nombreux crochets du cycle de vie, notamment créé. Parce que nous sommes des développeurs responsables, nous cesserons également d'écouter des événements en utilisant l'événement détruit lorsque la destruction des composants:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Ensuite, nous définissons la méthode onUserAmECHANGE, qui sera appelée et définira la propriété CurrentUserName:

<code class="language-html"><!DOCTYPE html>

  
    <title>My Vue App</title>
  
  
    <div id="app"></div>
  
</code>

Notez que nous n'avons pas à lier explicitement la méthode onUserameChange à la portée actuelle. Lorsque vous définissez une méthode sur un composant Vue, Vue appelle automatiquement MyMethod.bind (ceci), donc ils sont toujours liés au composant. C'est l'une des raisons pour lesquelles vous devez définir des méthodes de composants sur l'objet Methods afin que Vue puisse les comprendre pleinement et les définir en conséquence.

rendu conditionnel

Si nous n'avons pas de nom d'utilisateur - nous ne l'aurons pas lorsque le composant est créé pour la première fois - nous voulons afficher un message à l'utilisateur. Vue a de nombreuses techniques de rendu conditionnel, mais la plus simple est la directive V-IF, qui accepte une condition et ne rend les éléments que si la condition existe. Il fonctionne également avec V-else:

<code class="language-javascript">import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})</code>

Encore une fois, cela est très familier à tout développeur angulaire. Nous utilisons un signe double au lieu d'un triple signe ici, car nous voulons que la condition soit vraie non seulement lorsque CurrentUserName est nul, mais aussi lorsque CurrentUserName n'est pas défini, et null == Undefined est vrai.

Obtenez des données de GitHub

vue.js ne vient pas avec sa propre bibliothèque HTTP, et c'est pour une bonne raison. Aujourd'hui, l'API Fetch est nativement incluse dans de nombreux navigateurs (bien qu'au moment de la rédaction, à l'exception de IE11, de safari ou de safari iOS). Pour le bien de ce tutoriel, je n'utiliserai pas de polyfill, mais si vous en avez besoin, vous pouvez facilement ajouter du polyfill pour l'API dans votre navigateur. Si vous n'aimez pas l'API Fetch, il existe de nombreuses bibliothèques tierces pour HTTP, et celle mentionnée dans la documentation VUE est Axios.

Je soutient beaucoup des cadres comme Vue qui n'incluent pas les bibliothèques HTTP. Il réduit la taille du bundle du cadre et permet aux développeurs de choisir la bibliothèque qui les convient le mieux, et personnalise facilement les demandes au besoin pour communiquer avec leur API. Je m'en tiendrai à l'API Fetch dans cet article, mais vous pouvez vous sentir libre de le remplacer par n'importe quelle bibliothèque que vous aimez.

Si vous avez besoin de connaître l'API Fetch, consultez le post sur Ludovico Fischer sur SitePoint, qui vous amènera rapidement.

Pour faire des demandes HTTP, nous fournirons au composant une autre méthode FetchGitHubData, qui fait une demande à l'API GitHub et stocke les résultats. Il vérifiera également d'abord si nous avons déjà les données pour cet utilisateur, et sinon, aucune demande ne sera faite:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Ensuite, nous avons juste besoin de déclencher cette méthode lorsque le nom d'utilisateur change:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Une autre chose à noter est que puisque Vue suit les données que vous utilisez, il sait quand mettre à jour la vue. Il y a un excellent guide réactif l'expliquant en détail, mais essentiellement Vue ne peut pas savoir par magie quand vous avez ajouté ou supprimé les propriétés des objets, donc si nous le faisons:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

Vue ne reconnaîtra pas cela et ne mettra pas à jour nos vues. Au lieu de cela, nous pouvons utiliser une méthode spéciale Vue.set, qui dit explicitement à Vue que nous avons ajouté une clé. Le code ci-dessus ressemblera à ceci:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Ce code modifiera ceci.githubdata, ajoutant les clés et les valeurs que nous y transmettons. Il informe également Vue des changements afin qu'il puisse être remis.

Maintenant, notre code ressemble à ceci:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Enfin, nous devons enregistrer le composant GitHubOutput à l'aide du composant APP:

<code class="language-html"><!DOCTYPE html>

  
    <title>My Vue App</title>
  
  
    <div id="app"></div>
  
</code>

et incluez-le dans le modèle:

<code class="language-javascript">import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})</code>

Bien que nous n'ayons pas écrit de 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 vérifier Vue Devtools pour afficher les données demandées à GitHub. Cela montre à quel point ces Devtools sont pratiques et puissants; vous pouvez vérifier le statut local de n'importe quel composant et voir exactement ce qui se passe.

Afficher certaines statistiques dans la vue

Nous pouvons maintenant mettre à jour le modèle pour afficher certaines données. Emballons ce code dans une autre directive V-IF afin que nous rendions les données uniquement une fois la demande terminée:

<code class="language-bash">mkdir src/App
touch src/App/{index.vue,script.js,style.css}</code>

De cette façon, nous pouvons maintenant rendre les détails GitHub à l'écran et notre application est terminée!

refactor

Nous pouvons certainement apporter des améliorations. Le code HTML qui rend les données GitHub ci-dessus ne nécessite qu'une petite partie des données de l'utilisateur actuel. Il s'agit d'un cas parfait pour un autre composant, nous pouvons lui fournir des données utilisateur, elle peut la rendre.

Créons un composant GitHubuserData avec la même structure que nos autres composants:

<code class="language-html"><template>
  <p>This is my HTML for my component</p>
</template>



<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style></code>

Il n'y a qu'une seule petite différence dans ce composant: il obtiendra une données de propriété, qui sera les données de l'utilisateur. Les propriétés (ou "accessoires") sont des bits de données qu'un composant passera par son composant parent, et ils se comportent très également en Vue pour réagir. En Vue, vous devez déclarer explicitement chaque propriété dont le composant a besoin, donc je dirai ici que notre composant obtiendra une propriété Données:

<code class="language-bash">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-compiler webpack-dev-server html-webpack-plugin --save-dev</code>

Ce que j'aime vraiment à propos de Vue, c'est que vous devez être très clair; Cela rend le code plus facile à utiliser, et je pense que à mesure que le projet devient plus grand et plus complexe, il est plus facile à entretenir.

Dans le nouveau modèle, nous avons exactement le même HTML qu'auparavant, bien que nous puissions nous référer aux données au lieu de GitHubData [CurrentUserName]:

<code class="language-bash">mkdir src
touch webpack.config.js src/index.html src/index.js</code>

Pour utiliser ce composant, nous devons mettre à jour le composant GitHubOutput. Tout d'abord, nous importons et enregistrons GitHubuserData:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Vous pouvez utiliser n'importe quel nom lors de la déclaration du composant, donc où je mets les données GitHub-User, vous pouvez placer le nom que vous voulez. Il est recommandé de vous en tenir aux composants contenant des tirets. Vue n'applique pas cela, mais la spécification W3C pour les éléments personnalisés indique qu'ils doivent contenir des tirets pour empêcher les conflits de nom de vie avec des éléments ajoutés dans les versions futures de HTML.

Après avoir déclaré le composant, nous pouvons l'utiliser dans le modèle:

<code class="language-javascript">//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        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"
    })
  ]
}</code>

Le point crucial ici est comment je transmets l'attribut de données au composant:

<code class="language-html"><!DOCTYPE html>

  
    <title>My Vue App</title>
  
  
    <div id="app"></div>
  
</code>

Le côlon au début de cette propriété est crucial; Vue évaluera la valeur de GitHubdata [CurrentUsername] et s'assurera que le composant GitHubuserData reste à jour à mesure que les données changent.

Si vous trouvez: Données un peu courtes et magiques, vous pouvez également utiliser une syntaxe de biaire V plus longue:

<code class="language-javascript">import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})</code>

Les deux sont équivalents, veuillez donc utiliser l'une de vos préférences.

Conclusion

De cette façon, notre application GitHub est dans un assez bon état! Vous pouvez trouver tout le code sur GitHub et même afficher les applications exécutées en ligne.

J'avais de grands espoirs pour Vue quand j'ai commencé à l'utiliser parce que j'ai entendu beaucoup de bonnes choses et je suis heureux de dire que cela répondait à mes attentes. L'utilisation de Vue a envie de prendre les meilleures parties de la réact et de les fusionner avec les meilleures parties d'Angular. Certaines directives (telles que V-IF, V-Else, V-model, etc.) sont très faciles à démarrer (et plus faciles à comprendre immédiatement que les jugements conditionnels dans la syntaxe JSX de React), mais le système de composants de Vue se sent très similaire à React's's .

Vous devriez décomposer le système en petits composants, et dans l'ensemble, j'ai trouvé que c'était une expérience très transparente. Je ne peux pas encore faire l'éloge de la documentation de l'équipe Vue: c'est absolument génial. Le guide est excellent, la référence de l'API est complète et facile à naviguer pour trouver la chose exacte que vous voulez.

Si vous aimez cet article et que vous souhaitez en savoir plus, le meilleur point de départ est certainement le site officiel de Vue.js.

Des questions fréquemment posées sur Vue.js 2.0

Quelle est la principale différence entre Vue.js 1.0 et Vue.js 2.0?

vue.js 2.0 a plusieurs améliorations par rapport à son prédécesseur. Le changement le plus important est l'introduction d'un DOM virtuel, qui améliore les performances en réduisant les opérations directes sur le DOM réel. Vue.js 2.0 introduit également une syntaxe de développement basée sur des composants simplifiée pour faciliter la construction d'interfaces utilisateur complexes. De plus, Vue.js 2.0 prend en charge le rendu côté serveur, ce qui améliore les performances de votre application et facilite l'optimisation du référencement.

Comment utiliser les observateurs dans Vue.js 2.0?

L'observateur de Vue.js 2.0 vous permet d'exécuter une logique personnalisée lorsque les propriétés de données changent. Pour utiliser Observer, vous devez définir une fonction avec le même nom que l'attribut de données que vous souhaitez observer et l'ajouter à l'objet "Watch" dans l'instance Vue. Cette méthode est appelée chaque fois que l'attribut de données change et que ses valeurs nouvelles et anciennes sont prises sous forme de paramètres.

Quelle est la charge urgente dans Vue.js et comment puis-je l'utiliser?

Le chargement d'urgence est un concept de Vue.js qui vous permet de charger des données du serveur avant d'en avoir besoin, améliorant ainsi les performances de votre application. Pour utiliser un chargement urgent dans vue.js, vous pouvez utiliser le crochet de cycle de vie "créé" pour obtenir des données du serveur lorsque le composant est créé. Ces données seront ensuite disponibles immédiatement après le rendu du composant.

Comment utiliser les propriétés calculées dans Vue.js 2.0?

Les propriétés calculées de Vue.js 2.0 vous permettent de définir les propriétés réutilisables calculées en fonction de vos données. Pour utiliser les propriétés calculées, vous devez définir une méthode qui renvoie la valeur calculée et l'ajouter à l'objet calculé dans l'instance Vue. Cette méthode est appelée chaque fois que des données attribuent, elles dépendent du changement, et sa valeur de retour est mise en cache jusqu'à ce que la dépendance change à nouveau.

Comment gérer les événements dans Vue.js 2.0?

vue.js 2.0 fournit un puissant système de gestion d'événements qui vous permet d'écouter les événements DOM et d'exécuter une logique personnalisée lorsque des événements se produisent. Pour gérer les événements, vous devez utiliser la directive "V-on" dans le modèle, suivie du nom de l'événement à écouter et de la méthode à exécuter lorsque l'événement se produit. Cette méthode sera appelée en utilisant l'objet Event comme paramètre.

Comment utiliser Vue.js 2.0 avec Laravel?

vue.js 2.0 peut être facilement intégré à Laravel, un cadre PHP populaire. Laravel est livré avec le support Vue.js, vous pouvez donc commencer à construire des composants Vue.js immédiatement. Pour utiliser Vue.js dans un projet Laravel, vous devez inclure le script Vue.js dans HTML, puis définir le composant VUE dans un fichier JavaScript séparé.

Comment utiliser Vue.js 2.0 avec WebPack?

WebPack est un bundler de module qui peut être utilisé pour regrouper les composants Vue.js dans un seul fichier javascript. Pour utiliser Vue.js avec WebPack, vous devez installer le package "Vue-chargedeur", qui permet à WebPack de comprendre les composants VUE. Vous pouvez ensuite importer des composants Vue dans votre fichier JavaScript et les utiliser comme d'habitude.

Comment utiliser Vue.js 2.0 avec TypeScript?

vue.js 2.0 prend en charge TypeScript, un sur-ensemble typique de JavaScript. Pour utiliser Vue.js avec TypeScript, vous devez installer le package "Vue-Class-Component", qui vous permet de définir les composants Vue à l'aide de la classe TypeScript. Vous pouvez ensuite définir le composant VUE comme une classe TypeScript et utiliser la fonctionnalité typique statique de TypeScript pour attraper des erreurs au moment de la compilation.

Comment utiliser Vue.js 2.0 avec Vuex?

Vuex est une bibliothèque de gestion d'État pour Vue.js qui vous permet de gérer l'état de votre application dans un stockage centralisé. Pour utiliser Vuex avec Vue.js, vous devez installer le package "Vuex", puis définir votre statut, mutations, actions et getters dans le stockage Vuex. Vous pouvez ensuite utiliser la propriété "this. $ Store" pour accéder à votre état et planifier des actions à partir du composant VUE.

Comment utiliser Vue.js 2.0 avec le routeur Vue?

Vue Router est une bibliothèque de routage pour vue.js qui vous permet de définir des itinéraires pour votre application. Pour utiliser le routeur Vue avec Vue.js, vous devez installer le package "Vue-Router", puis définir votre itinéraire dans l'instance du routeur Vue. Vous pouvez ensuite utiliser le composant "Router-Link" pour naviguer entre les itinéraires et utiliser le composant "Router-View" pour afficher les composants actuellement routés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!