Résumé des erreurs courantes commises par les débutants de vue

Cette fois, je vais vous apporter un résumé des erreurs courantes commises par les débutants de Vue. Quelles sont les précautions pour les débutants de Vue pour trier les erreurs courantes. Ce qui suit est un cas pratique, prenons un. regarder.

Le principe sous-jacent de vue ?

La communication entre les composants de vue ?

Combien de méthodes existe-t-il pour déterminer le type de données en JS ?

La méthode de détermination la plus courante : typeof

Méthodes pour déterminer un objet connu types : instanceof

est jugé en fonction du constructeur de l'objet : constructeur

Méthode invincible et omnipotente : jquery.type()

Qu'est-ce que la différence entre vue et angulaire ?

1.vue n'est que la couche de vue dans mvvm. C'est juste une bibliothèque d'outils comme jquery, pas un framework, tandis qu'angular est le framework mvvm.
2. La liaison bidirectionnelle de Vue est implémentée sur la base de 3. getter/setter dans ES5, tandis qu'angular implémente son propre ensemble de règles de compilation de modèles, qui nécessitent une vérification dite "sale", contrairement à vue. Par conséquent, Vue est plus efficace en termes de performances, mais le prix est qu'il ne peut pas être pris en charge par les navigateurs inférieurs à IE9.
4.vue doit fournir un objet el pour l'instanciation, et toutes les portées suivantes se trouvent également sous l'objet el, tandis qu'angular correspond à la page html entière. Une page peut avoir plusieurs instances Vue, mais Angular ne semble pas fonctionner de cette façon.
5.vue est vraiment facile à démarrer et le coût d'apprentissage est relativement faible. Cependant, il n'y a pas beaucoup de documents de référence. Les documents officiels sont relativement simples et manquent de cas d'utilisation complets. Pour une utilisation avancée, vous devez étudier le code source vous-même, du moins pour le moment.

Dites-moi votre compréhension de la vérification sale angulaire ?

En angulaire, vous ne pouvez pas savoir si vos données ont changé, donc il définit certaines conditions. Lorsque vous déclenchez ces conditions, il effectue une détection pour parcourir toutes les données, comparez les. les modifications que vous avez apportées, puis exécutez les modifications.
Ce test est très peu scientifique. Et l'efficacité n'est pas élevée, il y a beaucoup d'endroits redondants, c'est donc officiellement appelé sale chèque.

active-class est un attribut de quel composant ?

Le composant router-link du module vue-router.

Comment définir un routage imbriqué ?

Dans les projets réels, nous rencontrerons plusieurs couches de composants imbriqués, mais comment implémenter le routage imbriqué ? Par conséquent, nous devons utiliser la configuration des enfants dans les paramètres de VueRouter, afin que l'imbrication des routes puisse être correctement implémentée.

index.html n'a qu'une seule sortie de routage

<p id="app"> 
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 
  <router-view></router-view> 
</p>

main.js La redirection du routage affichera le composant home dès le chargement de la page, car La redirection pointe vers. le composant home, le point de redirection et le point de chemin doivent être cohérents. Il y a des sous-routes à l'intérieur des enfants. Bien entendu, les sous-routes peuvent également être imbriquées à l'intérieur des sous-routes.

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
//引入两个组件 
import home from "./home.vue" 
import game from "./game.vue" 
//定义路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向,指向了home组件 
  { 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game", component: game } 
    ] 
  } 
] 
//创建路由实例 
const router = new VueRouter({routes}) 
new Vue({ 
  el: '#app', 
  data: { 
  }, 
  methods: { 
  }, 
  router 
})

home.vue, cliquez sur Afficher pour afficher la sous-route. La sortie de la sous-route doit être dans la route parent, sinon la sous-route ne peut pas être affichée.

<template> 
  <p> 
    <h3>首页</h3> 
    <router-link to="/home/game"> 
      <button>显示<tton> 
    </router-link> 
    <router-view></router-view> 
  </p> 
</template>

game.vue

 <template> 
  <h3>游戏</h3> 
</template>

Comment définir le routage dynamique de vue-router ? Comment récupérer les paramètres dynamiques transmis ?

Dans le fichier index.js du répertoire du routeur, ajoutez /:id à l'attribut path.

Utilisez le params.id de l'objet routeur.

Quels types de crochets de navigation possède vue-router ?

Trois types,

Le premier : c'est le hook de navigation global : router.beforeEach(to,from,next), sa fonction est de juger et d'intercepter avant de sauter.
Le deuxième type : les hooks au sein des composants
Le troisième type : le routage des composants exclusifs séparément

Qu'est-ce que scss ? Quelles sont les étapes d'installation et d'utilisation dans vue.cli ? Quelles sont ses principales caractéristiques ?

Pré-compilation de CSS.

Étapes d'utilisation :

Étape 1 : Utilisez npm pour télécharger trois chargeurs (sass-loader, css-loader, node-sass)

