Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

⚡ Vue 3 põhitõdede õppimine: tühjast kaustast komponentideni
Veebiarendus
8 min1,558 sõna

⚡ Vue 3 põhitõdede õppimine: tühjast kaustast komponentideni

Vaadata Vue 3 ja näed üht libedat frontend-raamistikku suurest kolmikust. React, Angular, Vue: kõlab tõsiselt. Siis avad esimese õpetuse ja seal ootavad sind vite, create-vue ja .vue failid koos transpilaatoritega... Kuigi tegelikult saad Vue lisada üheainsa <script> reaga ja kohe koodi kirjutama hakata. Ei mingeid bundlereid, JSX-i ega seadistamispõrgut.

Lõhe „tahan proovida" ja „kirjutasin komponendi" vahel on siin lühem kui kusagil mujal. Aga enamik õpetusi seda lõhet ei ületa, vaid korrutavad dokumentatsiooni fragmentidena, andmata tervikpilti. Näed laialipillutud süntaksijuppe ega suuda taibata, kuidas neist rakendus saab.

See juhend on täpselt see tee, mille me ise Vuega läbi käisime: tühjast kaustast kuni propsidega komponentideni. Kirjutad ja käivitad iga rea ise. Ei mingit maagiat, ainult töötav kood ja arusaam reaktiivsusest, Vue peamisest supervõimest.

💡 Kiire ülevaade:

  • Ehita Vue rakendus CDN-ilt ja kinnita see DOM-i: sinu esimene töötav instants 5 minutiga
  • Käi läbi neli peamist direktiivi, v-for, v-if, v-on ja v-bind: iga Vue malli alustalad
  • Võta lahti computed ja methods: millal puhverdada ja millal välja kutsuda
  • Eralda loogika komponentideks ja edasta andmeid propside kaudu: samm tõelise arhitektuuri suunas

Vue rakenduse loomine

Alustame absoluutsest nullist. Ei mingit create-vue, vite ega vue-cli, lihtsalt kaust kahe failiga.

Loo terminalis kaust ja failid:

1mkdir vue3-intro
2cd vue3-intro
3touch index.html app.js

Või tee sama toiming failihalduri kaudu. Nüüd ava index.html ja kirjuta skelett:

1<!DOCTYPE html>
2<html lang="ru">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
7    <title>Vue 3 — first steps</title>
8</head>
9<body>
10    <div id="app"></div>
11    <script src="./app.js"></script>
12</body>
13</html>

Kolm võtmerida. <script src="https://unpkg.com/vue@3/dist/vue.global.js"> laeb Vue 3 CDN-ilt. See on kiireim viis alustamiseks: teek laeb nagu tavaline JavaScripti fail, ehitussammu pole vaja. <div id="app"> määrab kinnituspunkti: koha DOM-is, kus Vue hakkab „elama". Kolmas rida impordib app.js, kus me loogika defineerime.

Nüüd täidame app.js:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3'
5        }
6    }
7})
8 
9app.mount('#app')

Vue.createApp() meetod loob rakenduse instantsi. See võtab vastu valikute objekti; siin deklareerisime course atribuudi data() funktsiooni kaudu. Vue muudab iga data()-st tagastatud atribuudi reaktiivseks: kui väärtus muutub, uuendab DOM automaatselt. Pole vaja käsitsi puud manipuleerida.

Aga rakendus tuleb lehel oleva elemendi külge „kinnitada". Seda teebki app.mount('#app'). Ilma selle reata ei reageeri Vue ühelegi muutusele: instants on loodud, aga mitte käivitatud.

Jääb üle vaid atribuut HTML-is kuvada. <div id="app"> sisse kirjuta:

1<h1>{{ course }}</h1>

Topeltlooksulud {{ }} on interpolatsioon, peamine viis andmete kuvamiseks Vue mallides. Kõik {{ }} sees asendab Vue vastava atribuudi väärtusega data()-st.

