Vue.js si je pridobil sloves naprednega ogrodja JavaScript. Vue.js lahko uporabite za izdelavo enostranskih aplikacij (SPA) ali razvoj posebnih uporabniških vmesnikov.

Tukaj se boste naučili osnov Vue.js, vključno s tem, kako ustvariti komponento Vue in delati z objektom možnosti za upodabljanje dinamičnih podatkov.

Vue.js je eden od najbolj priljubljena ogrodja JavaScript. Za začetek z Vue, in ga želite dodati na svojo stran HTML, kopirajte spodnjo oznako skripta in jo prilepite v razdelek glave:

<scenarijsrc="">scenarij>

Uporaba povezave CDN je odlična možnost za izboljšanje statičnega HTML-ja ali dodajanje funkcionalnosti vaši aplikaciji.

Vendar pa morate Vue.js namestiti prek npm, če želite uporabljati več njegovih naprednih funkcij, kot je sintaksa komponente ene datoteke (SFC), ki je v pomoč pri izdelavi polnopravnih aplikacij Vue.

Ustvarjanje aplikacije Vue

Dostop do knjižnice Vue prek povezave CDN zagotavlja objekt Vue, vključno z .createApp() metoda.

Kot že ime pove, lahko s to metodo ustvarite aplikacijo Vue.

Na primer:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<scenarij>
 const app = Vue.createApp();
scenarij>
telo>
html>

Tukaj je ustvarjena aplikacija shranjena v aplikacija spremenljivka. Ko ustvarite primerek aplikacije, ga morate upodobiti z uporabo .mount() metoda. Ta metoda pove, kam namestiti aplikacijo v Objektni model dokumenta (DOM).

takole:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">div>
<scenarij>
 const app = Vue.createApp();
 app.mount("#app");
scenarij>
telo>
html>

Za uporabo Vue's .mount() morate kot argument zagotoviti element ali izbirnik DOM. V tem primeru smo aplikacijo Vue namestili z uporabo elementa DOM z #aplikacija ID.

Pomembno je omeniti, da aplikacija Vue nadzoruje samo elemente, ki so bili določeni z uporabo id. Poleg tega aplikacija nima nadzora nad ničemer zunaj teh elementov, vključno z dogodki klikanja ali katero koli drugo interaktivnostjo.

Zadnji korak ustvarjanja aplikacije Vue je klicanje .mount() po dokončanju vseh konfiguracij aplikacije.

Objekt Options v Vue

V Vue.js uporabite Opcije kot konfiguracijski objekt za ustvarjanje primerka ali komponente Vue.

Je bistveni del aplikacije Vue, saj definira vedenje in podatke za vsak primerek ali komponento. The Opcije objekt je sestavljen iz več lastnosti, ki predstavljajo različne vidike primerka ali komponente.

Nekatere pogosto uporabljene lastnosti v Opcije predmet so:

• podatke: Ta lastnost definira podatkovni objekt za aplikacije Vue. Je funkcija, ki vrne objekt, ki vsebuje lastnosti podatkov in njihove začetne vrednosti.
• metode: The metode Lastnost objekta Options ima ključne funkcije pri omogočanju dinamičnega upodabljanja.
• predlogo: Ta lastnost definira predlogo HTML za primerek ali komponento Vue. To je niz, ki vsebuje oznako HTML, ki jo lahko prevajalnik predloge Vue razčleni.

Upoštevajte, da bo prevajalnik Vue pri uporabi lastnosti predloge upodobil samo vsebino, definirano v predlogi.

Tukaj je primer aplikacije Vue z podatke, metode, in predlogo lastnosti:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<h1 @kliknite="obratno sporočilo" >{{ besedilo }}h1>
div>
<scenarij>
konst app = Vue.createApp({
// predloga: '
Dobrodošli v aplikaciji Vue
',
 podatki() {
vrnitev {
 besedilo: "To je vaša aplikacija Vue"
 };
 },
 metode: {
 reverseMessage () {
to.text = to.text.split('').reverse().join('')
 }
 }
 });
aplikacija.mount("#aplikacija");
scenarij>
telo>
html>

Ta program prikazuje osnovno aplikacijo Vue, ki prikaže besedilo »To je vaša aplikacija Vue« z uporabo interpolacije besedila in omogoča uporabnikom, da jo kliknejo, da obrnejo sporočilo.