Étape 2 : Recherchez webpack.base.config.js dans le répertoire de construction et ajoutez une extension.scss à l'attribut extends

Étape 3 : Toujours dans le même fichier, configurez un attribut de module

Étape 4 : Ajoutez ensuite l'attribut lang à la balise de style du composant, par exemple : lang="scss"

Quelles sont les principales fonctionnalités :

1. Vous pouvez utiliser des variables, telles que ($variable name = value);
2. Vous pouvez utiliser des mélangeurs, tels que ()
3. Vous pouvez imbriquer

Qu'est-ce que menthe-ui ? Comment utiliser ? Nommez au moins trois façons d’utiliser les composants ?

Bibliothèque de composants frontaux basée sur Vue. Installation de npm, puis importation de styles et js, vue.use (mintUi) est introduit globalement. Introduit localement dans un seul composant : importez {Toast} depuis 'mint-ui'.

Composant un : Toast (« connexion réussie ») ;
Composant deux : mint-header
Composant trois : mint-swiper

Qu'est-ce que le v-model ? Comment utiliser ? Comment lier des événements à des balises dans Vue ?

Peut réaliser une liaison bidirectionnelle, des instructions (v-class, v-for, v-if, v-show, v-on). L'attribut data de la couche modèle de vue. Événement de liaison :

Quels sont les avantages et les inconvénients de l'iframe ?

iframe est également appelé cadre intégré. Un cadre intégré est similaire à une page Web de cadre. Il peut intégrer le cadre et le contenu d'une page Web dans une page Web existante.

Avantages :

Résoudre les problèmes de chargement liés au chargement lent du contenu tiers tel que les icônes et les publicités

Bac à sable de sécurité

Scripts de chargement parallèle

Barre de navigation facile à réaliser

Inconvénients :

iframe bloquera l'événement Onload de la page principale

Même si le contenu est vide, le chargement prendra du temps

Pas de sémantique

Décrivez brièvement Sass et Less, et expliquez les différences ?

Ce sont des langages de style dynamique, des préprocesseurs CSS et une couche d'abstraction sur CSS. Ils sont compilés en CSS en utilisant une syntaxe/un langage spécial.

Les symboles de variables sont différents, less est @ et Sass est $;

Sass prend en charge les instructions conditionnelles, vous pouvez utiliser if{}else{}, for{} boucles, etc. Less ne le prend pas en charge ;

Sass est basé sur Ruby et est traité côté serveur, tandis que Less doit introduire less.js pour traiter le code Less et afficher le CSS vers le navigateur

Qu'est-ce qu'axios ? Comment utiliser ? Décrivez le processus d'utilisation pour implémenter la fonctionnalité de connexion ?

Module qui demande des ressources en arrière-plan. npm install axios -S est installé, puis envoyé entre les domaines, il doit être défini dans config/index.js dans le fichier de configuration . Si l'arrière-plan est Tp5, définissez un itinéraire de ressources. Utilisez import in js, puis .get ou .post. S'il réussit, il sera renvoyé dans la fonction .then, s'il échoue, il sera renvoyé dans la fonction .catch

