[Crazy God Talks Java] Notes détaillées sur la mise en route de Vue (complète)

1. Vue d'ensemble

1.1. Aperçu de la vue

Vue (prononcé /vju/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur , publié en février 2014. Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue , qui est non seulement facile à démarrer, mais également facile à intégrer avec des bibliothèques tierces (telles que : vue-router : jump, vue-resource : communication, vuex : management) ou projets existants.
Principe SOC : principe de séparation des préoccupations

1.2. Système de connaissances front-end

Il reste encore beaucoup de chemin à parcourir pour devenir un véritable « ingénieur full-stack Internet Java », parmi lesquels « My Big Front End » est un cours obligatoire et incontournable. L'objectif principal de cette étape du cours est d'amener mes programmeurs Java background à connaître, comprendre et maîtriser le front-end, afin de faire un pas en avant pour devenir un "ingénieur Internet Java full-stack".

1.3. Trois éléments du front-end

• HTML (structure) : Hyper Text Markup Language (Hyper Text Markup Language), détermine la structure et le contenu des pages Web
• CSS (Présentation) : Feuilles de style en cascade (Cascading Style sheet), définissez le style de présentation de la page Web
• JavaScript (comportement) : C'est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé, mais est interprété et exécuté par le navigateur pour contrôler le comportement des pages Web.

1.4. Couche de présentation (CSS)

La feuille de style en cascade CSS est un langage de balisage , pas un langage de programmation, elle ne peut donc pas personnaliser les variables, ne peut pas citer, etc. En d'autres termes, elle n'a aucun support de syntaxe. Ses principaux défauts sont les suivants :

• La syntaxe n'est pas assez puissante, par exemple, elle ne peut pas être imbriquée, ce qui nécessite d'écrire de nombreux sélecteurs répétés dans le développement modulaire ;
• Sans variables et sans mécanisme de réutilisation de style raisonnable, les valeurs d'attribut logiquement liées doivent être générées à plusieurs reprises sous forme de littéraux, ce qui rend leur maintenance difficile ;

Cela a entraîné une augmentation déraisonnable de la charge de travail au travail. Afin de résoudre ce problème, les développeurs front-end utiliseront un outil appelé [ Préprocesseur CSS ] pour fournir le mécanisme de réutilisation des couches de style manquantes de CSS, réduire le code redondant et améliorer la maintenabilité du code de style. Améliore considérablement l'efficacité du développement de styles front-end. (Par exemple, les pages ont des besoins différents à des moments différents, et les styles de Taobao seront différents sur Double 11 et 618)

1.5. Préprocesseur CSS

Le préprocesseur CSS définit un nouveau langage. L'idée de base est d'utiliser un langage de programmation spécialisé pour ajouter certaines fonctionnalités de programmation au CSS, d'utiliser CSS comme cible pour générer des fichiers, puis les développeurs n'ont qu'à utiliser ce langage. . Traduit en mots faciles à comprendre, cela signifie « utiliser un langage de programmation spécial pour concevoir le style de la page Web, puis le convertir en un fichier CSS normal via un compilateur pour une utilisation dans le projet. » Quels
sont les préprocesseurs CSS couramment utilisés ?

• SASS : Basé sur Ruby, traité via le serveur, et possède des fonctions puissantes. Haute efficacité d’analyse. Vous devez apprendre le langage Ruby, qui est plus difficile à démarrer que LESS.
• MOINS : Basé sur NodeJS, traité via le client, simple à utiliser. La fonction est plus simple que SASS et l'efficacité de l'analyse est également inférieure à celle de SASS, mais elle est suffisante dans le développement réel, notre équipe backend recommande donc d'utiliser LESS si nécessaire.

1.6. Couche de comportement (JavaScript)

JavaScript est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé avant d'être envoyé au client pour exécution. Au lieu de cela, les codes de caractères au format texte sont envoyés au navigateur pour interprétation et exécution par le navigateur.
Développement JS natif
Le développement JS natif signifie que nous suivons la méthode de développement standard [ECMAScript], appelée ES en abrégé, la particularité est que tous les navigateurs la supportent. Au moment de la publication actuelle du blog, la norme ES a publié les versions suivantes :

• ES3
• ES4 (version interne non sollicitée)
• ES5 (prise en charge complète du navigateur)
• ES6 (couramment utilisé, version grand public actuelle : l'empaquetage Webpack devient le support ES5 ! )
• ES7
• ES8
• ES9 (étape de rédaction)

La différence est que de nouvelles fonctionnalités sont ajoutées progressivement.

1.7. Manuscrit

TypeScript est un langage de programmation gratuit et open source développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript qui ajoute essentiellement au langage un typage statique facultatif et une programmation orientée objet basée sur les classes. Dirigé par Anders Heilsberg (père de C#, Delphi, TypeScript ; créateur de .NET).
La caractéristique de ce langage est qu'en plus des fonctionnalités d'ES, il intègre également de nombreuses nouvelles fonctionnalités qui ne rentrent pas dans le champ d'application de la norme. Par conséquent, de nombreux navigateurs ne peuvent pas prendre en charge directement la syntaxe TypeScript et doivent être compilés (compilés en JS). avant qu'il puisse être correctement exécuté par le navigateur. .

1.8. Cadre JavaScript

• jQuery : Un framework JavaScript bien connu. L'avantage est qu'il simplifie les opérations DOM. L'inconvénient est que les opérations DOM sont trop fréquentes , ce qui affecte les performances du front-end ; aux yeux du front-end, il ne sert qu'à être compatible avec IE6, 7 et 8 ;
• Angular : Le framework front-end acquis par Google a été développé par un groupe de programmeurs Java. Il se caractérise par le déplacement du modèle MVC back-end vers le front-end et l'ajout du concept de développement modulaire. Il coopère avec Microsoft et utilise TypeScript syntaxe à développer ; elle est conviviale pour les programmeurs back-end. Pas très conviviale pour les programmeurs front-end ; le plus gros inconvénient est que l'itération des versions est déraisonnable (par exemple : 1ère génération -> 2ème génération, à part le nom, c'est en gros deux choses ; au moment de la publication du blog, Angular6 a été lancé)
• React : Produit par Facebook, un framework front-end JS hautes performances ; sa caractéristique est qu'il propose un nouveau concept [DOM virtuel] pour réduire les opérations DOM réelles et simuler les opérations DOM en mémoire, améliorant efficacement l'efficacité du rendu front-end ; son L'inconvénient est qu'il est compliqué à utiliser, car vous devez apprendre un langage [JSX] supplémentaire ;
• Vue : Un framework JavaScript progressif. Progressif signifie la mise en œuvre progressive de nouvelles fonctionnalités, telles que le développement modulaire, le routage, la gestion des états et d'autres nouvelles fonctionnalités. Sa particularité est de combiner les avantages d'Angular (modularité) et de React (DOM virtuel) ;
• Axios : framework de communication front-end ; parce que les limites de Vue sont très claires, il s'agit de traiter le DOM, il n'a donc pas de capacités de communication. À ce stade, vous devez utiliser un framework de communication supplémentaire pour interagir avec le serveur ; de Bien sûr, vous pouvez aussi directement choisir d'utiliser la fonction de communication AJAX fournie par jQuery ;

Trois frameworks front-end majeurs : Angular, React, Vue

1.9. Cadre de l'interface utilisateur

• Ant-Design : produit par Alibaba, un framework d'interface utilisateur basé sur React
• ElementUI, iview, ice : produit par Ele.me, un framework d'interface utilisateur basé sur Vue
• Bootstrap : une boîte à outils open source pour le développement front-end lancée par Twitter
• AmazeUI : également appelé "Meizi UI", un framework frontal multi-écran HTML5.

Outils de création JavaScript

• Babel : outil de compilation JS, principalement utilisé pour les nouvelles fonctionnalités ES non prises en charge par les navigateurs, comme la compilation de TypeScript
• WebPack : Packager de modules, sa fonction principale est l'empaquetage, la compression, la fusion et le chargement séquentiel.
  Remarque : Les points de connaissances ci-dessus ont trié toutes les compétences requises pour le développement de WebApp.

1.10. Trois extrémités en une

L'objectif principal du développement hybride (Hybid App)
est d'unifier un ensemble de codes sur trois terminaux (PC, Android : .apk, iOS : .ipa) et de pouvoir appeler des composants sous-jacents (tels que des capteurs, des GPS, des caméras, etc. .), mode de conditionnement Il en existe principalement deux types :

• Packaging cloud : HBuild -> HBuildX, produit par DCloud ; API Cloud
• Emballage local : Cordova (anciennement PhoneGap)

1.11. Technologie back-end

Le personnel front-end doit également maîtriser certaines technologies back-end afin de faciliter le développement.Cependant, nous, le personnel Java back-end, savons que le système de connaissances back-end est extrêmement vaste et complexe.Par conséquent, afin de faciliter le front-end personnel pour développer des applications back-end, des technologies telles que NodeJS ont vu le jour.

L'auteur de NodeJS a affirmé abandonner NodeJS (en disant que l'architecture n'est pas bien faite et que les modules node_ encombrants pourraient rendre l'auteur mécontent) et a commencé à développer Deno avec une nouvelle architecture.

Puisqu'il s'agit d'une technologie back-end, elle nécessite absolument des frameworks et des outils de gestion de projet. Le framework NodeJS et les outils de gestion de projet sont les suivants :

• Express : framework NodeJS
• Koa : version express simplifiée
• NPM : outil complet de gestion de projet, similaire à Maven
• YARN : Une alternative au NPM, similaire à la relation entre Maven et Gradle

2. MVVM

2.1. Qu'est-ce que MVVM

MVVM (Model-View-ViewModel) est un modèle de conception d'architecture logicielle développé par Microsoft WPF (utilisé pour remplacer WinForm, qui était utilisé pour développer des applications de bureau dans le passé) et Silverlight (similaire à Java Applet, pour faire simple, c'est navigation Développée par Ken Cooper et Ted Peters, les architectes de WPF (fonctionnant sur Windows Server), il s'agit d'une méthode de programmation événementielle qui simplifie l'interface utilisateur . Publié par John Gossman (également l'architecte de WPF et Silverlight) en 2005 sur son blog.
MVVM est dérivé du modèle classique MVC (ModI-View-Controller). Le cœur de MVVM est la couche ViewModel, qui est responsable de la conversion des objets de données dans le modèle pour rendre les données plus faciles à gérer et à utiliser. Ses fonctions sont les suivantes :

• Cette couche effectue une liaison de données bidirectionnelle vers le haut avec la couche de vue.
• Effectuer une interaction de données vers le bas avec la couche Modèle via des requêtes d'interface

2.2. Pourquoi utiliser MVVM

Le pattern MVVM est le même que le pattern MVC. Le but principal est de séparer la vue (View) et le modèle (Model). Il présente plusieurs avantages :

• Faible couplage : la vue (View) peut changer et se modifier indépendamment du modèle. Un ViewModel peut être lié à différentes vues. Lorsque la vue change, le modèle peut rester inchangé, et lorsque le modèle change, la vue peut également rester inchangée.
• Réutilisable : vous pouvez mettre une logique de vue dans un ViewModel et laisser de nombreuses vues réutiliser cette logique de vue.
• Développement indépendant : les développeurs peuvent se concentrer sur la logique métier et le développement de données (ViewModel), et les concepteurs peuvent se concentrer sur la conception des pages.
• Testable : les interfaces ont toujours été difficiles à tester, mais désormais des tests peuvent être écrits pour ViewModel.

2.3. Vue est l'implémenteur du modèle MVVM

• Modèle : couche de modèle, où les objets JavaScript sont représentés
• Vue : couche de vue, représente ici le DOM (éléments pour les opérations HTML)
• ViewModel : middleware qui connecte les vues et les données. Vue.js est l'implémenteur de la couche ViewModel dans MVVM. Dans l'architecture MVVM, les données et les vues ne sont pas autorisées à communiquer directement. Elles ne peuvent communiquer que via ViewModel, et ViewModel définit un observateur.

ViewModel peut observer les changements dans les données et mettre à jour le contenu correspondant à la vue.
ViewModel peut surveiller les changements dans les vues et notifier les données des changements.
Vue.js est un implémenteur de MVVM. Son cœur est d'implémenter la surveillance DOM et la liaison de données .

3. Le premier programme Vue

1. Créez un nouveau projet vide et créez un nouveau package : chapitre01

1. Créez un nouveau projet HTML5 et écrivez
2. page ouverte

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>

    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      {
   
   {message}}
    </div>

    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

1. Ouvrez les outils de développement, sélectionnez Entrée dans la console et appuyez sur Entrée

vm.message="hehe"

On constate que les données sur la page ont également changé.
Il s'agit de la liaison bidirectionnelle ViewModel
des données dans la couche de vue et de la variable de message. Lorsque le message change, les données sur la page changent également.

4. Instructions

4.1. Exemple

Écrire des pages HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      <!--    {
    
    {message}}-->
      <span v-bind:title="message">
        鼠标悬停几秒可查看绑定的信息
      </span>
    </div>
    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

Ouvrez la page pour afficher

et trouver cela en utilisant v-bind : vous pouvez également lier des variables à des éléments.

4.2. Aperçu

Les directives sont des attributs spéciaux préfixés par v- . La valeur de l'attribut d'une directive est censée être une expression JavaScript unique (à l'exception de v-for, dont nous parlerons plus tard). La responsabilité de la directive est d'appliquer de manière réactive ses effets associés au DOM lorsque la valeur de l'expression change.

4.3. v-si

Écrire du HTML

<div id="app">
  <span v-if="ok===true">YES</span>
  <span v-else>No</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      ok: true
    }
  });