Esimene Vue 3 rakendus brauseris

Ava index.html brauseris. Leht kuvab teksti. Sinu esimene rakendus on valmis ja sa kirjutasid selle ise, mitte ei genereerinud CLI kaudu.

Loendite renderdamine

Päris rakenduses töötad sa peaaegu alati massiividega: tooted, sildid, postitused. Vue pakub selleks v-for direktiivi.

Lisame data()-sse tags massiivi:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            tags: ['Vue', 'Frontend', 'JavaScript']
8        }
9    }
10})

Ja HTML-is loendi:

1<ul>
2    <li v-for="tag in tags">{{ tag }}</li>
3</ul>

v-for direktiiv itereerib üle tags massiivi ja loob iga elemendi jaoks oma <li>. Muutuja tag tsükli sees on jooksev element. Tulemus näeb välja selline:

Vue 3 siltide loend v-for direktiiviga

Oluline nüanss: massiivi itereerides vajab iga DOM-i element unikaalset võtit. Vue kasutab seda uuenduste ajal sõlmede identiteedi jälgimiseks, mis kiirendab ümberrenderdamist ja hoiab ära olekuga seotud vead.

1<ul>
2    <li v-for="(tag, index) in tags" :key="index">{{ tag }}</li>
3</ul>

:key on lühend direktiivist v-bind:key, mis seob key atribuudi indeksi väärtusega. Kui sul on objektide massiiv, näiteks { id: 1, name: 'Vue' }, kasuta võtmena pigem id-d kui indeksit. Indeks muutub ümberjärjestamisel, samas kui id on stabiilne, mis teeb selle usaldusväärsemaks.

Tingimuslik renderdamine

Sageli on vaja elementi tingimuse alusel näidata või peita: näiteks osta-nuppu ainult siis, kui kursus on saadaval. Vue käsitleb seda v-if direktiiviga.

Lisame data() meetodisse available lipu:

1data() {
2    return {
3        course: 'Introduction to Vue 3',
4        description: 'Basic guide to Vue 3 for beginners',
5        price: '$19.99',
6        available: true,
7        tags: [
8            { id: 1, name: 'Vue' },
9            { id: 2, name: 'Frontend' },
10            { id: 3, name: 'JavaScript' }
11        ]
12    }
13}

Ja kasutame seda märgendis:

1<p v-if="available">Course available for purchase!</p>
2<p v-else>Unfortunately, the course is currently unavailable.</p>

v-if hindab jutumärkides olevat avaldist. Kui see on tõene, renderdatakse esimene plokk; vastasel juhul käivitub v-else. Proovi käivitada app.available = false brauseri konsoolis ja vaata, kuidas leht koheselt reageerib.

Tingimuslik kuvamine Vue 3-s v-if abil

Lisaks v-if / v-else direktiividele on olemas ka v-else-if tingimusahelate jaoks ja v-show. Erinevus on põhimõtteline: v-if eemaldab elemendi DOM-ist täielikult, samas kui v-show lülitab ainult display: none sisse. Vali v-if, kui tingimus muutub harva. Kasuta v-show sagedase lülitamise jaoks, näiteks vahekaartide puhul, kus jõudlus on oluline.

Sündmuste käsitlemine

v-on direktiiv ehk lühidalt @ kuulab DOM-i sündmusi: klikke, sisestusi, hõljumist. Kui sündmus käivitub, käivitab Vue määratud meetodi või avaldise.

Lisame rakenduse valikutele purchase meetodi:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            tags: [
9                { id: 1, name: 'Vue' },
10                { id: 2, name: 'Frontend' },
11                { id: 3, name: 'JavaScript' }
12            ]
13        }
14    },
15    methods: {
16        purchase() {
17            console.log('Course purchased!')
18        }
19    }
20})

