Quels sont les avantages et les inconvénients de vue ? Pourquoi l'utiliser ?

Les avantages et les inconvénients sont : simple, rapide, puissant et convivial pour les modules, mais il ne prend pas en charge IE8 et n'est pas convivial pour les moteurs de recherche, ce qui affectera le référencement ; Raison d'utilisation : Vue est un outil qui peut réduire les coûts de développement et améliorer l'efficacité du développement. Il peut aider les développeurs à se libérer des opérations DOM fastidieuses ; après avoir défini la vue et les règles de données correctes pendant le développement, il vous suffit de vous concentrer sur les modifications. , le contenu de la vue changera en conséquence et il n'est pas nécessaire de manipuler manuellement les éléments du DOM pour le modifier. Et la composantisation de Vue est très utile pour améliorer la réutilisation du code et démanteler les grands projets.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Qu'est-ce que Vue ?

Vue (prononcé /vjuː/, similaire à view) est un framework JavaScript permettant de créer des interfaces utilisateur. Il est construit sur les standards HTML, CSS et JavaScript et fournit un modèle de programmation déclaratif basé sur des composants pour vous aider à développer efficacement des interfaces utilisateur. Qu'il s'agisse d'une interface simple ou complexe, Vue peut tout faire.

Ce qui suit est un exemple de base :

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Affichage des résultats

L'exemple ci-dessus montre deux fonctions principales de Vue :

• Rendu déclaratif : Vue étend une suite basée sur la syntaxe standard des modèles HTML nous permet pour décrire de manière déclarative la relation entre la sortie finale HTML et l'état JavaScript.

• Réactivité : Vue suit automatiquement l'état de JavaScript et met à jour le DOM de manière réactive lorsqu'il change.

Avantages et inconvénients de Vue.js

Avantages :

1. Simple : La documentation officielle est très claire et plus facile à apprendre qu'Angular.

2. Rapide : mise à jour du DOM dans le traitement par lots asynchrone.

3. Composition : Composez votre application avec des composants découplés et réutilisables.

4. Compact : ~18 Ko min+gzip, et aucune dépendance.

5. Puissant : expressions et propriétés calculées sans déclarer de dépendances.

6. Adapté aux modules : il peut être installé via NPM, Bower ou Duo. Il n'oblige pas tout votre code à suivre les différentes réglementations d'Angular et les scénarios d'utilisation sont plus flexibles.

Inconvénients :

• ne prend pas en charge IE8.

  Vue.js ne prend pas en charge IE8 et versions antérieures car Vue.js utilise des fonctionnalités ECMAScript 5 que IE8 ne peut pas émuler. Vue.js prend en charge tous les navigateurs compatibles ECMAScript 5.

• vue est une page d'une seule page, qui n'est pas conviviale pour les moteurs de recherche et affecte le référencement. Elle ne convient donc pas au site officiel d'une entreprise. Par exemple, les chemins de deux routes (pages) Vue sont les suivants : index.html#aaa et index.html#bbb, mais pour les moteurs de recherche, il s'agit tous deux de la même page, qui est index.html. De cette façon, les moteurs de recherche ne pourront pas inclure votre page.

Pourquoi utiliser Vue.js

Utiliser un nouveau framework et une nouvelle bibliothèque est en fait pour résoudre les problèmes que nous rencontrons dans le développement actuel, ou pour améliorer son efficacité de développement. Le coût de chacun est le temps, et de bons outils peuvent nous aider à gagner du temps. Du point de vue du projet, cela nous aide également à réduire les coûts. Vue.js est un outil qui peut réduire les coûts de développement et améliorer l'efficacité du développement. Il peut nous aider à nous libérer des opérations DOM fastidieuses. Pendant le développement, après avoir défini les règles pour la vue et les données correctes, il nous suffit de prêter attention aux changements dans les données, et le contenu de la vue changera en conséquence, sans qu'il soit nécessaire de manipuler manuellement les éléments DOM pour les modifier. .

De plus, le modèle de développement front-end a progressivement commencé à évoluer vers la composantisation, et le concept de composants Web est progressivement devenu un standard, avec ses propres fragments HTML, fichiers JS et styles CSS indépendants, afin que vous ne devez vous soucier de vous lorsque vous l'utilisez. Le code commercial a un impact. Vue.js a également implémenté sa propre implémentation de ce concept, ce qui est très utile pour améliorer la réutilisation du code et démanteler les grands projets.