</script>

Ouvrez la page

et modifiez la valeur de ok

4.4. v-sinon-si

<div id="app">
  <span v-if="str==='A'">AAA</span>
  <span v-else-if="str==='B'">BBB</span>
  <span v-else>Other</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      str: 'A'
    }
  });
</script>

Ouvrez la page

et modifiez la valeur de str

4.5. pour

<div id="app">
  <ul>
    <!--类似于java 的 foreach ，
    从 items 中遍历出的每一项命名为 item-->
    <li v-for="item in items">{
   
   {item.message}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: [
        {
      
      message: "test-1"},
        {
      
      message: "test-2"},
        {
      
      message: "test-3"}
      ]
    }
  });
</script>

page ouverte

5. Écoutez les événements

Vous pouvez utiliser la directive v-on pour écouter les événements DOM et exécuter du code JavaScript lorsqu'il est déclenché.

<div id="app">
  <button v-on:click="sayHi()">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: "Hi!!!"
    },
    // 定义方法
    // 注意一定要加 S
    methods: {
      
      
      // 冒号前是方法名
      sayHi: function (){
      
      
        alert(this.message);
      }
    }
  });
</script>

page ouverte

6. Liaison bidirectionnelle

6.1 Qu'est-ce que la liaison de données bidirectionnelle ?

