Vue.js užsitarnavo savo reputaciją kaip progresyvi JavaScript sistema. Galite naudoti Vue.js kurdami vieno puslapio programas (SPA) arba kurti konkrečias vartotojo sąsajas.

Čia išmoksite Vue.js pagrindus, įskaitant tai, kaip sukurti Vue komponentą ir dirbti su parinkčių objektu, kad būtų pateikti dinaminiai duomenys.

Vue.js yra vienas iš populiariausios JavaScript sistemos. Norėdami pradėti su Vue, ir norėdami pridėti jį prie HTML puslapio, nukopijuokite toliau esančią scenarijaus žymą ir įklijuokite ją į antraštės skyrių:

<scenarijussrc="">scenarijus>

CDN nuorodos naudojimas yra puiki galimybė tobulinti statinį HTML arba pridėti funkcionalumą prie programos.

Tačiau turite įdiegti Vue.js per npm, kad galėtumėte naudoti daugiau pažangių funkcijų, tokių kaip vieno failo komponento (SFC) sintaksė, kuri yra naudinga kuriant visavertes Vue programas.

„Vue“ programos kūrimas

Prieiga prie Vue bibliotekos per CDN nuorodą suteikia Vue objektą, įskaitant .createApp() metodas.

Kaip rodo pavadinimas, naudodami šį metodą galite sukurti „Vue“ programą.

Pavyzdžiui:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<scenarijus>
 const programa = Vue.createApp();
scenarijus>
kūnas>
html>

Čia sukurta programa saugoma programėlė kintamasis. Sukūrę programos egzempliorių, turite jį pateikti naudodami .mount() metodas. Šis metodas nurodo, kur įdiegti programą Dokumento objekto modelis (DOM).

Kaip taip:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">div>
<scenarijus>
 const programa = Vue.createApp();
 app.mount("#programa");
scenarijus>
kūnas>
html>

Norėdami naudoti Vue's .mount() metodą, kaip argumentą turite pateikti DOM elementą arba parinkiklį. Šiame pavyzdyje įdiegėme „Vue“ programą naudodami DOM elementą su #programa ID.

Svarbu pažymėti, kad „Vue“ programa valdo tik elementus, kurie buvo nurodyti naudojant id. Be to, programa nekontroliuoja nieko, išskyrus tuos elementus, įskaitant paspaudimų įvykius ar bet kokią kitą interaktyvumą.

Paskutinis „Vue“ programos kūrimo veiksmas yra skambinti .mount() metodas, kai atliksite visas programos konfigūracijas.

Parinkčių objektas Vue

Vue.js naudojate Galimybės objektas kaip konfigūracijos objektas, skirtas sukurti Vue egzempliorių arba komponentą.

Tai yra esminė „Vue“ programos dalis, nes ji apibrėžia kiekvieno egzemplioriaus ar komponento elgseną ir duomenis. The Galimybės Objektas susideda iš kelių savybių, atspindinčių įvairius egzemplioriaus ar komponento aspektus.

Kai kurios dažniausiai naudojamos savybės Galimybės objektai yra:

• duomenis: ši ypatybė apibrėžia „Vue“ programų duomenų objektą. Tai funkcija, kuri grąžina objektą, kuriame yra duomenų ypatybės ir jų pradinės reikšmės.
• metodus: metodus Objekto Parinktys savybė atlieka gyvybiškai svarbias funkcijas įgalinant dinaminį atvaizdavimą.
• šabloną: Ši ypatybė apibrėžia „Vue“ egzemplioriaus arba komponento HTML šabloną. Tai eilutė, kurioje yra HTML žymėjimas, kurį „Vue“ šablono kompiliatorius gali išanalizuoti.

Atminkite, kad naudojant šablono ypatybę, Vue kompiliatorius pateiks tik šablone apibrėžtą turinį.

Štai „Vue“ programos pavyzdys su duomenis, metodai, ir šabloną savybės:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<h1 @spustelėkite="atvirkštinis pranešimas" >{{ tekstas }}h1>
div>
<scenarijus>
konst app = Vue.createApp({
// šablonas: '
Sveiki atvykę į „Vue“ programą
',
 duomenys () {
grąžinti {
 tekstas: "Tai jūsų Vue programa"
 };
 },
 metodai: {
 atvirkštinis pranešimas () {
tai.tekstas = tai.text.split('').reverse().join('')
 }
 }
 });
programėlė.mount("#programa");
scenarijus>
kūnas>
html>