Quelques avantages de vue :

1. Le contrôle est automatiquement lié aux données lors de la soumission du formulaire en arrière-plan, vous pouvez utiliser directement la valeur des données dans les données sans utiliser le $("#id"). Il est beaucoup plus pratique d'utiliser un ensemble de méthodes pour obtenir la valeur d'un contrôle, et il est beaucoup plus pratique d'attribuer des valeurs au contrôle. Il vous suffit de modifier la valeur des données et le contrôle changera automatiquement. la valeur. Convertissez des opérations d'interface complexes en opérations de données.

Par exemple, le morceau de code suivant peut réaliser une gestion dynamique de la liste dans le contrôle de sélection :

Code html :

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

Code js :

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

Lorsque vous devez modifier le contenu de la liste de sélection, vous non plus besoin de modifier Pour opérer sur dom, il vous suffit de changer simplement les valeurs des énumérations. Lorsque la valeur sélectionnée par le contrôle change, elle sera automatiquement liée au champ de données mType.

2. Transfert de valeur de page et gestion du statut

Vue propose de nombreuses méthodes pour le transfert de valeur de page, telles que l'utilisation d'attributs de sous-composants pour transférer des valeurs, telles que l'utilisation de paramètres d'URL de page pour transférer des valeurs, ou l'utilisation des méthodes de gestion globale de l'état Vuex pour transférer des valeurs sur les pages, etc. . En développement natif, lorsque la page comporte plusieurs paramètres, le transfert et l’initialisation des valeurs de page sont beaucoup plus compliqués. Vue, quant à elle, stocke les paramètres directement dans l'objet et stocke simplement un objet directement pour les propriétés du sous-composant ou de vuex.

3. Développement modulaire, mise à jour modulaire

Comme mentionné dans le deuxième point, il peut en fait être étendu au développement modulaire. Par exemple, une page de liste comporte des fonctions d'ajout et de modification. A ce moment, nous pouvons modifier les données du composant principal en référençant le sous-composant lorsque le contenu du sous-composant est mis à jour, par exemple après avoir modifié une pièce. de données, nous devons modifier le composant principal en même temps. Actualiser, mais nous ne voulons pas changer le numéro de page et les conditions de recherche de la page de liste d'origine. Si vous utilisez le développement natif pour implémenter cela, vous devez écrire beaucoup de logique métier pour enregistrer des paramètres tels que les conditions de recherche et les numéros de page de la page précédente, mais si vous développez avec Vue, cela deviendra très simple.

4. Lisibilité du code

vue est intrinsèquement capable de développer des composants, donc différentes fonctions sont essentiellement écrites dans différents modules, donc la lisibilité du code est très élevée. Lorsqu'un novice reprend un ancien projet, il peut en gros localiser le code à modifier et apporter des modifications en un ou deux jours.

5. Basé sur le puissant nodejs, ajoutez une nouvelle bibliothèque de composants, qui peut être installée avec une commande npm de base. Par exemple, lorsque j'ai besoin d'utiliser le composant axios, je peux l'installer directement avec npm install axios, puis. Je peux utiliser le composant axios. Les étudiants qui connaissent Maven peuvent facilement comprendre l'outil npm.

6. L'approche du routage principal, du sous-routage, de la page principale et des sous-composants nous permet d'abandonner complètement les iframes. Les étudiants qui ont écrit sur le front-end savent tous qu'en raison des barres de défilement des iframes et de l'interactivité entre les sous-pages et les autres pages, l'expérience utilisateur est encore bien moins conviviale qu'une architecture monopage. Et utiliser vue est très simple et pratique pour implémenter des dispositions fixes telles que les menus système et la navigation.

7. Modularisation CSS : Chaque composant peut utiliser le même nom de style, mais avoir des attributs de style différents. Par exemple, les boutons du composant A et du composant B sont liés à class="btn", mais dans les deux composants, nous pouvons implémenter deux attributs de style btn différents sans s'affecter mutuellement.

Recommandations associées : Tutoriel vidéo vue.js

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!