Vue est un framework mvvm, ce qui signifie une liaison de données bidirectionnelle. C'est - à - dire que lorsque les données changent, la vue change également. Lorsque la vue change, les données changent également de manière synchrone . Cela peut être considéré comme l’essence même de la vue.
Il convient de noter que la liaison de données bidirectionnelle dont nous parlons doit être destinée aux contrôles de l'interface utilisateur. Les contrôles non-UI n'impliqueront pas de liaison de données bidirectionnelle. La liaison de données unidirectionnelle est une condition préalable à l'utilisation d'outils de gestion d'état tels que Redux. Si nous utilisons vuex, alors le flux de données est également à élément unique, ce qui entrera en conflit avec la liaison de données bidirectionnelle. Nous pouvons le résoudre comme ceci

6.2 Pourquoi est-il nécessaire de mettre en œuvre une liaison bidirectionnelle des données ?

Dans vue, si vous utilisez vuex, les données sont en fait unidirectionnelles. La raison pour laquelle on l'appelle liaison de données bidirectionnelle est à cause des contrôles d'interface utilisateur utilisés. Pour nous permettre de traiter les formulaires, la liaison de données bidirectionnelle de vue est particulièrement confortable. à utiliser. .
C'est-à-dire que les deux ne s'excluent pas mutuellement : le flux de données global utilise un seul élément pour faciliter le suivi et le flux de données local utilise deux directions, ce qui est simple et facile à utiliser.

6.3 Utilisation de la liaison de données bidirectionnelle dans les formulaires