methods jaotis sisaldab funktsioone, mis on mallis ja teistes meetodites this kaudu kättesaadavad. Nüüd seome väljakutse nupuga:

1<button @click="purchase">Buy</button>
Kliki käsitlemine Vue 3-s v-on abil

Lihtsate toimingute jaoks võid kirjutada koodi otse @click sisse:

1<button @click="available = !available">Toggle availability</button>
Nupu oleku vahetamine Vue 3-s

Selline reasisene kood on mugav lühikeste toimingute jaoks, näiteks lipu ümberlülitamiseks. Kuid keerulisem loogika vii alati meetoditesse; mall peaks jääma loetavaks. Lihtne reegel: counter += 1 on mallis sobilik, aga kümme rida ostuloogikat kuulub meetodisse.

Atribuutide sidumine

Atribuudid nagu src, href või alt peavad sageli olema dünaamilised. Direktiiv v-bind ehk lühidalt : seob atribuudi väärtuse Vue avaldisega.

Lisame andmed pildi jaoks:

1data() {
2    return {
3        // ...other properties
4        imgURL: 'https://catalins.tech/img',
5        imgDescription: 'Photo of a desk with a computer'
6    }
7}

Mallis seome need <img> elemendiga:

1<img :src="imgURL" :alt="imgDescription" width="500" height="350">

Täispikk vorm oleks v-bind:src="imgURL"; koolon on lihtsalt süntaktiline suhkur. Vue jälgib nüüd imgURL ja imgDescription väärtusi: muuda neid data() sees ja pilt lehel uueneb automaatselt. See on reaktiivsus töös.

Pildi atribuutide sidumine v-bind abil

Sama põhimõte kehtib atribuutidele nagu :href, :disabled ja :class, samuti kõigile teistele. Proovi ise: lisa link dünaamilise href-iga data() seest ja veendu, et see töötab ilma ühegi lisareata.

Arvutatud omadused

Mõnikord tuleb andmeid enne kuvamist teisendada: vormindada hind, ühendada ees- ja perekonnanimi, kontrollida tingimust. Vue pakub selleks computed omadusi.

Kujutle, et soovid alati omada pildi kirjeldust, isegi kui imgDescription väli on tühi. Kirjutame arvutatud omaduse:

1const app = Vue.createApp({
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            imgURL: 'https://catalins.tech/img',
9            imgDescription: 'Photo of a desk with a computer',
10            tags: [
11                { id: 1, name: 'Vue' },
12                { id: 2, name: 'Frontend' },
13                { id: 3, name: 'JavaScript' }
14            ]
15        }
16    },
17    computed: {
18        hasImageDescription() {
19            return this.imgDescription.length > 0
20                ? this.imgDescription
21                : 'Automatic image description'
22        }
23    }
24})

Nüüd kasuta mallis toorandmete asemel arvutatud omadust:

1<img :src="imgURL" :alt="hasImageDescription" width="500" height="350">

Vue salvestab computed omaduse tulemuse puhvrisse ja arvutab selle ümber ainult siis, kui selle sõltuvused muutuvad, meie juhul imgDescription. See on tõhusam kui funktsiooni väljakutsumine igal renderdusel.

Oluline reegel: arvutatud omadused on mõeldud andmete kuvamiseks, mitte nende muutmiseks. Ära muuda rakenduse olekut computed sees; selleks kasuta meetodeid.

Meetodid vs. arvutatud omadused

Erinevus methods ja computed vahel taandub ühele küsimusele: kas sa muudad andmeid või kuvad tuletatud väärtust?

Arvutatud omadused on esitluskihi jaoks. Vormindamine, filtreerimine, tingimuste kontroll, sõnede ühendamine. Need on puhverdatud ja neil pole kõrvalmõjusid.

Meetodid on tegevuste jaoks. Väärtuse muutmine data() sees, päringu saatmine, lipu ümberlülitamine. Neid kutsutakse välja selgesõnaliselt ja need võivad teha kõike.

