Vue.js și-a câștigat reputația ca un cadru JavaScript progresiv. Puteți folosi Vue.js pentru a crea aplicații cu o singură pagină (SPA) sau pentru a dezvolta interfețe de utilizator specifice.

Aici veți învăța elementele de bază ale Vue.js, inclusiv cum să creați o componentă Vue și să lucrați cu obiectul opțiuni pentru a reda date dinamice.

Vue.js este unul dintre cele mai populare cadre JavaScript. Pentru a începe cu Vue, iar pentru a-l adăuga la pagina dvs. HTML, copiați eticheta de script de mai jos și inserați-o în secțiunea head:

<scenariusrc="">scenariu>

Utilizarea legăturii CDN este o opțiune excelentă pentru a îmbunătăți HTML static sau pentru a adăuga funcționalitate aplicației dvs.

Cu toate acestea, trebuie să instalați Vue.js prin npm pentru a utiliza mai multe dintre caracteristicile sale avansate, cum ar fi sintaxa Single-File Component (SFC), care sunt utile la construirea de aplicații Vue cu drepturi depline.

Crearea unei aplicații Vue

Accesarea bibliotecii Vue prin linkul CDN oferă un obiect Vue, inclusiv .createApp() metodă.

După cum sugerează și numele, puteți crea o aplicație Vue folosind această metodă.

De exemplu:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<scenariu>
 const app = Vue.createApp();
scenariu>
corp>
html>

Aici aplicația creată este stocată în aplicația variabil. După crearea instanței de aplicație, trebuie să o redați folosind .montură() metodă. Această metodă spune unde să montezi aplicația în Document Object Model (DOM).

Ca astfel:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>div>
<scenariu>
 const app = Vue.createApp();
 app.mount("#aplicație");
scenariu>
corp>
html>

Pentru a folosi Vue's .montură() metoda, trebuie să furnizați un element DOM sau un selector ca argument. În acest exemplu, am montat aplicația Vue folosind elementul DOM cu #aplicație ID.

Este important de reținut că aplicația Vue controlează doar elementele care au fost specificate folosind un id. De asemenea, aplicația nu are control asupra nimic din afara acelor elemente, inclusiv evenimentele de clic sau orice altă interactivitate.

Pasul final al creării unei aplicații Vue este să apelați .montură() metoda după finalizarea tuturor configurațiilor aplicației.

Obiectul Opțiuni din Vue

În Vue.js, utilizați Opțiuni obiect ca obiect de configurare pentru a crea o instanță sau o componentă Vue.

Este o parte esențială a unei aplicații Vue, deoarece definește comportamentul și datele pentru fiecare instanță sau componentă. The Opțiuni obiectul este format din mai multe proprietăți reprezentând diverse aspecte ale instanței sau componentei.

Unele dintre proprietățile utilizate în mod obișnuit în Opțiuni obiect sunt:

• date: Această proprietate definește obiectul de date pentru aplicațiile Vue. Este o funcție care returnează un obiect care conține proprietățile datelor și valorile lor inițiale.
• metode: The metode proprietatea obiectului Opțiuni deține funcții vitale pentru a permite randarea dinamică.
• șablon: Această proprietate definește șablonul HTML pentru instanța sau componenta Vue. Este un șir care conține marcajul HTML, pe care compilatorul de șabloane Vue îl poate analiza.

Rețineți că atunci când utilizați o proprietate șablon, compilatorul Vue va reda numai conținutul definit în șablon.

Iată un exemplu de aplicație Vue cu date, metode, și șablon proprietati:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<h1 @clic="reverseMessage" >{{ text }}h1>
div>
<scenariu>
const app = Vue.createApp({
// șablon: '
Bun venit la aplicația ta Vue
',
 date() {
întoarcere {
 text: „Aceasta este aplicația ta Vue”
 };
 },
 metode: {
 reverseMessage () {
acest.text = acest.text.split('').reverse().join('')
 }
 }
 });
aplicația.montură("#aplicație");
scenariu>
corp>
html>