Vous pouvez utiliser la directive v-model pour créer une liaison de données bidirectionnelle sur les éléments <input>, <textarea> et <select> du formulaire. Il choisit automatiquement la méthode correcte pour mettre à jour l'élément en fonction du type de contrôle. Malgré sa magie, le modèle V est essentiellement du sucre syntaxique. Il est chargé d'écouter les événements d'entrée de l'utilisateur pour mettre à jour les données et effectuer un traitement spécial pour certains scénarios extrêmes.

6.4 Utilisation

1. Zone de saisie

<div id="app">
  <!--双向绑定：
  data 中的 message 既和输入框的 message 绑定
  又和 p 标签中的 message 绑定-->
  <span>输入文本：</span><input type="text" v-model="message">
  <p><span>输入的文本：</span><span>{
   
   {message}}</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: ""
    }
  });
</script>

Modifiez la valeur du message sur la page et

saisissez-la directement dans la zone de saisie

2. Bouton radio

<div id="app">
  性别：
  <input type="radio" name="sex" value="male" v-model="sex"> 男
  <input type="radio" name="sex" value="female" v-model="sex"> 女

  <p>选中了：{
   
   {sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      sex: ""
    }
  });
</script>

Lorsque vous ouvrez la page , vous pouvez constater que la valeur

du bouton radio est liée ici.

3. Boîte de sélection multiple

<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">杰克</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">约翰</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">麦克</label>
  <br>
  <span>Checked names: {
   
   { checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      checkedNames: []
    }
  });
</script>

4. Boîte déroulante

<div id="app">
  下拉框：
  <select v-model="selected">
    <option value="" disabled>-请选择-</option>
    <option value="aaa">AA</option>
    <option value="bbb">BB</option>
    <option value="ccc">CC</option>
  </select>
  <p>选中 ： {
   
   {selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      selected : ""
    }
  });
</script>

7. Composants

7.1. Aperçu

• Les composants sont des instances Vue réutilisables , ce qui signifie que les parties répétées peuvent être encapsulées en tant que composants pendant le processus de développement.
• Organisation des composants
  Par exemple, vous pouvez avoir des composants tels qu'un en-tête, une barre latérale et une zone de contenu, et chaque composant contient d'autres composants tels que des liens de navigation et des articles de blog.

7.2. Démo du premier composant

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    template: '<li>AA</li>'
  });

  var vm = new Vue({
      
      
    el: "#app"
  });
</script>

7.3. Transmission de données via Data

<div id="app">
  <!--  利用 v-for 把 items 的元素取出，
  再通过 v-bind 绑定数据: 把 item1 绑定在了 item2 上-->
  <my-component v-for="item1 in items" v-bind:item2="item1"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    // 通过 item2 接收 item1 数据
    props: ['item2'],
    template: '<li>{
      
      {item2}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: ["AAA","BBB","CCC"]
    }
  });
</script>

8. Communication asynchrone Axios

8.1. Aperçu

Axios est un framework de communication asynchrone open source utilisable côté navigateur et NodeJS. Sa fonction principale est d'implémenter la communication asynchrone AJAX. Ses caractéristiques fonctionnelles sont les suivantes :

• Créer des XMLHttpRequests à partir du navigateur
• Créer une requête http à partir de node.js
• API de promesse de support
• Intercepter les demandes et les réponses
• Convertir les données de demande et les données de réponse
• Demande d'annulation
• Convertir automatiquement les données JSON
• Le client prend en charge la défense contre XSRF (contrefaçon de requêtes intersites)

8.2. Pourquoi utiliser Axios

Étant donné que Vue.js est un framework de couche de vue et que l'auteur (You Yuxi) adhère strictement au SoC (principe de séparation des préoccupations), Vue.js n'inclut pas les fonctions de communication AJAX. Vue recommande d'utiliser le framework Axios et d'essayer de ne pas utiliser JQuery. Parce qu'il exploite fréquemment le DOM

8.3. Conditions préalables

Confirmez que JavaScript d'IDEA prend en charge ES6

8.4 La première application Axios

1. Parce que dans le développement réel, les données au format JSON sont principalement utilisées, voici donc un nouveau fichier au format JSON.
2. Écrire du HTML – Obtenir des données Json locales
3. Ouvrez la page et ouvrez les outils de développement. Vous pouvez constater qu'Axios est une communication asynchrone comme AJax. Vous
   
   pouvez également voir que les données ont été obtenues.
   
4. Écrivez du HTML - affichez le Json obtenu sur la page
5. page
   

{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      axios.get('../data.json').then(response=>(console.log(response.data)));
    }
  });
</script>

<div id="vue">
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    // 有冒号、大括号的 data 是属性
    data: {
      
      },
    // 没有冒号的是方法
    // 这里使用的 data 方法，不要搞混
    data(){
      
      
      return{
      
      
        // 请求的返回参数,这里需要写上需要返回的字段名，不需要写值，所以都写 null
        // 这里的键可以比传入的 Json 中的少
        // 但是如果写了，就必须和获得的 Json 键的名字一样
        info: {
      
      
          name: null,
          address: {
      
      
            city: null,
            country: null
          },
          links: [
            {
      
      
              name: null,
              url: null
            }
          ]
        }
      }
    },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      // 这边把 上面 return 中的 info 值和返回的 data 数据绑定，以便返回给视图渲染
      axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });
</script>

8.5 Résoudre le problème de scintillement

Une fois la démo ci-dessus écrite, lorsque vous actualisez la page, vous constaterez que le modèle apparaît en premier et que les données sortent après un certain temps. Ce n'est pas très

convivial et n'est pas sûr pour les données, utilisez donc ce qui suit méthode pour le résoudre en
écrivant un code HTML ci-dessus < style >< /style >

<style>
  [v-cloak]{
      
      
    display: none;
  }
