Vue.js on pälvinud oma maine progressiivse JavaScripti raamistikuna. Vue.js-i saate kasutada üheleheliste rakenduste (SPA-de) loomiseks või konkreetsete kasutajaliideste arendamiseks.

Siit saate teada Vue.js-i põhitõdesid, sealhulgas seda, kuidas luua Vue komponenti ja töötada suvandite objektiga dünaamiliste andmete renderdamiseks.

Vue.js on üks populaarseimad JavaScripti raamistikud. Vue kasutamise alustamiseksja selle oma HTML-lehele lisamiseks kopeerige allolev skriptimärgend ja kleepige see peajaotisse:

<stsenaariumsrc="">stsenaarium>

CDN-i lingi kasutamine on suurepärane võimalus staatilise HTML-i täiustamiseks või rakendusele funktsionaalsuse lisamiseks.

Siiski peate installima Vue.js'i npm-i kaudu, et kasutada rohkem selle täiustatud funktsioone, näiteks ühe failikomponendi (SFC) süntaksit, mis on kasulikud täisväärtuslike Vue rakenduste loomisel.

Vue rakenduse loomine

Juurdepääs Vue teegile CDN-i lingi kaudu pakub Vue objekti, sealhulgas .createApp() meetod.

Nagu nimigi ütleb, saate seda meetodit kasutades luua Vue rakenduse.

Näiteks:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<stsenaarium>
 const app = Vue.createApp();
stsenaarium>
keha>
html>

Siin salvestatakse loodud rakendus rakendus muutuv. Pärast rakenduse eksemplari loomist peate selle renderdama kasutades .mount() meetod. See meetod ütleb, kuhu rakendus installida Dokumendiobjekti mudel (DOM).

Nagu nii:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">div>
<stsenaarium>
 const app = Vue.createApp();
 app.mount("#app");
stsenaarium>
keha>
html>

Vue kasutamiseks .mount() meetodil, peate esitama argumendina DOM-i elemendi või valija. Selles näites paigaldasime rakenduse Vue, kasutades DOM-elementi koos #rakendus ID.

Oluline on märkida, et rakendus Vue juhib ainult elemente, mis on määratud kasutades id. Samuti ei saa rakendus kontrollida midagi väljaspool neid elemente, sealhulgas klõpsamissündmusi ega muud interaktiivsust.

Vue rakenduse loomise viimane samm on helistada .mount() meetodil pärast kõigi rakenduse konfiguratsioonide lõpetamist.

Vue suvandite objekt

Vue.js-is kasutate Valikud objekti konfiguratsiooniobjektina Vue eksemplari või komponendi loomiseks.

See on Vue rakenduse oluline osa, kuna see määrab iga eksemplari või komponendi käitumise ja andmed. The Valikud objekt koosneb mitmest omadusest, mis esindavad eksemplari või komponendi erinevaid aspekte.

Mõned tavaliselt kasutatavad omadused Valikud objektid on:

• andmeid: see atribuut määrab Vue rakenduste andmeobjekti. See on funktsioon, mis tagastab objekti, mis sisaldab andmete atribuute ja nende algväärtusi.
• meetodid: meetodid Objekti Options atribuut omab olulisi funktsioone dünaamilise renderduse võimaldamisel.
• malli: see atribuut määrab Vue eksemplari või komponendi HTML-i malli. See on string, mis sisaldab HTML-i märgistust, mida Vue mallikompilaator saab sõeluda.

Pange tähele, et malli atribuudi kasutamisel renderdab Vue kompilaator ainult mallis määratletud sisu.

Siin on näide Vue rakendusest, millel on andmeid, meetodid, ja malli omadused:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<h1 @klõpsa="vastupidine sõnum" >{{ tekst }}h1>
div>
<stsenaarium>
konst app = Vue.createApp({
// mall: '
Tere tulemast oma Vue rakendusse
',
 andmed() {
tagasi {
 tekst: "See on teie Vue rakendus"
 };
 },
 meetodid: {
 vastupidine sõnum () {
see.text = see.text.split('').reverse().join('')
 }
 }
 });
rakendus.mount("#rakendus");
stsenaarium>
keha>
html>

See programm kujutab põhilist Vue rakendust, mis kuvab teksti "See on teie Vue rakendus", kasutades teksti interpolatsiooni ja võimaldab kasutajatel sõnumi ümberpööramiseks sellel klõpsata.

