Vue.js je stekao reputaciju naprednog JavaScript okvira. Možete koristiti Vue.js za izradu jednostraničkih aplikacija (SPA) ili razvoj specifičnih korisničkih sučelja.

Ovdje ćete naučiti osnove Vue.js, uključujući kako stvoriti Vue komponentu i raditi s objektom opcija za renderiranje dinamičkih podataka.

Vue.js je jedan od najpopularniji JavaScript okviri. Za početak s Vueom, a da biste ga dodali na svoju HTML stranicu, kopirajte oznaku skripte ispod i zalijepite je u odjeljak head:

<skriptasrc="">skripta>

Korištenje CDN veze izvrsna je opcija za poboljšanje statičkog HTML-a ili dodavanje funkcionalnosti vašoj aplikaciji.

Međutim, morate instalirati Vue.js putem npm-a da biste koristili više njegovih naprednih značajki, kao što je sintaksa komponente jedne datoteke (SFC), koje su korisne pri izradi potpunih Vue aplikacija.

Izrada Vue aplikacije

Pristup biblioteci Vue putem CDN veze pruža Vue objekt, uključujući .createApp() metoda.

Kao što naziv implicira, pomoću ove metode možete izraditi Vue aplikaciju.

Na primjer:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<skripta>
 const app = Vue.createApp();
skripta>
tijelo>
html>

Ovdje je stvorena aplikacija pohranjena u aplikacija varijabla. Nakon što izradite instancu aplikacije, morate je renderirati pomoću .mount() metoda. Ova metoda govori gdje montirati aplikaciju u Objektni model dokumenta (DOM).

ovako:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">div>
<skripta>
 const app = Vue.createApp();
 app.mount("#app");
skripta>
tijelo>
html>

Za korištenje Vue-a .mount() morate dati DOM element ili selektor kao argument. U ovom smo primjeru montirali aplikaciju Vue koristeći DOM element s #aplikacija ISKAZNICA.

Važno je napomenuti da aplikacija Vue kontrolira samo elemente koji su navedeni pomoću iskaznica. Također, aplikacija nema kontrolu nad ničim izvan tih elemenata, uključujući klikove ili bilo koju drugu interaktivnost.

Posljednji korak stvaranja Vue aplikacije je pozivanje .mount() nakon dovršetka svih konfiguracija aplikacije.

Objekt Options u Vueu

U Vue.js koristite Mogućnosti objekt kao konfiguracijski objekt za stvaranje Vue instance ili komponente.

To je bitan dio Vue aplikacije jer definira ponašanje i podatke za svaku instancu ili komponentu. The Mogućnosti Objekt se sastoji od nekoliko svojstava koja predstavljaju različite aspekte instance ili komponente.

Neka od često korištenih svojstava u Mogućnosti objekt su:

• podaci: Ovo svojstvo definira podatkovni objekt za Vue aplikacije. To je funkcija koja vraća objekt koji sadrži svojstva podataka i njihove početne vrijednosti.
• metode: The metode Svojstvo objekta Options ima vitalne funkcije u omogućavanju dinamičkog prikazivanja.
• šablona: Ovo svojstvo definira HTML predložak za Vue instancu ili komponentu. To je niz koji sadrži HTML oznake, a Vueov prevoditelj predložaka može analizirati.

Imajte na umu da će, kada koristite svojstvo predloška, ​​Vue prevodilac prikazati samo sadržaj definiran u predlošku.

Evo primjera aplikacije Vue s podaci, metode, i šablona Svojstva:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<h1 @klik="obrnuta poruka" >{{ tekst }}h1>
div>
<skripta>
konst app = Vue.createApp({
// predložak: '
Dobro došli u svoju aplikaciju Vue
',
 podaci() {
povratak {
 tekst: "Ovo je vaša aplikacija Vue"
 };
 },
 metode: {
 reverseMessage () {
ovaj.tekst = ovaj.text.split('').obrnuti().pridružiti('')
 }
 }
 });
aplikacija.montirati("#aplikacija");
skripta>
tijelo>
html>

Ovaj program prikazuje osnovnu aplikaciju Vue koja prikazuje tekst "Ovo je vaša aplikacija Vue" pomoću interpolacije teksta i omogućuje korisnicima da kliknu na nju kako bi preokrenuli poruku.