</style>

<div id="vue" v-clock>
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

De cette façon, même si les données seront toujours visibles après un certain temps, le modèle ne sera plus visible.

9. Cycle de vie des vues

Une instance Vue a un cycle de vie complet, c'est-à-dire une série de processus tels que la création, l'initialisation des données, la compilation de modèles, le montage du DOM, le rendu -> mise à jour -> le rendu, la désinstallation, etc. C'est ce qu'on appelle le cycle de vie de Vue.
Tout au long du cycle de vie de Vue, il fournit une série d'événements qui nous permettent d'enregistrer des méthodes JS lorsque des événements sont déclenchés. Nous pouvons utiliser nos propres méthodes JS enregistrées pour contrôler l'ensemble de la situation. Dans ces méthodes de réponse aux événements, cela pointe directement vers une instance de Vue.

10. Propriétés calculées

• Propriétés calculées : enregistrez les résultats calculés dans les propriétés.
• Avantages : fonctionne en mémoire, DOM virtuel
• Écrire du code
• Découvrez la différence entre ouvrir une page, activer le mode développeur et utiliser la console

<div id="vue">
  <!-- 调用方法 -->
  <p>currentTime1 : {
   
   {currentTime1()}}</p>
  <!-- 调用属性 -->
  <p>currentTime2 : {
   
   {currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      message: "hello."
    },
    methods: {
      
      
      currentTime1: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    },
    // 计算属性
    computed: {
      
      
      // 方法名不能一样
      currentTime2: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    }
  });
</script>

1. Lors de l'appel d'une méthode normale, il s'agit du nom de la méthode appelante ; lors de l'appel d'une propriété calculée, il s'agit du nom de la propriété.
   
2. Les appels de fonction ordinaires sont exécutés une seule fois ; les propriétés calculées traitent les résultats calculés comme des attributs et les stockent en mémoire.
   

• Quand une propriété calculée change-t-elle ? Méthodes de modification des propriétés calculées

// 计算属性
computed: {
    
    
  // 方法名不能一样
  currentTime2: function (){
    
    
    // 返回当前时间戳
    return Date.now() +"  | "+this.message;
  }
}

Ouvrez la page, ouvrez le mode développeur et utilisez la console.

Ainsi, tant que les données dans le corps de la méthode de propriété calculée changent, la propriété calculée changera.

11. Distribution de contenu – emplacement

• Slot : composant enfichable dynamiquement
• Cas simple

<div>
  <p>数据列表(原本的)</p>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</div>
————————————————————————————————
<div id="vue">
  <list>
    <!--绑定插槽 : 使用 slot 属性绑定，引号里的值，必须和下面的 name 属性一样-->
    <!--绑定数据 : 冒号后面是组件中定义的值
    引号里面是 data 数据的字段值
    不能混淆-->
    <list-title slot="list-title" :title="l_title"></list-title>
    <list-items slot="list-items" v-for="item in l_items" :item="item"></list-items>
  </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  Vue.component("list",{
      
      
    template:
      '<div>\
      <slot name="list-title"></slot>\
      <ul>\
      <slot name="list-items"></slot>\
      </ul>\
      </div>'
  });
  // 定义数据，插入插槽
  Vue.component("list-title",{
      
      
    props: ['title'],
    template: '<div>{
      
      {title}}</div>'
  });

  Vue.component("list-items",{
      
      
    props: ['item'],
    template: '<li>{
      
      {item}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      l_title: "标题————",
      l_items:["AA","BBB","CCCC"]
    }
  });
</script>

Effet de page

12. Distribution de contenu d'événement personnalisé

• Sur la base du cas ci-dessus, j'espère ajouter un bouton de suppression après chaque ligne, puis cliquer sur Supprimer pour supprimer et modifier la ligne.

1. Apportez d'abord de légères modifications, ajoutez un bouton de suppression, liez l'événement de clic et imprimez l'indice après avoir cliqué.
2. Ajouter une méthode de suppression dans l'objet vue
3. Testez les deux méthodes écrites ci-dessus. Cliquez sur le bouton Supprimer pour appeler la méthode RemoveItem sur la console
   . Ces deux méthodes réussissent respectivement. Comment faire le lien entre ces deux méthodes ?
4. Laissez le composant appeler l'événement via this.$emit("nom de l'événement personnalisé", paramètre)
5. test
   
6. Schéma simple du processus
   

<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index"></list-items>
 

var vm = new Vue({
  el: "#vue",
  data: {
  l_title: "标题————",
  l_items:["AA","BBB","CCCC"]
  },
  methods: {
  removeItem: function (index){
  // 打印信息
  console.log("删除了"+this.l_items[index]);
  // 表示从 index 开始，删除 n 个元素
  this.l_items.splice(index,1);
  }
  }
  });

<!--数据绑定 ：把 items 中的每一项元素遍历出来命名为 item 再和下面的 item 绑定-->
<!--事件绑定 ：自定义一个名为 diyremove 的事件，先和vue对象中的 removeItem 方法绑定
再去到组件中的 remove 和 diyremove 事件绑定-->
<!--注意 : 属性值都要小写，大写不生效，也不会报错 ； 在自定义事件绑定方法的时候 v-on 不能缩写-->
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index" v-on:diyremove="removeItem(index)"></list-items>

13. Afficher-cli

13.1 Qu'est-ce que vue-cli

Un échafaudage officiellement fourni par vue-cli est utilisé pour générer rapidement un modèle de projet vue ; la
structure de répertoires prédéfinie et le code de base sont comme lorsque nous créons un projet Maven, nous pouvons choisir de créer un projet squelette. Ce projet squelette est l'échafaudage Notre développement est plus rapide ;
principales fonctions :

