Qu'est-ce que le mixage vue.js ?
Le mixage dans vue.js est une méthode ou une propriété calculée qui distribue des fonctions réutilisables dans les composants Vue. Objectif : 1. Une fois le constructeur écrit, vous devez ajouter des méthodes ou des activités temporaires. Lors de l'utilisation de la méthode, mélanger. in réduira la pollution du code source ;2. Lors de l'utilisation de méthodes publiques, l'utilisation de la méthode de mélange peut réduire la quantité de code et permettre la réutilisation du code.
Cette méthode convient à toutes les marques d'ordinateurs.
Les mixins définissent une partie de méthodes réutilisables ou de propriétés calculées. Les mixins peuvent contenir des options de composants arbitraires. Lorsqu'un composant utilise un objet mixin, toutes les options de l'objet mixin seront mélangées aux options du composant lui-même.
Les mixins ont généralement deux utilisations :
1 Après avoir écrit le constructeur, vous devez ajouter des méthodes ou des activités temporaires de temps en temps. réduira la pollution du code source.
2. Les méthodes publiques sont utilisées dans de nombreux endroits. L'utilisation de la méthode de mixage peut réduire la quantité de code et permettre la réutilisation du code.
Utilisation de base des Mixins
Nous avons maintenant un programme qui incrémente les nombres en cliquant dessus. En supposant qu'il soit terminé, nous espérons qu'à chaque fois. les données changent Une invite peut être imprimée sur la console : "Les données ont changé".
Processus d'implémentation du code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type="text/javascript">
//额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>La séquence d'appel des mixins
En termes d'ordre d'exécution, les méthodes mixtes sont exécutées en premier, puis celles du constructeur sont exécutées. Il convient de noter qu'il ne s'agit pas d'un remplacement de la méthode, mais qu'elle est exécutée des deux côtés.
Dans le constructeur du code ci-dessus, nous avons également ajouté la fonction hook mise à jour :
updated:function(){
console.log("构造器里的updated方法。")
},À l'heure actuelle, l'ordre de sortie de la console est :
mixins data Libérez la modification et remplacez-la par 2. La méthode mise à jour dans le constructeur
.
PS : Lorsque la méthode mixte et la méthode constructeur ont le même nom, la méthode mixte ne peut pas être affichée, c'est-à-dire qu'elle ne fonctionnera pas.
Méthode de mix-in API globale
Nous pouvons également définir un mix-in global, afin que vous puissiez avoir cette fonction en introduisant directement js où ceci le code est nécessaire. Jetons un coup d'œil à la méthode de mix-in global :
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})PS : L'ordre d'exécution des mix-ins globaux est avant les méthodes dans les mix-ins et les constructeurs.
Recommandations associées :
Un résumé des questions d'entretien de vue frontale en 2020 (avec réponses)
Tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Discussion approfondie sur la façon dont vite analyse les fichiers .env
Jan 24, 2023 am 05:30 AM
Lorsque nous utilisons le framework Vue pour développer des projets front-end, nous déploierons plusieurs environnements lors du déploiement. Souvent, les noms de domaine d'interface appelés par les environnements de développement, de test et en ligne sont différents. Comment peut-on faire la distinction ? Cela utilise des variables et des modèles d'environnement.
Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue
Apr 24, 2023 am 10:52 AM
Ace est un éditeur de code intégrable écrit en JavaScript. Il correspond aux fonctionnalités et aux performances des éditeurs natifs comme Sublime, Vim et TextMate. Il peut être facilement intégré à n’importe quelle page Web et application JavaScript. Ace est maintenu en tant qu'éditeur principal de l'IDE Cloud9 et est le successeur du projet Mozilla Skywriter (Bespin).
Quelle est la différence entre la composantisation et la modularisation dans Vue
Dec 15, 2022 pm 12:54 PM
La différence entre la modularisation et la modularisation : la modularisation est divisée du point de vue de la logique du code ; elle facilite le développement en couches de code et garantit la cohérence des fonctions de chaque module fonctionnel. La composantisation est planifiée du point de vue de l'interface utilisateur ; la composantisation du frontal facilite la réutilisation des composants de l'interface utilisateur.
Combat pratique : développer un plug-in dans vscode qui prend en charge les fichiers vue pour accéder aux définitions
Nov 16, 2022 pm 08:43 PM
vscode lui-même prend en charge les composants de fichiers Vue pour accéder aux définitions, mais la prise en charge est très faible. Sous la configuration de vue-cli, nous pouvons écrire de nombreuses utilisations flexibles, ce qui peut améliorer notre efficacité de production. Mais ce sont ces méthodes d'écriture flexibles qui empêchent les fonctions fournies par vscode lui-même de prendre en charge le passage aux définitions de fichiers. Afin d'être compatible avec ces méthodes d'écriture flexibles et d'améliorer l'efficacité du travail, j'ai écrit un plug-in vscode qui prend en charge les fichiers Vue pour accéder aux définitions.
Parlons en profondeur de reactive() dans vue3
Jan 06, 2023 pm 09:21 PM
Avant-propos : Dans le développement de vue3, réactif fournit une méthode pour implémenter des données réactives. Il s'agit d'une API fréquemment utilisée dans le développement quotidien. Dans cet article, l’auteur explorera son mécanisme de fonctionnement interne.
Découvrez comment écrire des tests unitaires dans Vue3
Apr 25, 2023 pm 07:41 PM
Vue.js est devenu aujourd'hui un framework très populaire dans le développement front-end. À mesure que Vue.js continue d'évoluer, les tests unitaires deviennent de plus en plus importants. Aujourd'hui, nous allons explorer comment écrire des tests unitaires dans Vue.js 3 et fournir quelques bonnes pratiques ainsi que des problèmes et solutions courants.
Une comparaison simple de la syntaxe JSX et de la syntaxe des modèles dans Vue (analyse des avantages et des inconvénients)
Mar 23, 2023 pm 07:53 PM
Dans Vue.js, les développeurs peuvent utiliser deux syntaxes différentes pour créer des interfaces utilisateur : la syntaxe JSX et la syntaxe des modèles. Les deux syntaxes ont leurs propres avantages et inconvénients. Discutons de leurs différences, avantages et inconvénients.
Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers
Mar 24, 2023 pm 07:40 PM
Dans le processus de développement réel du projet, il est parfois nécessaire de télécharger des fichiers relativement volumineux, puis le téléchargement sera relativement lent, de sorte que l'arrière-plan peut nécessiter que le front-end télécharge des tranches de fichiers. Par exemple, 1 A. Le flux de fichiers de gigaoctets est découpé en plusieurs petits flux de fichiers, puis l'interface est invitée à fournir respectivement les petits flux de fichiers.
