Vue.js ir ieguvis savu reputāciju kā progresīvs JavaScript ietvars. Varat izmantot Vue.js, lai izveidotu vienas lapas lietojumprogrammas (SPA) vai izstrādātu īpašas lietotāja saskarnes.

Šeit jūs uzzināsit par Vue.js pamatiem, tostarp to, kā izveidot Vue komponentu un strādāt ar opciju objektu, lai renderētu dinamiskus datus.

Vue.js ir viens no populārākie JavaScript ietvari. Lai sāktu darbu ar Vue, un lai to pievienotu savai HTML lapai, kopējiet tālāk esošo skripta tagu un ielīmējiet to galvas sadaļā:

<skriptssrc="">skripts>

CDN saites izmantošana ir lieliska iespēja uzlabot statisko HTML vai pievienot lietojumprogrammai funkcionalitāti.

Tomēr jums ir jāinstalē Vue.js, izmantojot npm, lai izmantotu vairāk tā papildu funkciju, piemēram, viena faila komponenta (SFC) sintaksi, kas ir noderīga, veidojot pilnvērtīgas Vue lietotnes.

Vue lietojumprogrammas izveide

Piekļūstot Vue bibliotēkai, izmantojot CDN saiti, tiek nodrošināts Vue objekts, tostarp .createApp() metodi.

Kā norāda nosaukums, varat izveidot Vue lietotni, izmantojot šo metodi.

Piemēram:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<skripts>
 const app = Vue.createApp();
skripts>
ķermeni>
html>

Šeit izveidotā lietotne tiek saglabāta mapē lietotne mainīgs. Pēc lietotnes instances izveides tā ir jāatveido, izmantojot .mount() metodi. Šī metode norāda, kur instalēt lietotni Dokumenta objekta modelis (DOM).

Tā kā:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">div>
<skripts>
 const app = Vue.createApp();
 app.mount("#app");
skripts>
ķermeni>
html>

Lai izmantotu Vue's .mount() metodi, jums ir jānorāda DOM elements vai atlasītājs kā arguments. Šajā piemērā mēs uzstādījām lietotni Vue, izmantojot DOM elementu ar #lietotne ID.

Ir svarīgi atzīmēt, ka lietotne Vue kontrolē tikai elementus, kas tika norādīti, izmantojot id. Turklāt lietotne nekontrolē neko ārpus šiem elementiem, tostarp klikšķu notikumus vai jebkuru citu interaktivitāti.

Pēdējais Vue lietojumprogrammas izveides solis ir izsaukt .mount() metodi pēc visu lietotņu konfigurāciju pabeigšanas.

Opciju objekts Vue

Vietnē Vue.js jūs izmantojat Iespējas objektu kā konfigurācijas objektu, lai izveidotu Vue gadījumu vai komponentu.

Tā ir būtiska Vue lietojumprogrammas daļa, jo tā nosaka katra gadījuma vai komponenta darbību un datus. The Iespējas Objekts sastāv no vairākām īpašībām, kas atspoguļo dažādus gadījuma vai komponenta aspektus.

Dažas no visbiežāk izmantotajām īpašībām Iespējas objekti ir:

• datus: šis rekvizīts definē Vue lietojumprogrammu datu objektu. Tā ir funkcija, kas atgriež objektu, kurā ir datu rekvizīti un to sākotnējās vērtības.
• metodes: metodes Opciju objekta rekvizīts veic būtiskas funkcijas dinamiskās renderēšanas iespējošanā.
• veidne: šis rekvizīts definē Vue instances vai komponenta HTML veidni. Tā ir virkne, kas satur HTML marķējumu, kuru Vue veidņu kompilators var parsēt.

Ņemiet vērā, ka, izmantojot veidnes rekvizītu, Vue kompilators atveidos tikai veidnē definēto saturu.

Šeit ir Vue lietotnes piemērs ar datus, metodes, un veidne īpašības:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<h1 @klikšķis="reverseMessage" >{{ teksts }}h1>
div>
<skripts>
konst app = Vue.createApp({
// veidne: '
Laipni lūdzam lietotnē Vue
',
 dati() {
atgriezties {
 teksts: "Šī ir jūsu Vue lietotne"
 };
 },
 metodes: {
 reverseMessage () {
šis.text = šis.text.split('').reverse().join('')
 }
 }
 });
lietotne.mount("#lietotne");
skripts>
ķermeni>
html>

Šī programma attēlo pamata Vue lietotni, kas parāda tekstu "Šī ir jūsu Vue lietotne", izmantojot teksta interpolāciju, un ļauj lietotājiem noklikšķināt uz tās, lai mainītu ziņojumu.