Ši programa vaizduoja pagrindinę „Vue“ programą, kuri rodo tekstą „Tai jūsų Vue programa“, naudodama teksto interpoliaciją ir leidžia vartotojams spustelėti ją, kad pakeistų pranešimą.

The duomenys () funkcija grąžina objektą su viena savybe, vadinama tekstą. The @spustelėkite direktyva naudojama pridėti a atvirkštinis pranešimas () metodas prie elementas, kuris apverčia tekstą nuosavybė.

Vykdant šią programą sukurta „Vue“ programa atrodys taip:

Spustelėjus tekstą jis bus pakeistas.

Atminkite, kad programa pakomentavo šablono ypatybę, kad būtų galima pateikti „Vue“ programos turinį. Jei paliksite be komentarų, ši „Vue“ programa rodys tik šablono ypatybę:

Yra ir kitų savybių, pvz rekvizitai ir apskaičiuotas, kurį taip pat galite naudoti kurdami galingas ir lanksčias „Vue“ programas konfigūruodami parinkčių objektą.

Teksto interpoliacija Vue

Teksto interpoliacija Vue yra funkcija, leidžianti dinamiškai susieti duomenis su HTML elementais. Kitaip tariant, tai leis tiesiogiai išvesti Vue egzemplioriaus duomenų ypatybių vertę HTML.

Norėdami atlikti teksto interpoliaciją Vue, duomenų ypatybės pavadinimą turite įvesti į dvigubus skliaustus. „Vue“ interpretuoja turinį, esantį dvigubuose skliaustuose kaip „JavaScript“ išraiškas ir toliau jas pakeičia gauta verte.

Pavyzdžiui:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<h1>{{ pranešimas }}h1>
<p>Sveiki atvykę {{ vardas }}p>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 pranešimas: "Tai jūsų Vue programa.",
 vardas: "Noble",
 };
 },
 });
 app.mount("#programa");
scenarijus>
kūnas>
html>

Šiame pavyzdyje teksto interpoliacija susieja žinutę ir vardas Vu egzemplioriuje grąžintos duomenų objekto savybės ir elementai. Kai „Vue“ programa bus prijungta, joje rodomos reikšmės žinutę ir vardas HTML ypatybes atitinkamose jų vietose.

Taip pat galite rodyti metodo iškvietimo rezultatą arba atlikti pagrindines JavaScript operacijas dvigubuose skliausteliuose:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<h1>{{ pranešimas }}h1>
<h3>Sveiki atvykę {{ name.toUpperCase() }}h3>
<p>Jūsų varde yra {{ nameLength() }} raidžių.p>
div>
<p>ne čiap>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 pranešimas: "Tai jūsų Vue programa",
 pavadinimas: "Noble Okafor",
 };
 },
 metodai: {
 nameLength() {
 grąžinti šį.vardas.ilgis - 1;
 },
 },
 });
 app.mount("#programa");
scenarijus>
kūnas>
html>

Šiame pavyzdyje „Vue“ programėlėje yra duomenis objektas, turintis dvi savybes: žinutę ir vardas.

„Vue“ programoje trys HTML elementai rodo duomenis naudodami „Vue“ egzempliorių. The h1 elementas rodo reikšmę žinutę turtas, o h3 elementas rodo reikšmę vardas turtas su a didžiosiomis raidėmis () jam taikomas metodas.

The p elementas rodo grąžintą rezultatą vardo ilgis() apibrėžtą metodą metodus „Vue“ programos objektas. The vardo ilgis() metodas grąžina ilgį vardas turtas atimtas iš vieneto.

Norėdami pasiekti vertę iš duomenų objekto metodų objekte, turite naudoti tai raktažodį. tai raktinis žodis nurodo dabartinį „Vue“ egzempliorių ir leidžia pasiekti jo savybes ir metodus iš „Vue“ egzemplioriaus. Naudojant tai, galite gauti vertę vardas turtą ir atlikti su ja reikalingas manipuliacijas metodus.

Ši „Vue“ programa parodo, kaip susieti duomenis su HTML elementais naudojant teksto interpoliaciją ir kaip apibrėžti bei iškviesti metodus „Vue“ egzemplioriuje.

Sukurkite savo priekinę dalį naudodami „Vue“.

Šiame straipsnyje sužinojote, kaip pradėti dirbti su „Vue“ ir interpoliuoti tekstą naudojant „Vue“ šablonų sintaksę. Galite pasiekti keletą kitų „Vue“ funkcijų, pvz., direktyvų ir gyvavimo ciklo kabliukų, todėl tai puikus pasirinkimas kuriant dinamines priekines programas.