Dans l'avancement axios+tp5, quelle est l'opération d'appel de axios.post(' API/utilisateur') ? Qu'en est-il de axios.put('api/user/8′) ? Opération

Cross-domaine, Ajout d'un utilisateur, opération de mise à jour.

Qu'est-ce que vuex ? Comment utiliser ? Quel scénario fonctionnel l’utilise ?

Gestion de l'état dans le framework vue. Introduisez store dans main.js et injectez-le. Un nouveau magasin d'annuaire est créé,...export. Les scénarios incluent : l'état entre les composants dans une application d'une seule page. Lecture de musique, statut de connexion, ajout au panier

Qu'est-ce que le framework mvvm ? Quelle est la différence entre celui-ci et les autres frameworks (jquery) ? Quels scénarios sont adaptés ?

Un framework model+view+viewModel, un modèle de modèle de données, viewModel connecte deux

Différence : vue basée sur les données, affiche la couche de vue via les données au lieu des opérations de nœuds .

Scénario : Scénarios avec beaucoup d'opérations de données, plus pratiques

Quelles sont les méthodes de personnalisation des instructions (v-check, v-focus) ? Quelles fonctions de hook a-t-il ? Quels autres hooksparamètres de fonction ?

Directive définie globalement : il y a deux paramètres dans la méthode directive de l'objet vue, l'un est le nom de la directive et l'autre est la fonction. Instructions définies dans le composant : directives

Fonction Hook : liaison (déclenchée par un événement de liaison), insérée (déclenchée lors de l'insertion du nœud), mise à jour (mises à jour associées au sein du composant)

Paramètres de la fonction Hook : el , contraignant

Nommez au moins 4 types d'instructions dans vue et leur utilisation ?

v-if : Déterminer s'il faut masquer ; v-for : Boucler les données ; v-bind:class : Lier un attribut ; v-model : Implémenter une liaison bidirectionnelle

Qu'est-ce que vue-router ? De quels composants dispose-t-il ?

Vue est utilisé pour écrire un plug-in de routage. Quels sont les crochets de navigation pour router-link et router-view

 ? Quels paramètres ont-ils ?

Les crochets de navigation incluent :

les crochets a/globaux et les crochets exclusifs aux composants. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave

Paramètres :

Il y a to (l'itinéraire à parcourir), from (l'itinéraire à quitter), next (vous devez utiliser cette fonction pour aller au suivant) Une route, si elle n'est pas utilisée, interceptez-la) Les plus couramment utilisées sont celles-ci

Quel est le principe de la liaison de données bidirectionnelle de Vue?

vue.js utilise le détournement de données combiné au modèle éditeur-abonné. Il utilise Object.defineProperty() pour détourner les setters et getters de chaque propriété et publier des messages lorsque les données changent. A l'abonné, déclenchez le rappel d'écoute correspondant.

Étapes spécifiques :

Étape 1 : Parcourir de manière récursive les objets de données qui doivent être observés, y compris les attributs des objets de sous-attributs , et ajoutez-les Setters et getters
Dans ce cas, attribuer une valeur à cet objet déclenchera le setter, et vous pourrez ensuite surveiller les modifications des données

Deuxième étape : la compilation analyse les instructions du modèle et convertit les variables dans le modèle Remplacez-le par des données, puis initialisez la vue de la page de rendu, liez la fonction de mise à jour au nœud correspondant à chaque instruction et ajoutez des abonnés pour surveiller les données. Une fois les données modifiées, recevez une notification et mettez à jour la vue

1. S'ajoutent à l'attribut abonné (dep) lorsqu'ils sont instanciés. Ils doivent avoir une méthode update.()
3. Lorsque dep.notice() vous avertit des changements d'attribut, vous pouvez appeler votre propre méthode update() et déclencher la liaison de rappel dans Compile, vous aurez alors terminé.

Étape 4 : Comme entrée dans la liaison de données, MVVM intègre Observer, Compile et Watcher, utilise Observer pour surveiller les modifications apportées à ses propres données de modèle, utilise Compile pour analyser et compiler les instructions du modèle, et enfin utilise Watcher pour définir up Le pont de communication entre Observer et Compile réalise l'effet de liaison bidirectionnelle des modifications de données -> afficher les mises à jour ; afficher les modifications interactives (entrée) -> modifications du modèle de données.

Veuillez expliquer en détail votre compréhension du cycle de vie de vue ? Un total de 8 étapes avant/après création, avant/après chargement, avant/après mise à jour, avant/après destruction

Avant/après création : dans Dans le À l'étape beforeCreated, l'élément de montage $el et les données de l'objet de données de l'instance de vue sont tous deux indéfinis et n'ont pas été initialisés. Dans la phase de création, les données de l'objet de données de l'instance vue sont disponibles, mais $el ne le sont pas.

Avant/après chargement : dans l'étape beforeMount, $el et les données de l'instance vue sont initialisés, mais le nœud dom virtuel avant est toujours monté et data.message n'a pas été remplacé. Dans l'étape montée, l'instance vue est montée et data.message est rendu avec succès.

Avant/après mise à jour : lorsque les données changent, les méthodes beforeUpdate et mise à jour seront déclenchées.

Avant/après destruction : après l'exécution de la méthode destroy, les modifications apportées aux données ne déclencheront plus la fonction périodique, indiquant que l'instance Vue a libéré la surveillance des événements et la liaison au dom, mais que la structure dom existe toujours .

Veuillez nous parler du processus d'encapsulation des composants vue ? Tout d'abord, les composants peuvent améliorer l'efficacité du développement de l'ensemble du projet. Il peut résumer la page en plusieurs modules relativement indépendants, ce qui résout les problèmes de notre développement de projet traditionnel : faible efficacité, maintenance difficile, réutilisabilité et autres problèmes.

Ensuite, utilisez la méthode Vue.extend pour créer un composant, puis utilisez la méthode Vue.component pour enregistrer le composant. Les composants enfants nécessitent des données et peuvent accepter des définitions dans les accessoires. Une fois que le composant enfant a modifié les données, il souhaite transmettre les données au composant parent. Vous pouvez utiliser la méthode d'émission.

Comment avez-vous connu vuex ? vuex peut être compris comme un modèle ou un cadre de développement. Par exemple, PHP a thinkphp, java a spring, etc.

Le statut au niveau de l'application est concentré dans le magasin ; la façon de modifier le statut est de soumettre des mutations, ce qui est une chose synchrone ; la logique asynchrone doit être encapsulée dans des actions.

Qu'est-ce que vue-loader ? Quelles sont les utilisations de son utilisation ?

Un chargeur qui analyse les fichiers .vue et convertit template/js/style en modules 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!