Login
Accedi

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

WSZUS4lF

Lavori recenti Visualizza più lavori>>

Breve storia del tempo
Questa è una mappa mentale su una breve storia del tempo. "Una breve storia del tempo" è un'opera scientifica popolare con un'influenza di vasta portata. Non solo introduce i concetti di base della cosmologia e della relatività, ma discute anche dei buchi neri e dell'espansione dell'universo. questioni scientifiche all’avanguardia come l’inflazione e la teoria delle stringhe.
Il coraggio di essere odiato
Dopo aver letto "Il coraggio di essere antipatico", "Il coraggio di essere antipatico" è un libro filosofico che vale la pena leggere. Può aiutare le persone a comprendere meglio se stesse, a comprendere gli altri e a trovare modi per ottenere la vera felicità.
Appunti di lettura di Il coraggio di non piacere.
"Il coraggio di essere antipatico" non solo analizza le cause profonde di vari problemi nella vita, ma fornisce anche contromisure corrispondenti per aiutare i lettori a comprendere meglio se stessi e le relazioni interpersonali e come applicare la teoria psicologica di Adler nella vita quotidiana.

Vue3

WSZUS4lF

Lavori recenti Visualizza più lavori>>

Consigliato per te
Profilo

Nozioni di base su Python
- 44
WSZUS4lF
Apprendimento frontale
- 4
WSZUS4lF
Programmazione
- 11
WSZUS4lF
Mappa mentale della tecnologia di progettazione e implementazione dell'applicazione
- 9
WSZUS4lF
Elenco delle librerie PYTHON
- 17
WSZUS4lF
Distinta base
- 13
WSCoUtCI
Lavoratore Web
- 8
WSCoUtCI
programmazione
- 12
WSZUS4lF
Tipi di tag HTML
- 12
WSCoUtCI
CSSHTML
- 8
WSCoUtCI

Crea progetto

vedere creare A

Sintassi del modello

testo

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

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

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