Tüüpiline antimuster on this.course muutmine computed omaduse sees. Arvutatud omadus reageerib course muutustele, kuid ei tohiks seda ise muuta. Andmete muutmiseks kasuta alati meetodit. Lase mallil kirjeldada „mida kuvada", mitte „kuidas arvutada".

Komponendid ja props

Kui rakendus kasvab, muutub kõige ühes failis hoidmine haldamatuks. Vue võimaldab liidese jaotada komponentideks: isoleeritud plokkideks, millel on oma loogika, mall ja stiilid.

Loome oma esimese komponendi CourseCard:

1mkdir components
2touch components/CourseCard.js

Failis components/CourseCard.js defineeri komponent:

1app.component('coursedisplay', {
2    data() {
3        return {
4            course: 'Introduction to Vue 3',
5            description: 'Basic guide to Vue 3 for beginners',
6            price: '$19.99',
7            available: true,
8            imgURL: 'https://catalins.tech/img',
9            imgDescription: 'Photo of a desk with a computer',
10            tags: [
11                { id: 1, name: 'Vue' },
12                { id: 2, name: 'Frontend' },
13                { id: 3, name: 'JavaScript' }
14            ]
15        }
16    },
17    computed: {
18        hasImageDescription() {
19            return this.imgDescription.length > 0
20                ? this.imgDescription
21                : 'Automatic image description'
22        }
23    },
24    template: `
25        <img :src="imgURL" :alt="hasImageDescription" width="500" height="350">
26        <h1>{{ course }}</h1>
27        <p>{{ description }}</p>
28        <p>{{ price }}</p>
29        <button @click="available = !available">Buy</button>
30        <ul>
31            <li v-for="tag in tags" :key="tag.id">{{ tag.name }}</li>
32        </ul>
33        <p v-if="available">Course available for purchase!</p>
34        <p v-else>Unfortunately, the course is currently unavailable.</p>
35    `
36})

app.component() esimene argument on nimi, mida kasutame HTML-is sildina: <coursedisplay></coursedisplay>. Teine on objekt, mis sisaldab data(), computed ja template, komponendi „sisemust".

Nüüd lisame komponendi faili index.html ja kasutame seda:

1<div id="app">
2    <coursedisplay></coursedisplay>
3</div>
4<script src="./app.js"></script>
5<script src="./components/CourseCard.js"></script>
6<script>
7    const mountedApp = app.mount('#app')
8</script>

Importisime komponendi faili, kasutasime seda kohandatud sildina ja monteerisime rakenduse otse HTML-is. Kursuse loogika on nüüd CourseCard sees, samas kui app.js vastutab ainult instantsi loomise eest.

Props: andmete edastamine komponentide vahel

Props (lühend sõnast properties) on mehhanism andmete edastamiseks vanemkomponendilt lapsele. Lapskomponent deklareerib, milliseid propse ta vastu võtab, ja vanem edastab need atribuutidena.

Lisame CourseCard-ile paid propsi, mis näitab, kas kursus on tasuline või tasuta:

1app.component('coursedisplay', {
2    props: {
3        paid: {
4            type: Boolean
5        }
6    },
7    // ...rest of the configuration
8})

Vanem, meie juhul app.js, edastab väärtuse:

1const app = Vue.createApp({
2    data() {
3        return {
4            allCourses: 1,
5            paid: true
6        }
7    }
8})

Ja failis index.html anname propsi edasi:

1<coursedisplay :paid="paid"></coursedisplay>

Vue valideerib automaatselt edastatud väärtuse tüübi. Kui oodatakse Boolean-i, aga saadakse string, annab raamistik konsoolis hoiatuse. See säästab sind rumalatest vigadest koodibaasi kasvades.

Propsi kohustuslikuks muutmiseks lisa selle definitsioonile required: true. Vue hakkab siis kurtma, kui vanem väärtust ei edasta, nii et saad probleemist teada enne, kui see liidese lõhub.

