Points de connaissances sur les entretiens Vue

Cette fois, je vais vous apporter quelques points de connaissances sur l'interview de Vue. Les amis qui en ont besoin peuvent y prêter attention pour l'apprendre.

[Recommandations associées : questions d'entretien avec vue (2020)]

1 Introduction à vue

vue est une version. user Le cadre de l'interface. Il s'agit d'un framework mvv léger, comme Angular, il s'agit de ce que l'on appelle la liaison de données bidirectionnelle, le développement frontal basé sur les données et basé sur les composants. Il implémente la liaison de données réactive et la combinaison de composants de vue via une simple API. est facile à utiliser et compact.

2. Installez le plug-in vue-devtools pour faciliter le débogage de vue dans Chrome. Configurez si vue-devtools est autorisé à vérifier le code pour faciliter le débogage. L'environnement de production est défini sur false, vue.config. devtools = false;

vue.config.productionTip=false; Empêche le démarrage des messages de production.

3. Commandes communes.

Liaison de données bidirectionnelle selon le modèle V, généralement utilisée pour les éléments de formulaire.

v-for effectue des opérations de boucle sur des tableaux ou des objets. Utilisez v-for au lieu de v-repeat

v-on est utilisé. pour lier Définir l'heure, utilisation : v-on : time = 'function'

v-show/v-if est utilisé pour afficher ou masquer des éléments, v-show est implémenté via l'affichage , v- if est créé après chaque suppression

4 Événements et attributs

v-on:click = "Abréviation @click=". "

Objet d'événement $event, qui comprend des informations relatives à l'événement, telles que la source de l'événement, le type d'heure, le décalage, etc.

Événement bouillonnant, La méthode native js s'appuie sur des objets événement, tandis que la méthode vue ne s'appuie pas sur des objets événement. @click.stop empêche les événements de bouillonner

Événements de clavier : @keydown.13 ; ou keydown, entrez

Le modificateur d'événement .stop appelle event.stopPropagation();

v-bind est utilisé pour la liaison d'attribut, utilisation v. -bind :Attribute="" Exemple v-bind:src="" Abréviation : src=""

5. Modèle

vue. .js En utilisant la syntaxe de modèle basée sur HTML, le modèle de données qui lie dom à l'instance de vue est {{}} utilisé pour lier les données et les afficher sur la page

liaison bidirectionnelle v- model

La liaison unique {{}} peut avoir des problèmes de scintillement, vous pouvez également utiliser v-text v-html

Autres instructions v -once les données sont liées une fois que v-pre ne mute pas et est affiché directement tel quel

6. Le filtre

est utilisé pour filtrer les données du modèle. Traiter et filtrer les paires de données avant d'afficher

Syntaxe : {{data | filter (parameter) |filter (parameter)}}

Les filtres intégrés seront supprimés après la version 2.0. Si vous les utilisez, vous pouvez utiliser des bibliothèques tierces telles que lodash data-fns, le formatage de la date, la comptabilité.js, le formatage et la personnalisation des devises

7. Envoyer une requête ajax

Vue lui-même ne prend pas en charge l'envoi de requêtes ajax. Vous devez utiliser des plug-ins tels que vue-resource axios pour l'implémenter. utiliser axios

axios est un client de requêtes http basé sur des promesses, utilisé pour envoyer des requêtes

Utilisation de base :

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

Remarque : lorsqu'axios envoie des données par défaut, le format des données est la charge utile de la demande, et non le format de données du formulaire que nous utilisons, les paramètres doivent donc être transmis en tant qu'objets clé-valeur

, les paramètres ne peuvent pas être transmis sous la forme de json

Méthodes de transmission des paramètres : épissez vous-même les paires clé-valeur, utilisez transformrequst pour convertir les données de la requête avant d'envoyer la requête, ou utilisez le qs Le module de conversion

axios ne prend pas en charge les requêtes inter-domaines. Vous pouvez utiliser vue-resource pour envoyer des requêtes inter-domaines.

Envoyer une demande sur plusieurs domaines : this.$http.get(url,[options]); this.$http.post(url,[options]);

Cycle de vie 8.vue

Le processus de la création à la destruction de l'instance vue devient le cycle de vie

9. Attributs calculés

Les attributs calculés sont également utilisés pour stocker des données. Ils ont ces deux caractéristiques : les données peuvent être traitées logiquement et les données des attributs calculés peuvent être surveillées.

Propriétés et méthodes de l'instance 10.vue

Propriétés vm.$el vm.$data vm.$options vm.$refs

Méthode vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11, instruction personnalisée

instruction globale personnalisée vue.directive (identifiant d'instruction, objet de définition)

12. Transition (animation)

Vue propose une variété de façons différentes d'appliquer le processus lors de l'insertion de mises à jour ou d'un dom. L'essence est toujours d'utiliser une animation CSS, <🎜. >

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13 Le composant .Component

est l'une des fonctions les plus puissantes de vue. Les composants peuvent combattre sauvagement les éléments HTML, encapsuler le code réutilisé et les composants sont des objets d'élément personnalisés.

Définissez la méthode du composant, a> créez d'abord un constructeur de composant, puis utilisez le constructeur de composant pour créer le composant. b>Créer directement

Pour référencer le modèle, le contenu du composant est référencé dans le modèle