• Structure de répertoires unifiée
• débogage local
• Déploiement à chaud
• Test de l'unité
• L'emballage intégré est mis en ligne

13.2 Environnement requis

• Node.js : http://nodejs.cn/download/
• Git : https://git-scm.com/downloads
• Installer Node.js

1. Téléchargez Node.js, sélectionnez Windows 64 bits
2. Installez NodeJs et passez à l'étape suivante
3. Pour vérifier si l'installation a réussi, entrez node -v sous cmd et vérifiez si le numéro de version peut être imprimé correctement !

• Installer l'accélérateur d'images Node.js Taobao (cnpm)
• Installer vue-cli

（CMD 命令）
-g 就是全局安装
npm install cnpm -g --registry=https://registry.npm.taobao.org

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

Le processus d'installation est un peu lent.
L'emplacement d'installation est : C:\Users\Administered\AppData\Roaming\npm

（CMD 命令）
 cnpm install vue-cli -g	

vue list

13.3 Programme Vue-cli

1. Utilisez cmd dans le dossier pour créer un projet vue nommé myvue et emballez-le avec l'outil d'empaquetage webpack
2. Initialiser et exécuter le projet myvue

（CMD 命令）
 # 先找到要创建该文件的目录
 # 这里的 myvue 是项目名称，可以根据自己的需求起名
 vue init webpack myvue

Description :
1. Nom du projet : Nom du projet, appuyez simplement sur Entrée par défaut
2. Description du projet : Description du projet, appuyez simplement sur Entrée par défaut
3. Auteur : Auteur du projet, appuyez simplement sur Entrée par défaut
4. Construction Vue : Compilez, choisissez en premier 5. . Installez vue-router
: Si vous souhaitez installer vue-router, sélectionnez n pour ne pas l'installer ( vous devrez l'ajouter manuellement plus tard) 6. Utilisez ESLint pour lint votre code : Si vous souhaitez utiliser ESLint pour la vérification du code, sélectionnez n pour ne pas installer (vous devrez l'ajouter manuellement plus tard) Ajouter) 7. Configurer les tests unitaires : liés aux tests unitaires, sélectionnez n pour ne pas installer (vous devrez l'ajouter manuellement plus tard) 8. Configurer les tests e2e avec Nightwatch : liés aux tests unitaires , sélectionnez n pour ne pas installer (vous devrez l'ajouter manuellement plus tard) 9. Devons-nous exécuter npm install pour vous après la création du projet : initialisez directement après la création, sélectionnez n, nous l'exécutons manuellement ; exécutons le résultat ! Le fichier généré

（CMD 命令）
# 进入文件夹
cd myvue
# 安装环境
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c

Après avoir exécuté avec succès

14. Pack Web

14.1 Qu'est-ce que le webpack

Webpack peut être considéré comme un packager de modules statiques : son rôle est d'analyser la structure de votre projet, de trouver des modules JavaScript et d'autres langages d'extension que les navigateurs ne peuvent pas exécuter directement (Scss, TypeScript, etc.) et de les empaqueter dans les formats appropriés. format destiné à être utilisé par les navigateurs.

14.2 Pourquoi utiliser webpack

De nos jours, de nombreuses pages Web peuvent en fait être considérées comme des applications riches en fonctionnalités, avec un code JavaScript complexe et un grand nombre de packages de dépendances. Afin de simplifier la complexité du développement, de nombreuses bonnes pratiques ont émergé dans la communauté front-end

1. La modularisation nous permet d'affiner des programmes complexes en petits fichiers ;
2. Semblable à TypeScript, un langage de développement basé sur JavaScript : il nous permet d'implémenter des fonctionnalités qui ne peuvent pas être utilisées directement dans la version actuelle de JavaScript, et qui peuvent ensuite être converties en fichiers JavaScript afin que le navigateur puisse les reconnaître ;
3. Des préprocesseurs CSS comme scss, less...
   Ces améliorations ont en effet grandement amélioré notre efficacité de développement, mais les fichiers développés à l'aide de ceux-ci nécessitent souvent des traitements supplémentaires pour être reconnus par le navigateur, et le traitement manuel est très lourd. l’émergence d’outils comme WebPack.

14.3 Installer le Webpack

WebPack est un chargeur de modules et un outil d'empaquetage qui peut traiter et utiliser diverses ressources, telles que JS, JSX, ES 6, SASS, LESS, images, etc., en tant que modules.
Commande d'installation

（CMD 命令）
 npm install webpack -g --registry=https://registry.npm.taobao.org
 npm install webpack-cli -g --registry=https://registry.npm.taobao.org

Testez si l'installation a réussi

webpack -v
webpack-cli -v

14.4 Configuration

Créer le fichier de configuration webpack.config.js

• Entry : fichier d'entrée, spécifiez quel fichier Web Pack utilise comme point d'entrée du projet
• sortie : sortie, spécifie WebPack pour placer les fichiers traités dans le chemin spécifié
• module : module, utilisé pour traiter différents types de fichiers
• plugins : plug-ins, tels que : mise à jour à chaud, réutilisation de code, etc.
• résoudre : définir le chemin vers lequel pointer
• watch : surveillance, utilisée pour empaqueter directement après avoir défini les modifications du fichier

module.exports = {
  entry:"",
    output:{
    path:"",
      filename:""
  },
  module:{
    loaders:[
      {test:/\.js$/,;\loade:""}
    ]
  },
  plugins:{},
  resolve:{},
  watch:true
}

Exécutez directement la commande webpack pour empaqueter

14.5 Utilisation du pack Web

1. Créer un projet : webpack-study
2. Créez un répertoire nommé modules pour placer les fichiers de ressources tels que les modules JS
3. Créez un fichier de module sous modules : hello.js est utilisé pour écrire le code associé au module JS

// 暴露一个方法
exports.sayHi = function(){
    
    
  document.write("<h1>Hello World</h1>");
}

4. Créez un fichier d'entrée nommé main.js sous modules pour définir l'attribut d'entrée lors de l'empaquetage.

// 引入 hello.js,相当于java的对象 
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();

5. Créez le fichier de configuration webpack.config.js (remarque : point) dans le répertoire webpack-study et utilisez la commande webpack pour le conditionner.

// 把 module 导出
module.exports = {
    
    
  // 目标文件
  entry: './modules/main.js',
  // 输出地址
  output: {
    
    
    filename: "./js/bundle.js"
  }
}

6. Emballez le fichier que vous venez d'écrire dans le répertoire webpack-study

7. Introduit dans la page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>


</body>
</html>

8. page ouverte
   

15. vue-router

15.1 Descriptif

Vue Router est le gestionnaire de routage officiel (path jump) de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page. Les fonctionnalités incluses sont :

1. Tableaux de routage/vue imbriqués
2. Configuration de routage modulaire basée sur les composants
3. Paramètres de routage, requêtes, caractères génériques
4. Afficher l'effet de transition basé sur le système de transition Vue.js
5. Contrôle de navigation précis
6. Liens avec des classes CSS activées automatiquement
7. Mode historique HTML5 ou mode hachage, automatiquement rétrogradé dans IE9
8. Comportement de la barre de défilement personnalisée

15.2 Installation

Testez et apprenez
cmd basé sur le premier vue-cli. Entrez dans le répertoire myvue et exécutez

可以用
cnpm install vue-router --save-dev
没成功
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

15.3 Utilisation

1. Nettoyez le code, supprimez les images dans le répertoire src et les composants dans le répertoire des composants. Modifiez App.vue.
2. Projet de démarrage
3. Modifier App.vue
4. Créez un nouveau composant Vue dans les composants : Content.vue
5. Créez un nouveau composant Vue dans les composants : Main.vue
6. Créez un nouveau package (routeur) sous src et créez un nouveau fichier dans le package : index.js
7. Modifier main.js
8. Modifier la partie modèle dans App.vue
9. page ouverte
   
   
   

<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

<template>
  <div id="app">
    <h1>呵呵</h1>
  </div>
</template>

Le projet découvert est automatiquement Bulid et la page est automatiquement actualisée.
Il s'agit du déploiement à chaud de Vue.

<template>
  <h1>Content</h1>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
      
      
    name: "main"
  }