The andmed () funktsioon tagastab objekti, millel on üks omadus, mida nimetatakse tekst. The @klõps käskkirja kasutatakse a lisamiseks vastupidine sõnum () meetodit element, mis muudab tekst vara.

Selle programmi käivitamisel näeb loodud Vue rakendus välja järgmine:

Tekstil klõpsamine muudab selle vastupidiseks.

Pange tähele, et programm kommenteeris malli atribuuti, et võimaldada Vue rakenduse sisu renderdamist. Kommentaarita jätmisel näitab see Vue rakendus ainult malli atribuuti:

On ka muid omadusi nagu rekvisiidid ja arvutatud, mida saate kasutada ka võimsate ja paindlike Vue rakenduste loomiseks suvandite objekti konfigureerimisel.

Teksti interpoleerimine Vue-s

Teksti interpoleerimine Vue-s on funktsioon, mis võimaldab teil andmeid HTML-i elementidega dünaamiliselt siduda. Teisisõnu, see võimaldab teil Vue eksemplari andmeatribuutide väärtuse otse HTML-is väljastada.

Teksti interpoleerimiseks Vue's peate pakkima andmeatribuudi nime kahekordsetesse lokkis sulgudesse. Vue tõlgendab kahekordsete lokkis sulgude sisu JavaScripti avaldistena ja asendab need veelgi nende tulemuseks oleva väärtusega.

Näiteks:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<h1>{{ sõnum }}h1>
<lk>Tere tulemast {{ name }}lk>
div>
<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 teade: "See on teie Vue rakendus."
 nimi: "üllas",
 };
 },
 });
 app.mount("#app");
stsenaarium>
keha>
html>

Selles näites seob teksti interpolatsioon sõnum ja nimi Vu eksemplaris tagastatud andmeobjekti omadused ja elemendid. Kui Vue rakendus on ühendatud, kuvab see väärtused sõnum ja nimi atribuudid HTML-is nende vastavatel positsioonidel.

Samuti saate topeltsulgudes kuvada meetodi kutse tulemuse või teha põhilisi JavaScripti toiminguid:

html>
<htmllang="en">
<pea>
<pealkiri>Vue rakenduspealkiri>
<stsenaariumsrc=" https://unpkg.com/vue@3/dist/vue.global.js">stsenaarium>
pea>
<keha>
<divid="rakendus">
<h1>{{ sõnum }}h1>
<h3>Tere tulemast {{ name.toUpperCase() }}h3>
<lk>Teie nimes on {{ nameLength() }} tähte.lk>
div>
<lk>mitte siinlk>
<stsenaarium>
 const app = Vue.createApp({
 andmed() {
 return {
 teade: "See on teie Vue rakendus",
 nimi: "Noble Okafor",
 };
 },
 meetodid: {
 nameLength() {
 tagasta see.nimi.pikkus - 1;
 },
 },
 });
 app.mount("#app");
stsenaarium>
keha>
html>

Selles näites on rakendusel Vue a andmeid objekt, mis sisaldab kahte omadust: sõnum ja nimi.

Rakenduses Vue kuvavad kolm HTML-i elementi andmeid Vue eksemplari abil. The h1 element kuvab väärtuse sõnum vara, samas kui h3 element kuvab väärtuse nimi vara koos a suurtähtedega() sellele rakendatud meetod.

The lk element kuvab elemendi tagastatud tulemuse nimiPikkus() punktis määratletud meetod meetodid Vue rakenduse objekt. The nimiPikkus() meetod tagastab pikkuse nimi omadus lahutatakse ühega.

Meetodiobjekti andmeobjekti väärtusele juurde pääsemiseks peate kasutama see märksõna. see märksõna viitab praegusele Vue eksemplarile ja võimaldab teil pääseda juurde selle omadustele ja meetoditele Vue eksemplaris. Kasutades see, saate otsida väärtuse nimi vara ja tehke sellega kõik vajalikud manipulatsioonid meetodid.

See Vue rakendus demonstreerib, kuidas siduda andmeid HTML-i elementidega teksti interpolatsiooni abil ning kuidas Vue eksemplaris meetodeid määratleda ja kutsuda.

Ehitage oma esiots Vue abil

Sellest artiklist õppisite, kuidas alustada Vue'ga töötamist ja interpoleerida teksti Vue mallisüntaksiga. Saate juurdepääsu Vue mitmetele muudele funktsioonidele, nagu direktiivid ja elutsükli konksud, mistõttu on see suurepärane valik dünaamiliste esiotsa rakenduste loomiseks.