Wondershare EdrawMind
- 9
Vue3
Presenta in dettaglio la sintassi e i plug-in di estensione comuni di vue3, il che è comodo per l'apprendimento e le query. È pieno di informazioni utili che possono fare riferimento ad esso.
Modificato alle 2024-02-04 00:46:16
- Consigliato per te
- Profilo
Vue3
Crea progetto
vedere creare A
Sintassi del modello
testo
{{ messaggio }}
Ovunque
Equivalente a $A.text() in JS
Generalmente, viene utilizzato per impostare i dati con data() in js.
Vecchia versione
esportazione predefinita { nome: '123', dati(){ ritorno{ msg: "Richiesta messaggio" } } }
nuova versione
ref definisce una variabile, che può essere riassegnata utilizzando l'attributo .value. ref è un riconfezionamento di reactive
reactive definisce oggetti, non può definire tipi di dati di base e non può essere riassegnato
HTML grezzo
Quando si rappresenta dinamicamente l'HTML con variabili, le doppie parentesi graffe interpreteranno i dati come testo normale, non HTML
v-html=""
Equivalente a $A.html() in JS
Attributi
Utilizza le variabili per rappresentare dinamicamente l'attr
v-bind:id=""
Equivalente a $('div').attr('id', 'ID') in JS
v-bind:id può essere abbreviato come:id
Quando vogliamo che B in A="B" sia una variabile, aggiungiamo semplicemente: davanti ad A.
Nei modelli possono essere supportate semplici espressioni js
Potere
{{ numero 1 }}
{{ok? 'SÌ': 'NO'}}
{{ messaggio.split( ' ').reverse().join( ' ')}}
NO
{{var a = 1 }}
Questa è un'affermazione, non un'espressione
{{ if (ok) {risposta messaggio} }}
Il controllo del processo non avrà effetto, utilizzare espressioni ternarie
Rendering condizionale
v-se
Solo se il valore è true verrà visualizzato
v-altro
v-spettacolo
Verrà eseguito il rendering ma non verrà visualizzato
Rendering dell'elenco
v-per
(x,indice) negli elementi
Questo comando eseguirà il loop len(items) volte e ogni volta verrà utilizzata la x interna per ottenere il valore in items
:chiave="oggetto.id"
Aggiornamento in atto per migliorare l'efficienza
gestione degli eventi
Aggiungi evento
Scrivi direttamente
@click="contatore = 1"
Funzioni di chiamata
@click="clickHandle(123)"
Vecchia versione
metodi: { clickHandle(dati){ console.log(dati); } }
La modifica del valore dei dati nei metodi può essere ottenuta tramite questo.A
nuova versione
Puoi aggiungere un evento parametro, che è un evento js nativo.
Avviso
il clic può essere attivato su qualsiasi oggetto cliccato, come <li>
Rilegatura bidirezionale
modello v
Può associare bidirezionalmente <input>, <textarea> e <select>
La modifica del valore nei dati può modificare il valore in <input>, La modifica del valore in <input> può anche modificare il valore nei dati
Convertire un attributo in un tipo di modello
v-model:current-page="nowpage"
v-model.lazy
Cambierà solo quando <input> perde il focus
v-model.trim
Rimuovi gli spazi iniziali e finali durante il recupero
componenti
suffisso
.vista
contenuto
modello
sceneggiatura
esportare le proprietà predefinite dell'oggetto
nome: il nome del componente
dati: passa i dati
metodi: scrivere funzioni
componenti: memorizza tutti i componenti utilizzati in <template>
props: memorizza i dati passati dal componente genitore al componente figlio
watch(): attivato quando cambiano determinati dati
calcolato: calcola dinamicamente determinati dati
setup(oggetti di scena, contesto): inizializza variabili e funzioni
ref definisce una variabile e può essere riassegnato utilizzando l'attributo .value
L'oggetto della definizione reattiva non può essere riassegnato
context.emit(): funzione che attiva l'associazione del componente principale
return può passare i dati ai componenti figlio
stile
ambito
Se questo attributo è presente, questo stile avrà effetto solo nel componente corrente.
carico
Introdurre i componenti
importa A da ./components/A.vue
appeso al componente
componenti:{A}
componente di visualizzazione
<A/>
Interazione dei componenti
Componente padre passato al componente figlio
Passa HTML
<el-main>Elenco</el-main>
Passa variabili
metodo di spedizione
Tramite oggetti di scena nell'esportazione predefinita nello script
Passaggi di passaggio
componente genitore
Scrivi il tag del componente figlio nel modello
:A=B:C=D
Se vuoi passare qualche parametro complesso B, puoi scriverlo in setup()
Qui B è l'utente
Sottoinsieme
sceneggiatura
esportazione predefinita { nome: "Il mio componente", oggetti di scena: { UN:{ tipo: stringa, predefinito: "" }, }, }
In genere, scegli uno tra obbligatorio:true e predefinito:""
Avviso
I valori predefiniti per array e oggetti devono essere funzioni
predefinito:funzione(){ ritorno []; }
predefinito:funzione(){ ritorno {}; }
Nella configurazione, puoi fare riferimento alle informazioni del componente principale tramite oggetti di scena.
modello
{{}} Citazione
tipo passato
Corda
Numero
Booleano
Vettore
Oggetto
Funzione
Componente figlio passato al componente padre
metodo di spedizione
Passa i dati attraverso eventi personalizzati
Passaggi di passaggio
Sottoinsieme
Scrivi un evento A nel modello
origine dell'evento
Implementare questo evento A nei metodi
Vecchia versione
this.$emit("B",this.messaggio)
nuova versione
context.emit("B"): funzione che attiva l'associazione del componente principale
componente genitore
Scrivi il tag del componente figlio nel modello
@B="C"
Implementa questo evento C nei metodi. L'evento avrà un parametro, che è il valore passato.
C(dati){}
Ciclo di vita dei componenti
Quando creato: beforeCreate, creato Durante il rendering: beforeMount, montato Durante l'aggiornamento: beforeUpdate, aggiornato Durante lo smontaggio: beforeUnmount, smontato
Le otto funzioni periodiche sono allo stesso livello dei dati
Presentare terze parti
Scorritore
giostra
Axios
richiesta di rete
incapsulamento
Crea la cartella utils in src e crea il file request.js al suo interno
Utilizzo specifico
https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38
10:16
Soluzione interdominio per richieste di rete
stringa della domanda
Converti in stringa
instradamento
Salto di pagina
Scrivi l'URL che deve essere saltato nei percorsi nel router
<vista-router>
spettacolo
<link-router to="...">
Salto
Portare parametri
percorso:"/list/:A/:B"
a="/list/Baidu/1"
const percorso = useRoute(); {{route.params.userID}}
Routing nidificato
Reindirizzare
{ percorso: '/:catchAll(.*)/', reindirizzamento: "/404", }
ricaricare
L'impostazione predefinita consiste nel determinare se aggiornare in base al nome.
È possibile personalizzare il metodo di giudizio riscrivendo il valore della chiave
vuex
composizione
stato: usa il contenuto in vuex
Getter: filtra e calcola i dati in Vuex
Mutazione: modifica lo stato nel negozio Vuex
Vecchia versione
nuova versione
importa { useStore } da "vuex";
const negozio = useStore();
impostare(){ store.dispatch("login", {paragrafi}) }
Il commit è un metodo per inviare ed eseguire mutazioni. Le mutazioni modificano i dati e devono essere sincronizzate.
Dispatch è un metodo che invia ed esegue azioni che inviano mutazioni, che possono essere operazioni asincrone.
azione: simile a Mutazione, supporta operazioni asincrone, ma non può modificare l'archivio
moduli: sottomoduli che definiscono lo stato
trasferimento
esterno
stato
store.state.user.access
azione
store.dispatch("nome funzione", parametri)
mutazione
store.commit("nome funzione", parametri)
interno
le mutazioni regolano lo stato
stato.id
funzione di chiamata
Cambia il negozio in contesto
JWT
Chiave pubblica della password -> nuova stringa Se hai la chiave pubblica, puoi usarla per verificare se la password è corretta. Ma se vuoi ottenere la password tramite questa nuova stringa, hai bisogno della chiave privata Indietro.
npm i jwt-decodifica
importa jwt_decode da 'jwt-decode';
Nota: c'è uno spazio dopo Portatore
ajax
Se vuoi usare ajax sulla pagina vue, puoi scriverlo direttamente nel setup, e verrà chiamato direttamente quando la pagina verrà generata. Naturalmente può anche essere scritto in una funzione
Se vuoi usarlo in vuex, devi inserirlo nella funzione per attivarlo.
altro
impostare()
Frammento senza nodo radice
Installa elemento
npm installa element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js
const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Componenti = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolver') modulo.exports = defineConfig({ transpileDependencies: vero, configurareWebpack: { plugin: [ Importazione automatica({ risolutori: [ElementPlusResolver()] }), Componenti({ risolutori: [ElementPlusResolver()] }) ] } })