</script>
<style scoped>
</style>

// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
    
    
  routes: [
    {
    
    
      // 类似于 @RequestMapping 接收一个请求，返回一个页面
      // 路由的路径
      path: '/content',
      // 配置名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
    
    
      // 路由的路径
      path: '/main',
      // 配置名称
      name: 'Main',
      // 跳转的组件
      component: Main
    }
  ]
});

import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件，所以index可省
// 注意！！ 这里必须写 router ，写错前端页面就报错
import router from "./router/index";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  // 配置路由,上面的组件名
  router,
  components: {
    
     App },
  template: '<App/>'
})

<template>
  <div id="app">
    <h1>呵呵</h1>
    <!--跳转链接，点击链接显示对应内容-->
    <!--类似于原来的 <a></a> ;
    to 类似于原来的 href,后面的值就是配置的路由-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图，理解为用于展示上面两个链接对应内容的区域-->
    <router-view></router-view>
  </div>
</template>

16. Vue+ElementUI

1. Créez un projet nommé vue-elementuivue init webpack vue-elementui
2. Installez quatre plug-ins : vue-router, element-ui, sass-loader, node-sass

# 进入工程
cd vue-elementui
# 安装 vue-router
cnpm install vue-router --save-dev 
# 安装 element-ui
cnpm i element-ui -S 
# 安装依赖
cnpm install 
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev


测试报错：
cnpm install --save vue-hot-reload-api

3. Restaurez le projet dans un projet vide, supprimez logo.png et HelloWorld.vue sous src et modifiez App.vue comme suit :

<template>
 </template>
 <script>
 export default {
      
      
   name: 'App'
 }
 </script>
 <style>
 #app {
      
      
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>

4. Créer un nouveau routeur de dossiers : stocker les informations de routage
   vues : stocker les composants de la vue composants
   : stocker les composants fonctionnels
   
5. Créez un nouveau composant de vue sous le package de vues : Main.vue

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
</style>

6. Créez un nouveau composant de vue sous le package de vues : Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

7. Écrivez les informations de configuration du routage sous le fichier du routeur : index.js

import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main
    }
  ]
});

8. Modifier main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 导入 elementUI
import ElementUI from 'element-ui'
// 导入 elementUI 对应的 CSS
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)

new Vue({
    
    
  el: '#app',
  // 配置 elementUI
  render: h => h(App),
  router
})

9. Modifier App.vue

<template>
  <div id="app">
    <!-- 因为 main.js 中配置了，element-ui 自动渲染，所以这里只需要有一个这个标签就好了 -->
    <router-view></router-view>
  </div>
</template>x

10. Si une erreur est signalée lors du démarrage du projet , essayez de rétrograder la version de sass-loader. Recherchez le fichier package.json,
    
    recherchez l'attribut sass-loader,
    
    modifiez le numéro de version suivant en ^7.3.1
    et réinstallez les dépendances de l'environnement.npm install