Acest program descrie o aplicație Vue de bază care afișează textul „Aceasta este aplicația ta Vue” folosind interpolarea textului și permite utilizatorilor să facă clic pe ea pentru a inversa mesajul.

The date() funcția returnează un obiect cu o singură proprietate numită text. The @clic directiva este folosită pentru a atașa a reverseMessage() metoda la element, care inversează text proprietate.

La rularea acestui program, aplicația Vue creată va arăta astfel:

Făcând clic pe text, se va inversa.

Rețineți că programul a comentat proprietatea șablonului pentru a permite redarea conținutului din aplicația Vue. Dacă este lăsată fără comentarii, această aplicație Vue va afișa numai o proprietate de șablon:

Există și alte proprietăți precum recuzită și calculate, pe care o puteți utiliza și pentru a crea aplicații Vue puternice și flexibile atunci când configurați obiectul Opțiuni.

Interpolarea textului în Vue

Interpolarea textului în Vue este o caracteristică care vă permite să legați dinamic datele la elemente HTML. Cu alte cuvinte, vă va permite să scoateți direct valoarea proprietăților de date ale unei instanțe Vue în HTML.

Pentru a realiza interpolarea textului în Vue, trebuie să înfășurați numele proprietății de date în acolade duble. Vue interpretează conținutul din interiorul acoladelor duble ca expresii JavaScript și le înlocuiește în continuare cu valoarea rezultată.

De exemplu:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<h1>{{ mesaj }}h1>
<p>Bun venit {{ nume }}p>
div>
<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 mesaj: „Aceasta este aplicația ta Vue.”,
 nume: "Nobil",
 };
 },
 });
 app.mount("#aplicație");
scenariu>
corp>
html>

În acest exemplu, interpolarea textului leagă mesaj și Nume proprietățile obiectului de date returnate în instanța Vue către și elemente. Odată ce aplicația Vue este montată, afișează valorile mesaj și Nume proprietățile din HTML la pozițiile lor respective.

De asemenea, puteți afișa rezultatul unui apel de metodă sau puteți efectua operații JavaScript de bază între parantezele duble:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<h1>{{ mesaj }}h1>
<h3>Bun venit {{ name.toUpperCase() }}h3>
<p>Există {{ nameLength() }} litere în numele tău.p>
div>
<p>nu aicip>
<scenariu>
 const app = Vue.createApp({
 date() {
 întoarcere {
 mesaj: „Aceasta este aplicația ta Vue”,
 nume: "Nobil Okafor",
 };
 },
 metode: {
 nameLength() {
 returnează acest.nume.lungime - 1;
 },
 },
 });
 app.mount("#aplicație");
scenariu>
corp>
html>

În acest exemplu, aplicația Vue are un date obiect care conține două proprietăți: mesaj și Nume.

În interiorul aplicației Vue, cele trei elemente HTML afișează date folosind instanța Vue. The h1 elementul afișează valoarea lui mesaj proprietate, în timp ce h3 elementul afișează valoarea lui Nume proprietate cu a laMajuscule() metoda aplicata acestuia.

The p elementul afișează rezultatul returnat de nameLength() metoda definită în metode obiect al aplicației Vue. The nameLength() metoda returnează lungimea Nume proprietate scazuta cu unu.

Pentru a accesa o valoare din obiectul de date din obiectul metode, trebuie să utilizați acest cuvânt cheie. acest cuvântul cheie se referă la instanța Vue actuală și vă permite să accesați proprietățile și metodele acesteia din cadrul instanței Vue. Prin utilizarea acest, puteți prelua valoarea lui Nume proprietate și efectuați orice manipulări necesare asupra acesteia folosind metode.

Această aplicație Vue demonstrează cum să legați date la elemente HTML utilizând interpolarea textului și cum să definiți și să apelați metode într-o instanță Vue.

Construiește-ți front-end-ul folosind Vue

În acest articol, ați învățat cum să începeți să lucrați cu Vue și să interpolați textul cu sintaxa șablonului Vue. Puteți accesa mai multe alte funcții în Vue, cum ar fi directive și cârlige pentru ciclul de viață, ceea ce îl face o alegere excelentă pentru construirea de aplicații front-end dinamice.