Guida per principianti a Vue Modals

Blog

Uno dei componenti più comuni nelle applicazioni web è il dialogo modale. Le modalità Vue sono piuttosto facili da creare e con cui lavorare e in questo tutorial ti mostreremo come!



Immergiamoci subito.

Per iniziare: configurazione dell'ambiente di sviluppo

Per questo tutorial, utilizzeremo l'IDE Eclipse con il plug-in CodeMix installato.



  • Scarica Eclipse IDE qui .
  • CodeMix può essere installato da Mercato di Eclipse
  • Installa il Visto pack utilizzando il browser di estensione CodeMix.

Creazione di un progetto Vue utilizzando CodeMix

Ora possiamo creare la nostra applicazione utilizzando il CodeMix Project Wizard. Utilizzeremo l'ultima versione di tutte le librerie e gli stack tecnologici al momento della stesura di questo articolo. Per creare un nuovo progetto Vue, vai a File > Nuovo > Progetto > CodeMix > Vue Project . Assicurati di scegliere l'opzione dell'applicazione A Vue CLI nella procedura guidata prima di fare clic su Fine.



Una volta completato il progetto, apri il Terminale integrato+ per il progetto usando Ctrl/Cmd + Maiusc + P ed eseguendo il comando Terminale: Crea nuovo terminale integrato. Se hai più di un progetto nel tuo spazio di lavoro, ti verrà chiesto di selezionare il tuo progetto nella tavolozza dei comandi prima di aprire il Terminale.

Nel Terminale, esegui i seguenti comandi per installare i moduli Node richiesti.

npm install

Al termine dell'installazione, puoi servire l'applicazione subito, trovare la tua applicazione nella vista Server e utilizzare l'azione Esegui del menu di scelta rapida per iniziare a servirla.

Creazione del componente

Nel |_+_| cartella, creare un file chiamato |_+_|. Puoi farlo usando il Nuovo> Visualizza file procedura guidata accessibile dal menu contestuale del progetto. Creeremo un componente molto semplice per ora.

corpo-scroll-lock

Nota: Per ulteriori informazioni sulle funzionalità Vue di CodeMix

components

Conclusione

In questo articolo abbiamo appreso come creare una finestra di dialogo modale con Vue e abbiamo esplorato l'uso di slot denominati per distribuire il contenuto tra i componenti.

Puoi scaricare il codice sorgente dal nostro repository GitHub qui .

#vue-js #javascript #web-development

www.genuitec.com

Guida per principianti a Vue Modals

Uno dei componenti più comuni nelle applicazioni web è il dialogo modale. Le modalità Vue sono piuttosto facili da creare e con cui lavorare e in questo tutorial ti mostreremo come!