11. Entrez simplement votre nom d'utilisateur et votre mot de passe, connectez-vous et constatez que vous accédez à la page d'accueil pour afficher le code Login.vue , qui se trouve dans <script>< /script>
    

Les étapes d'installation sont les mêmes qu'avant

Redémarrez le projet et visitez http://localhost:8080/#/login

17. Imbrication d'itinéraires

• Le routage imbriqué est également appelé sous-routage. Dans les applications pratiques, il est généralement composé de plusieurs couches de composants imbriqués, tels que :
  

1. Créer un nouveau package utilisateur dans les vues
2. Sous le package utilisateur, créez un nouveau List.vue

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "List"
  }
</script>
<style scoped>
</style>

3. Sous le package utilisateur, créez un nouveau Profile.vue

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "Profile"
  }
</script>
<style scoped>
</style>

4. Modifier Main.vue et ajouter une barre latérale

<template>
  <div>
  <el-container>
  <el-aside width="200px">
  <el-menu :default-openeds="['1']">
  <el-submenu index="1">
  <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
  <el-menu-item-group>
  <el-menu-item index="1-1">
  <!--插入的地方-->
  <router-link to="/user/profile">个人信息</router-link>
  </el-menu-item>
  <el-menu-item index="1-2">
  <!--插入的地方-->
  <router-link to="/user/list">用户列表</router-link>
  </el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
  <el-menu-item-group>
  <el-menu-item index="2-1">分类管理</el-menu-item>
  <el-menu-item index="2-2">内容列表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  </el-menu>
  </el-aside>

  <el-container>
  <el-header style="text-align: right; font-size: 12px">
  <el-dropdown>
  <i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>个人信息</el-dropdown-item>
  <el-dropdown-item>退出登录</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-header>
  <el-main>
  <!--在这里展示视图-->
  <router-view />
  </el-main>
  </el-container>
  </el-container>
  </div>
  </template>
  <script>
  export default {
    
    
  name: "Main"
}
  </script>
  <style scoped lang="scss">
  .el-header {
    
    
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
    
    
  color: #333;
}
</style>

5. Modifier index.js, informations de routage

import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

import List from "../views/user/List";
import Profile from "../views/user/Profile";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main,
      // 嵌套路由
      children: [
        {
    
    
          path: "/user/profile",
          component: Profile
        },{
    
    
          path: "/user/list",
          component: List
        }
      ]
    }
  ]
});

6. Insérer un lien de routage dans Main.vue pour afficher la vue
   
   

• Il existe deux modes pour modifier le routage : 1. hash : # dans le chemin ; 2. historique : modifier le fichier index.js sans # dans le chemin
  

7. page ouverte
   

18. Passage de paramètres et redirection

18.1 Passage de paramètres via l'itinéraire

1. Modifier la balise frontale <router-link>
   
2. Modifier les informations de routage dans index.js
   
3. Retirez les paramètres sur la page front-end et modifiez : Profile.vue. Notez qu'il s'agit d'une route, pas d'un routeur.
   
4. page ouverte
   

18.2 Passage de paramètres via des accessoires

• Afficher le nom d'utilisateur une fois la connexion terminée

1. Connexion modifiée.vue
2. Modifier index.js
   
3. Acquisition de la page d'accueil : Main.vue
   

18.3 Redirections

1. Modifier index.js et ajouter des informations de redirection
   
2. Main.vue modifiée
   
3. page ouverte

19. 404 et crochets de routage

19.1 404

1. Créer un nouveau composant de vue : 404.vue
2. Configurez le composant 404 dans les informations de routage : index.js
   
3. Démarrer la page et accéder à volonté à un chemin inexistant

<template>
  <div>
    <h1>404,页面走丢了！</h1>
  </div>
</template>
<script>
  export default {
    name: "404"
  }
</script>
<style scoped>
</style>

19.2 Crochets de routage

1. Utilisation de base

• beforeRouteEnter : hook exécuté avant d'entrer dans la route
• beforeRouteLeave : hook exécuté avant de quitter la route

1. Modifier le profil.vue
   
2. page ouverte

• Description du paramètre :
  • to : les informations sur le chemin vers lequel l'itinéraire passera
  • from : informations sur le chemin avant le saut de chemin
  • suivant : contrôler les paramètres de routage
    • next() passe à la page suivante
    • next('/path') change la direction de saut de l'itinéraire afin qu'il passe à un autre itinéraire
    • next(false) renvoie à la page d'origine
    • next((vm)=>{}) n'est disponible que dans beforeRouteEnter, vm est l'instance du composant

2. Utiliser des requêtes asynchrones dans les fonctions hook

1. Installer Axios
2. main.js fait référence à Axios
3. Pour préparer les données, seuls les fichiers de notre répertoire statique sont accessibles, nous mettons donc les fichiers statiques dans ce répertoire. Créez un nouveau dossier simulé (données de test) sous static et créez un nouveau data.json
4. Faites une requête asynchrone dans beforeRouteEnter et modifiez Profile.vue
5. Accédez à la console de la page /user/profile et affichez les données obtenues.

cnpm install --save vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

export default {
    
    
  //第二种取值方式
  // props:['id'],
  name: "UserProfile",
  //钩子函数 过滤器
  beforeRouteEnter: (to, from, next) => {
    
    
    //加载数据
    console.log("进入路由之前")
    next(vm => {
    
    
      //进入路由之前执行getData方法
      vm.getData()
    });
  },
  beforeRouteLeave: (to, from, next) => {
    
    
    console.log("离开路由之前")
    next();
  },
  //axios
  methods: {
    
    
    getData: function () {
    
    
      this.axios({
    
    
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
    
    
        console.log(response)
      })
    }
  }
}