h()-funktion perusteellinen tarkastelu
h(type, props, children) -funktion allekirjoitus, VNode-rakenne ja dynaamisten komponenttityyppien renderöinti
h()-funktion perusteellinen tarkastelu on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mikä h-funktio on
h-funktio (lyhenne sanasta hyperscript) luo virtuaalisia DOM-solmuja (VNodeja) suoraan JavaScriptissä. Se on perusta, johon templaatit käännetään. Renderöintifunktio palauttaa h-funktion kutsun tuloksen.
Signatuuri
h ottaa kolme argumenttia: h(type, props, children). type voi olla tunnisteena käytettävä tagin nimimerkkijono, komponenttiolio tai funktionaalinen komponentti. props on attribuuttien, props-arvojen ja tapahtumien olio. children voi olla tekstiä, VNode-taulukko tai slots-olio.
import { h } from "vue";
h(type, props, children);Yksinkertainen elementti
Kun välitätte tagin nimen ja class-arvon sisältävän props-olion, tuloksena on tyylitelty elementti. Kolmas argumentti on tässä tavallista tekstisisältöä.
import { h } from "vue";
h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>Propsit ja attribuutit
Kaikki annetaan samaan props-olioon: HTML-attribuutit, DOM-propsit, class, style ja tapahtumakuuntelijat. Vue selvittää päivityksen yhteydessä, mihin kukin kuuluu.
h("input", {
type: "text",
value: "hello",
class: "field",
placeholder: "Type here"
});Lapsielementtien taulukot
Kun elementillä on useita lapsia, välittäkää VNode-taulukko kolmantena argumenttina. Jokainen lapsi on itse h-funktion kutsu.
h("ul", null, [
h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>null-arvon välittäminen, kun propseja ei ole
Jos elementillä ei ole propseja, voitte välittää toisena argumenttina null-arvon (tai tyhjän olion), jolloin lapset pysyvät kolmannessa paikassa.
h("ul", null, [
h("li", null, "first"),
h("li", null, "second")
]);Komponentin renderöinti
type-argumentti voi olla importattu komponentti. Välittämänne propsit muuttuvat kyseisen komponentin propseiksi.
import { h } from "vue";
import MyComponent from "./MyComponent.vue";
h(MyComponent, { title: "Hello" });Slottien välittäminen oliona
Kun välitätte slotin sisältöä komponentille, children-argumentista tulee funktioiden muodostama olio. Jokainen avain on slotin nimi, ja jokainen arvo on funktio, joka palauttaa VNodeja tai tekstiä.
h(MyComponent, { title: "Hello" }, {
default: () => "slot content"
});Nimetyt ja skoopatut slotit
Useat slotit ovat vain useita avaimia. Skoopatut slotit saavat propsinsa funktion argumenttina.
h(MyComponent, null, {
header: () => h("h1", null, "Title"),
default: (props) => h("p", null, props.text)
});Tapahtumankuuntelijat
Tapahtumat ovat propseja, joiden alussa on on ja sen jälkeen PascalCase-muodossa tapahtuman nimi. Klikkauskuuntelija on onClick-propsi.
h("button", {
onClick: () => console.log("clicked")
}, "Press me");h-funktion palauttaminen renderöintifunktiosta
setup-funktion sisällä voitte palauttaa renderöintifunktion templatent sijaan. Se kutsutaan jokaisella uudelleenrenderöinnillä VNode-puun tuottamiseksi.
import { h, ref } from "vue";
export default {
setup() {
const count = ref(0);
return () => h("button", {
onClick: () => count.value++
}, "Count: " + count.value);
}
};Pikatarkistus
Miten välitätte oletusslotin sisällön komponentille h-funktion avulla?
Kertaus
h-funktio rakentaa VNodeja muodossa h(type, props, children). type on tagi tai komponentti, props sisältää attribuutit ja onEvent-kuuntelijat, ja children on tekstiä, joukko VNodeja tai funktioiden muodostama slot-olio. Renderöintifunktiot palauttavat h-kutsuja ja suoritetaan jokaisella uudelleenrenderöinnillä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”h()-funktion perusteellinen tarkastelu” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “h()-funktion perusteellinen tarkastelu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”h()-funktion perusteellinen tarkastelu”?
h(type, props, children) -funktion allekirjoitus, VNode-rakenne ja dynaamisten komponenttityyppien renderöinti Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”h()-funktion perusteellinen tarkastelu”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- h()-funktion perusteellinen tarkastelu
- JSX Vuessa 3 Viten kanssa
- Dynaamiset komponentit render-funktioilla
- Higher-Order Component (HOC) -malli