Wondershare EdrawMind
Galerie de cartes mentales Vue3
- 13
Vue3
Il présente en détail la syntaxe et les plug-ins d'extension courants de vue3, ce qui est pratique pour l'apprentissage et les requêtes. Il regorge d'informations utiles. Les amis intéressés peuvent s'y référer !
Modifié à 2024-02-04 00:46:16
- Recommandé pour vous
- Contour
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 14
- 1
Vue3
Créer un projet
vue créer A
Syntaxe du modèle
texte
{{ message }}
N'importe où
Équivalent à $A.text() en JS
Généralement, il est utilisé pour définir des données avec data() dans js.
Ancienne version
exporter par défaut { nom : '123', données(){ retourner{ msg : "Invite de message" } } }
nouvelle version
ref définit une variable, qui peut être réaffectée à l'aide de l'attribut .value. ref est un reconditionnement de réactif
réactif définit les objets, ne peut pas définir les types de données de base et ne peut pas être réaffecté
HTML brut
Lors de la représentation dynamique du HTML avec des variables, les doubles accolades interpréteront les données comme du texte normal et non comme du HTML.
v-html=""
Équivalent à $A.html() en JS
Les attributs
Utiliser des variables pour représenter dynamiquement attr
v-bind:id=""
Équivalent à $('div').attr('id', 'ID') en JS
v-bind:id peut être abrégé comme:id
Quand on veut que B dans A="B" soit une variable, il suffit d'ajouter : devant A.
Les expressions js simples peuvent être prises en charge dans les modèles
Peut
{{ numéro 1 }}
{{ d'accord ? 'OUI' : 'NON'}}
{{ message.split( ' ').reverse().join( ' ')}}
Non
{{ var a = 1 }}
Ceci est une déclaration, pas une expression
{{ if (ok) {retour de message} }}
Le contrôle du processus ne prendra pas effet, veuillez utiliser des expressions ternaires
Rendu conditionnel
v-si
Ne sera rendu que si la valeur est vraie
v-sinon
v-show
Rendu mais pas affiché
Rendu de liste
v-pour
(x,index) dans les éléments
Cette commande bouclera len(items) fois, et chaque fois que le x à l'intérieur est utilisé pour obtenir la valeur en items
:key="article.id"
Mise à jour en place pour améliorer l'efficacité
gestion des événements
Ajouter un évènement
Écrivez directement
@clic="compteur = 1"
Fonctions d'appel
@click="cliquez surPoignée(123)"
Ancienne version
méthodes : { clickHandle(données){ console.log(données); } }
La modification de la valeur des données dans les méthodes peut être obtenue grâce à cela.A
nouvelle version
Vous pouvez ajouter un événement paramètre, qui est un événement js natif.
Avis
le clic peut être déclenché sur n'importe quel objet cliqué, tel que <li>
Liaison bidirectionnelle
modèle en V
Peut lier de manière bidirectionnelle <input>, <textarea> et <select>
Changer la valeur dans data peut changer la valeur dans <input>, Changer la valeur dans <input> peut également changer la valeur dans data
Convertir un attribut en type de modèle
v-model:current-page="nowpage"
v-model.lazy
Ne changera que lorsque <input> perd le focus
v-model.trim
Supprimer les espaces de début et de fin lors de la récupération
Composants
suffixe
.vue
contenu
modèle
scénario
exporter les propriétés de l'objet par défaut
name : le nom du composant
data : transmettre les données
méthodes : écrire des fonctions
composants : stocke tous les composants utilisés dans <template>
props : stocke les données transmises par le composant parent au composant enfant
watch() : déclenché lorsqu'une certaine donnée change
calculé : calculer dynamiquement certaines données
setup(props, context) : initialiser les variables et les fonctions
ref définit une variable, qui peut être réaffectée à l'aide de l'attribut .value
L'objet de définition réactif ne peut pas être réaffecté
context.emit() : fonction qui déclenche la liaison du composant parent
return peut transmettre des données aux composants enfants
style
portée
Si cet attribut est présent, ce style ne prendra effet que dans le composant courant.
charger
Introduire les composants
importer A depuis ./components/A.vue
accroché à un composant
composants :{A}
composant d'affichage
<A/>
Interaction des composants
Composant parent transmis au composant enfant
Passer le HTML
<el-main>Liste</el-main>
Passer des variables
mode de livraison
Via les accessoires dans l'exportation par défaut dans le script
Passer les étapes
composant parent
Écrivez la balise du composant enfant dans le modèle
:A=B :C=D
Si vous souhaitez transmettre un paramètre complexe B, vous pouvez l'écrire dans setup()
Ici B est l'utilisateur
Sous-ensemble
scénario
exporter par défaut { nom : "MonComposant", accessoires : { UN:{ tapez : chaîne, défaut: "" }, }, }
En général, choisissez l'un des éléments requis :true et default :""
Avis
Les valeurs par défaut des tableaux et des objets doivent être des fonctions
par défaut :fonction(){ retour []; }
par défaut :fonction(){ retour {}; }
Lors de la configuration, vous pouvez référencer les informations du composant parent via des accessoires.
modèle
{{}} Citation
type réussi
Chaîne
Nombre
Booléen
Tableau
Objet
Fonction
Composant enfant transmis au composant parent
mode de livraison
Transmettre des données via des événements personnalisés
Passer les étapes
Sous-ensemble
Écrire un événement A dans un modèle
source d'événement
Implémentez cet événement A dans les méthodes
Ancienne version
ceci.$emit("B",ce.message)
nouvelle version
context.emit("B") : fonction qui déclenche la liaison du composant parent
composant parent
Écrivez la balise du composant enfant dans le modèle
@B="C"
Implémentez cet événement C dans les méthodes. L'événement aura un paramètre, qui est la valeur transmise.
C(données){}
Cycle de vie des composants
Une fois créé : avantCréer, créé Lors du rendu : avantMontage, monté Lors de la mise à jour : avant la mise à jour, mis à jour Lors du démontage : beforeUnmount, démonté
Les huit fonctions périodiques sont au même niveau que les données
Introduire des tiers
Glisseur
carrousel
Axios
demande de réseau
Encapsulation
Créez le dossier utils dans src et créez-y le fichier request.js
Utilisation spécifique
https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38
10h16
Solution interdomaine de requête réseau
chaîne de requête
Convertir en chaîne
routage
Saut de page
Écrivez l'URL qui doit être sautée dans les routes du routeur
<vue du routeur>
montrer
<routeur-lien vers="...">
Saut
Paramètres de transport
chemin :"/liste/:A/:B"
à="/list/Baidu/1"
const route = useRoute(); {{route.params.userID}}
Routage imbriqué
Réorienter
{ chemin : '/:catchAll(.*)/', redirection : "/404", }
rafraîchir
La valeur par défaut consiste à déterminer s'il faut actualiser par nom.
Vous pouvez personnaliser la méthode de jugement en réécrivant la valeur clé
vuex
composition
état : utiliser le contenu dans vuex
Getter : filtrer et calculer des données dans Vuex
Mutation : modifier l'état dans le magasin Vuex
Ancienne version
nouvelle version
importer { useStore } depuis "vuex" ;
const magasin = useStore();
installation(){ store.dispatch("connexion", {paras}) }
Commit est une méthode de soumission et d'exécution de mutations. Les mutations modifient les données et doivent être synchronisées.
Dispatch est une méthode qui soumet et exécute des actions. Les actions soumettent des mutations, qui peuvent être des opérations asynchrones.
action : similaire à Mutation, prend en charge les opérations asynchrones, mais ne peut pas modifier le magasin
modules : sous-modules qui définissent l'état
transfert
externe
État
magasin.state.user.access
action
store.dispatch("nom de la fonction", paramètres)
mutation
store.commit("nom de la fonction", paramètres)
interne
les mutations ajustent l'état
état.id
fonction d'appel
Changer le magasin en contexte
JWT
Clé publique du mot de passe -> nouvelle chaîne Si vous disposez de la clé publique, vous pouvez l'utiliser pour vérifier si le mot de passe est correct. Mais si vous souhaitez obtenir le mot de passe via cette nouvelle chaîne, vous avez besoin de la nouvelle chaîne. dos.
npm je décode jwt
importer jwt_decode depuis 'jwt-decode' ;
Remarque : Il y a un espace après Bearer
ajax
Si vous souhaitez utiliser ajax sur la page vue, vous pouvez l'écrire directement dans la configuration, et il sera appelé directement lors de la génération de la page. Bien sûr, cela peut aussi être écrit dans une fonction
Si vous souhaitez l'utiliser dans vuex, vous devez le mettre dans la fonction pour le déclencher.
autre
installation()
Fragment sans nœud racine
Installer l'élément
npm installer élément-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js
const { définirConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Composants = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = définirConfig({ transpileDependencies : vrai, configureWebpack : { plugins : [ Importation automatique({ résolveurs : [ElementPlusResolver()] }), Composants({ résolveurs : [ElementPlusResolver()] }) ] } })