Vue.js Komponenti

Vue.js ir progresīvs javascript ietvars, ko izmanto, lai izveidotu lietotāja saskarnes (lietotāja saskarnes) un SPA (vienas lapas lietojumprogrammas). Mēs varam sākt veidot tīmekļa lietojumprogrammas Vue.js ar HTML, CSS un Javascript pamatzināšanām. Vue.js ir veidots, apvienojot labākās iezīmes no jau esošajiem leņķa un reakcijas ietvariem. Izstrādātājiem patīk kodēt un sajust brīvību un komfortu, veidojot lietojumprogrammas Vue.js.

Šo uz komponentiem balstīto pieeju pamatā iedvesmoja un izvēlējās ReactJS. Mēs rakstām kodu komponentu veidā, lai mēs varētu importēt šo komponentu un atkārtoti izmantot to visur, kur mums tas nepieciešams. Vue.js piedāvā viena faila komponentu, kas padara to par brīvi savienotu un atkārtoti izmantojamu kodu.

Vue.js piedāvā vislabāko pieeju, kas balstīta uz komponentiem, tāpat kā visu, kas nepieciešams izstrādātājam; viņš to var atrast vienā .vue fails. Izstrādātāji jūtas tik ērti un ērti, kad viņiem nav jāuztraucas vai jārūpējas par komponenta papildu struktūru.

Šajā rakstā mēs apskatīsim viena faila komponentu, kuram ir .vue pagarinājums. Apskatīsim ļoti vienkāršu Vue komponenta piemēru un to sapratīsim.

Šis ir ļoti vienkāršs un vienkāršs Vue komponenta piemērs. Kurā mēs varam redzēt, ka kods ir sadalīts trīs slāņos. Šī trīslāņu sintakse ir labākā Vue daļa.js. Tas apmierina bažas, tomēr atrodoties vienā vienībā .vue fails. Komponenta iekšpusē ir mūsu veidne (HTML), loģika Javascript un stils.

• Veidne
• Skripts
• Stils

Veidne

Šajā veidnes tagā mēs ierakstām mūsu HTML kodu. Mēs varam piesaistīt mainīgos arī šajā, izmantojot Vue.js ar datiem saistoša sintakse, un mēs tajā varam pievienot arī dažas citas funkcijas, izmantojot Vue.js nodrošināja attiecīgo funkciju sintaksi.

Skripts

Šī ir sadaļa, kurā mēs varam rakstīt komponenta loģiku javascript, sekojot Vue sintaksēm.js. Šeit tiek ietvertas visas komponenta funkcionalitātes un loģika. Piemēram,

• Nepieciešamu citu komponentu un paku importēšana.
• Mainīga deklarācija
• Metodes / funkcijas
• Dzīves cikla āķi
• Aprēķinātās īpašības un vērotāji
• Un tā tālāk…

Stils

Šeit komponenta stilu mēs ierakstām CSS, vai arī mēs varam izmantot jebkuru priekšapstrādes procesu, kuru vēlamies izmantot.

Tas ir tikai ieskats Vue komponentā.js. Nedaudz apskatīsim lietojumu, organizāciju un datu plūsmu starp komponentiem.

Komponentu importēšana un lietošana

Lai izmantotu komponentu, mums vispirms ir jāimportē komponents. Pretējā gadījumā kā Vue var.js par to zina? Mēs varam vienkārši importēt komponentu, pievienojot priekšrakstu “Importēt” skripta taga sākumā un deklarējot šo komponentu objektā “components”, izmantojot šādu sintaksi.

Pēc komponenta veiksmīgas importēšanas mēs to varam izmantot šādā veidnē