Connexion
Connexion

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

WSrx009v

Œuvres récentes Afficher plus d'œuvres>>

Cent ans de solitude - Tableau des relations entre les personnages
Cent ans de solitude est le chef-d'œuvre de Gabriel Garcia Marquez. La lecture de ce livre commence par l'analyse des relations entre les personnages, qui se concentre sur la famille Buendía et raconte l'histoire de la prospérité et du déclin de la famille, de ses relations internes et de ses luttes politiques, de son métissage et de sa renaissance au cours d'une centaine d'années.
Cent ans de solitude - Tableau des relations entre les personnages
Cent ans de solitude est le chef-d'œuvre de Gabriel Garcia Marquez. La lecture de ce livre commence par l'analyse des relations entre les personnages, qui se concentre sur la famille Buendía et raconte l'histoire de la prospérité et du déclin de la famille, de ses relations internes et de ses luttes politiques, de son métissage et de sa renaissance au cours d'une centaine d'années.
Modèle de processus de gestion de projet
La gestion de projet est le processus qui consiste à appliquer des connaissances, des compétences, des outils et des méthodologies spécialisés aux activités du projet afin que celui-ci puisse atteindre ou dépasser les exigences et les attentes fixées dans le cadre de ressources limitées. Ce diagramme fournit une vue d'ensemble des 8 composantes du processus de gestion de projet et peut être utilisé comme modèle générique.

Vue3

WSrx009v

Œuvres récentes Afficher plus d'œuvres>>

Recommandé pour vous
Contour

Les bases de Python
- 109
- 1
Carte mentale
Points de connaissance Python
- 18
WSrx009v
Introduction aux algorithmes
- 8
WSrx009v
Résumé des notes sur le cadre de connaissances du réseau d'algorithmes front-end
- 7
WSrx009v
Travailleur Web
- 10
PlotWizard
Types de balises HTML
- 9
PlotWizard
HTML-CSS
- 37
PlotWizard
Les bases du HTML
- 39
PlotWizard
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 5
- 1
PlotWizard
Programme de formation de base HTML front-end CSS
- 7
PlotWizard

Créer un projet

vue créer A

Syntaxe du modèle

texte

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

Non

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

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()] }) ] } })