The podatki () funkcija vrne objekt z eno samo lastnostjo besedilo. The @klik direktiva se uporablja za pritrditev a reverseMessage() metoda za element, ki obrne besedilo premoženje.

Ko zaženete ta program, bo ustvarjena aplikacija Vue videti takole:

S klikom na besedilo se besedilo obrne.

Upoštevajte, da je program komentiral lastnost predloge, da bi omogočil upodabljanje vsebine v aplikaciji Vue. Če ostane brez komentarja, bo ta aplikacija Vue prikazala samo lastnost predloge:

Obstajajo še druge podobne lastnosti rekviziti in izračunano, ki ga lahko uporabite tudi za ustvarjanje zmogljivih in prilagodljivih aplikacij Vue pri konfiguriranju predmeta možnosti.

Interpolacija besedila v Vue

Interpolacija besedila v Vue je funkcija, ki omogoča dinamično vezavo podatkov na elemente HTML. Z drugimi besedami, omogočil vam bo neposreden izhod vrednosti podatkovnih lastnosti primerka Vue v HTML.

Če želite doseči interpolacijo besedila v Vue, morate ime podatkovne lastnosti zaviti v dvojne zavite oklepaje. Vue interpretira vsebino znotraj dvojnih zavitih oklepajev kot izraze JavaScript in jih nadalje nadomesti z njihovo nastalo vrednostjo.

Na primer:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<h1>{{ sporočilo }}h1>
<str>Dobrodošli {{ name }}str>
div>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 sporočilo: "To je vaša aplikacija Vue.",
 ime: "Noble",
 };
 },
 });
 app.mount("#app");
scenarij>
telo>
html>

V tem primeru interpolacija besedila veže sporočilo in ime lastnosti podatkovnega objekta, vrnjenega v primerku Vue v in elementi. Ko se aplikacija Vue namesti, prikaže vrednosti sporočilo in ime lastnosti v HTML na njihovih ustreznih položajih.

Prav tako lahko prikažete rezultat klica metode ali izvedete osnovne operacije JavaScript v dvojnih zavitih oklepajih:

html>
<htmljezik="en">
<glavo>
<naslov>Aplikacija Vuenaslov>
<scenarijsrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarij>
glavo>
<telo>
<divid="aplikacija">
<h1>{{ sporočilo }}h1>
<h3>Dobrodošli {{ name.toUpperCase() }}h3>
<str>Vaše ime vsebuje {{ nameLength() }} črk.str>
div>
<str>ne tukajstr>
<scenarij>
 const app = Vue.createApp({
 podatki() {
 return {
 sporočilo: "To je vaša aplikacija Vue",
 ime: "Noble Okafor",
 };
 },
 metode: {
 nameLength() {
 vrni this.name.length - 1;
 },
 },
 });
 app.mount("#app");
scenarij>
telo>
html>

V tem primeru ima aplikacija Vue a podatke predmet, ki vsebuje dve lastnosti: sporočilo in ime.

Znotraj aplikacije Vue trije elementi HTML prikazujejo podatke z uporabo primerka Vue. The h1 element prikazuje vrednost sporočilo premoženja, medtem ko je h3 element prikazuje vrednost ime lastnina z a toUpperCase() uporabljena metoda.

The str element prikaže vrnjeni rezultat nameLength() metoda, opredeljena v metode predmet aplikacije Vue. The nameLength() metoda vrne dolžino ime premoženje odšteto za ena.

Če želite dostopati do vrednosti iz podatkovnega objekta v objektu metode, morate uporabiti to ključna beseda. to ključna beseda se nanaša na trenutni primerek Vue in vam omogoča dostop do njegovih lastnosti in metod znotraj primerka Vue. Z uporabo to, lahko pridobite vrednost ime lastnine in izvajati vse potrebne manipulacije z uporabo metode.

Ta aplikacija Vue prikazuje, kako povezati podatke z elementi HTML z uporabo interpolacije besedila ter kako definirati in poklicati metode v primeru Vue.

Zgradite svoj sprednji del z uporabo Vue

V tem članku ste se naučili, kako začeti delati z Vue in interpolirati besedilo s sintakso Vue za predloge. V Vue lahko dostopate do številnih drugih funkcij, kot so direktive in kavlji življenjskega cikla, zaradi česar je odlična izbira za gradnjo dinamičnih aplikacij na sprednjem delu.