The podaci() funkcija vraća objekt s jednim svojstvom pozvanim tekst. The @klik direktiva se koristi za prilaganje a obrnuta poruka() metoda za element, koji preokreće tekst vlasništvo.

Nakon pokretanja ovog programa, stvorena aplikacija Vue izgledat će ovako:

Klikom na tekst obrnut ćete ga.

Imajte na umu da je program komentirao svojstvo predloška kako bi omogućio renderiranje sadržaja u aplikaciji Vue. Ako ostane bez komentara, ova aplikacija Vue prikazat će samo svojstvo predloška:

Postoje i druga svojstva poput rekviziti i izračunati, koji također možete koristiti za stvaranje snažnih i fleksibilnih Vue aplikacija prilikom konfiguriranja objekta opcija.

Interpolacija teksta u Vueu

Interpolacija teksta u Vue je značajka koja vam omogućuje dinamičko povezivanje podataka s HTML elementima. Drugim riječima, omogućit će vam da izravno ispišete vrijednost svojstava podataka instance Vue u HTML.

Da biste postigli interpolaciju teksta u Vueu, trebate zamotati naziv svojstva podataka u dvostruke vitičaste zagrade. Vue tumači sadržaje unutar dvostrukih vitičastih zagrada kao JavaScript izraze i dalje ih zamjenjuje njihovom rezultirajućom vrijednošću.

Na primjer:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<h1>{{ poruka }}h1>
<str>Dobro došla {{ name }}str>
div>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 poruka: "Ovo je vaša aplikacija Vue.",
 ime: "Plemenito",
 };
 },
 });
 app.mount("#app");
skripta>
tijelo>
html>

U ovom primjeru, interpolacija teksta povezuje poruka i Ime svojstva podatkovnog objekta vraćena u Vue instanci na i elementi. Nakon što se aplikacija Vue montira, prikazuje vrijednosti poruka i Ime svojstva u HTML-u na njihovim odgovarajućim pozicijama.

Također možete prikazati rezultat poziva metode ili izvesti osnovne JavaScript operacije unutar dvostrukih vitičastih zagrada:

html>
<htmljezik="en">
<glava>
<titula>Aplikacija Vuetitula>
<skriptasrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripta>
glava>
<tijelo>
<diviskaznica="aplikacija">
<h1>{{ poruka }}h1>
<h3>Dobro došli {{ name.toUpperCase() }}h3>
<str>Vaše ime sadrži {{ nameLength() }} slova.str>
div>
<str>Ne ovdjestr>
<skripta>
 const app = Vue.createApp({
 podaci() {
 povratak {
 poruka: "Ovo je vaša aplikacija Vue",
 ime: "Plemeniti Okafor",
 };
 },
 metode: {
 nameLength() {
 vrati this.name.length - 1;
 },
 },
 });
 app.mount("#app");
skripta>
tijelo>
html>

U ovom primjeru aplikacija Vue ima podaci objekt koji sadrži dva svojstva: poruka i Ime.

Unutar aplikacije Vue, tri HTML elementa prikazuju podatke pomoću instance Vue. The h1 element prikazuje vrijednost poruka imovine, dok je h3 element prikazuje vrijednost Ime vlasništvo s a doUpperCase() metoda primijenjena na njega.

The str element prikazuje vraćeni rezultat nameLength() metoda definirana u metode objekt aplikacije Vue. The nameLength() metoda vraća duljinu Ime svojstvo oduzeto za jedan.

Da biste pristupili vrijednosti iz podatkovnog objekta u objektu metode, morate koristiti ovaj ključna riječ. ovaj ključna riječ odnosi se na trenutnu instancu Vue i omogućuje vam pristup njezinim svojstvima i metodama unutar instance Vue. Pomoću ovaj, možete dohvatiti vrijednost Ime imovine i izvršite sve potrebne manipulacije na njoj pomoću metode.

Ova Vue aplikacija pokazuje kako vezati podatke za HTML elemente pomoću interpolacije teksta i kako definirati i pozvati metode u Vue instanci.

Izgradite svoj front-end koristeći Vue

U ovom ste članku naučili kako početi raditi s Vueom i interpolirati tekst s Vueovom sintaksom za izradu predložaka. U Vueu možete pristupiti nekoliko drugih značajki, kao što su direktive i zakačke životnog ciklusa, što ga čini izvrsnim izborom za izradu dinamičkih front-end aplikacija.