The dati () funkcija atgriež objektu ar vienu izsauktu īpašību tekstu. The @klikšķis direktīvu izmanto, lai pievienotu a reverseMessage() metode uz elements, kas apgriež tekstu īpašums.

Palaižot šo programmu, izveidotā Vue lietotne izskatīsies šādi:

Noklikšķinot uz teksta, tas tiks mainīts.

Ņemiet vērā, ka programma komentēja veidnes rekvizītu, lai ļautu atveidot Vue lietotnes saturu. Ja to atstāj bez komentāriem, šī Vue lietotne parādīs tikai veidnes rekvizītu:

Ir arī citi īpašumi, piemēram rekvizīti un aprēķināts, ko varat arī izmantot, lai izveidotu jaudīgas un elastīgas Vue lietojumprogrammas, konfigurējot opciju objektu.

Teksta interpolācija Vue

Teksta interpolācija programmā Vue ir funkcija, kas ļauj dinamiski saistīt datus ar HTML elementiem. Citiem vārdiem sakot, tas ļaus jums tieši izvadīt Vue instances datu rekvizītu vērtību HTML.

Lai pakalpojumā Vue panāktu teksta interpolāciju, datu rekvizīta nosaukums ir jāietver dubultās krokainās figūriekavās. Vue interpretē saturu dubultajās cirtainajās iekavās kā JavaScript izteiksmes un tālāk tos aizstāj ar to iegūto vērtību.

Piemēram:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<h1>{{ ziņa }}h1>
<lpp>Laipni lūdzam {{ name }}lpp>
div>
<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 ziņojums: "Šī ir jūsu Vue lietotne."
 nosaukums: "Noble",
 };
 },
 });
 app.mount("#app");
skripts>
ķermeni>
html>

Šajā piemērā teksta interpolācija saista ziņa un nosaukums Vu instancē atgrieztā datu objekta rekvizīti un elementi. Kad Vue lietojumprogramma ir uzstādīta, tā parāda vērtības ziņa un nosaukums rekvizītus HTML attiecīgajās pozīcijās.

Varat arī parādīt metodes izsaukuma rezultātu vai veikt pamata JavaScript darbības dubultajās iekavās:

html>
<htmllang="lv">
<galvu>
<virsraksts>Vue lietotnevirsraksts>
<skriptssrc=" https://unpkg.com/vue@3/dist/vue.global.js">skripts>
galvu>
<ķermeni>
<divid="lietotne">
<h1>{{ ziņa }}h1>
<h3>Laipni lūdzam {{ name.toUpperCase() }}h3>
<lpp>Jūsu vārdā ir {{ nameLength() }} burti.lpp>
div>
<lpp>ne šeitlpp>
<skripts>
 const app = Vue.createApp({
 dati() {
 return {
 ziņojums: "Šī ir jūsu Vue lietotne",
 nosaukums: "Noble Okafor",
 };
 },
 metodes: {
 nameLength() {
 atgriezt šo.nosaukums.garums - 1;
 },
 },
 });
 app.mount("#app");
skripts>
ķermeni>
html>

Šajā piemērā Vue lietotnei ir datus objekts, kas satur divas īpašības: ziņa un nosaukums.

Vue lietotnē trīs HTML elementi parāda datus, izmantojot Vue gadījumu. The h1 elements parāda vērtību ziņa īpašums, savukārt h3 elements parāda vērtību nosaukums īpašums ar a lielie burti() tai piemērotā metode.

The lpp elements parāda atgriezto rezultātu vārda garums() punktā definētā metode metodes Vue lietotnes objekts. The vārda garums() metode atgriež garumu nosaukums Īpašums atņemts ar vienu.

Lai piekļūtu vērtībai no datu objekta metožu objektā, ir jāizmanto šis atslēgvārds. šis atslēgvārds attiecas uz pašreizējo Vue gadījumu un ļauj piekļūt tā rekvizītiem un metodēm no Vue instances. Izmantojot šis, varat izgūt vērtību nosaukums īpašumu un veikt ar to nepieciešamās manipulācijas, izmantojot metodes.

Šī Vue lietotne parāda, kā saistīt datus ar HTML elementiem, izmantojot teksta interpolāciju, un kā definēt un izsaukt metodes Vue instancē.

Izveidojiet savu priekšējo daļu, izmantojot Vue

Šajā rakstā jūs uzzinājāt, kā sākt darbu ar Vue un interpolēt tekstu ar Vue veidņu sintaksi. Varat piekļūt vairākām citām Vue funkcijām, piemēram, direktīvām un dzīves cikla āķiem, padarot to par lielisku izvēli dinamisku priekšgala lietojumprogrammu izveidei.