Selle juhendi täieliku koodi leiad vue3-intro repositooriumist GitHubis, mis sisaldab valmis faile index.html, app.js ja components/CourseCard.js. Forki seda ja katseta.

Seotud video

Materjali praktikaga kinnistamiseks vaata Net Ninja Vue 3 kursuse esimest õppetükki; see täiendab seda juhendit kenasti live-koodi läbivaatusega:

⁉️🤔 Korduma kippuvad küsimused

Kas Vue 3 saab toodangus kasutada ilma bundlerita?

Jah, CDN-i kaudu lisamine (unpkg.com/vue@3/dist/vue.global.js) töötab ka toodangus. Kuid päris projektide puhul soovitame üle minna Vite-ile: saad tree-shakingu, koodi poolitamise ja ühefailikomponendid, mis lihtsustavad arendust oluliselt, kui rakendus kasvab. Stardimall npm create vue@latest seadistab selle kõik minutiga.

Mille poolest erineb v-if v-show-st?

v-if eemaldab elemendi DOM-ist täielikult, kui tingimus on väär. v-show hoiab elementi DOM-is, kuid lülitab CSS-omadust display: none. Kasuta v-if-i, kui tingimus muutub harva, näiteks kasutajarolli puhul. Kasuta v-show-d sagedase lülitamise jaoks, nagu vahekaardid, kus renderduskiirus loeb ja soovid vältida sõlmede taasloomist.

Kas:key on v-for-is kohustuslik?

Tehniliselt töötab v-for ka ilma :key-ta, kuid Vue annab konsoolis hoiatuse. Ilma võtmeta ei suuda raamistik jälgida, milline DOM-element vastab millisele andmeelemendile, mis põhjustab vigu ümberjärjestamisel ja kustutamisel. Määra alati :key unikaalse identifikaatoriga, oma andmete id-ga, mitte massiivi indeksiga.

Mis vahe on data()-l ja computed-il?

data() salvestab algse oleku, „toored" andmed. computed tuletab sellest kuvamiseks väärtuse: vormindatud stringi, filtreeritud massiivi, valideerimistulemuse. Arvutatud omadus uueneb automaatselt, kui selle sõltuvused muutuvad, ja seda puhverdatakse renderduste vahel. Meetodeid seevastu kutsutakse iga kord uuesti välja ja need on mõeldud tegevuste, mitte kuvamise jaoks.

Kas Options API-t ja Composition API-t saab segada?

Jah, ühes projektis võib kasutada mõlemat stiili. Vue 3 toetab täielikult Options API-t, samas kui Composition API on lisatööriist keerukate stsenaariumide jaoks. Õppimiseks soovitame alustada Options API-st: see on struktureeritum ja lähedasem mõttemudelile „komponent on valikutega objekt".

Mida edasi teha: sinu järgmine samm Vue 3-ga

Oled ehitanud oma esimese rakenduse, uurinud direktiive, arvutatud omadusi ja komponente. See on vundament, millele ehitatakse iga projekt, alates maandumislehest kuni administraatoripaneelini.

Ees on kolm teed. Esiteks, kinnista teadmisi praktikaga: haara avalik API nagu JSONPlaceholder ja kuva postituste nimekiri koos filtreerimisega computed abil. Teiseks, liigu edasi Vite'i ja .vue failide juurde: ametlik Vue 3 dokumentatsioon juhatab sind tunniga create-vue-st esimese SFC-ni. Kolmandaks, õpi Vue Routerit ja Pinia't, et ehitada täisväärtuslikku SPA-d.

Kui soovid Vue-d proovida ilma igasuguse paigalduseta, vaata artiklit Vue lisamisest CDN-i kaudu. Selle juhendi lähtekood on vue3-intro repositooriumis; tee sellest kahvel ja katseta.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.