Vue Academy · Ders

h() İşlevine Derinlemesine Bakış

h(type, props, children) imzası, VNode yapısı ve dinamik bileşen türlerini işleme.

h() İşlevine Derinlemesine Bakış, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

h İşlevi Nedir

h işlevi (hiperbetiğin kısaltması), sanal DOM düğümlerini (sanal düğümler) doğrudan JavaScript'te oluşturur. Şablonların derlenerek dönüştüğü temel budur. Bir oluşturma işlevi, h çağrısının sonucunu döndürür.

İmza

h üç bağımsız değişken alır: h(type, props, children). Tür, etiket adı olan bir dize, bir bileşen nesnesi veya işlevsel bir bileşen olabilir. Özellikler, özniteliklerin, özelliklerin ve olayların bulunduğu bir nesnedir. Alt içerik, metin, sanal düğümler dizisi veya bir yuva nesnesi olabilir.

import { h } from "vue";

h(type, props, children);

Basit Bir Öğe

Bir etiket adını ve class içeren bir özellik nesnesini geçirmek, stilleri uygulanmış bir öğe oluşturur. Buradaki üçüncü bağımsız değişken düz metin içeriğidir.

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Özellikler ve Öznitelikler

Her şey aynı özellikler nesnesine konur: HTML öznitelikleri, DOM özellikleri, class, style ve olay dinleyicileri. Vue, yama uygulanırken her birinin nereye ait olduğunu belirler.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

Alt Öğe Dizileri

Bir öğenin birden çok alt öğesi olduğunda, üçüncü bağımsız değişken olarak bir sanal düğüm dizisi geçiriniz. Her alt öğe, kendi başına bir h çağrısıdır.

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Özellik Yoksa null Geçirme

Bir öğenin özelliği yoksa, alt öğelerin üçüncü konumda kalması için ikinci bağımsız değişken olarak null (veya boş bir nesne) geçebilirsiniz.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

Bileşen Oluşturma

Tür bağımsız değişkeni içe aktarılmış bir bileşen olabilir. Geçirdiğiniz özellikler, o bileşenin özellikleri olur.

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

Yuvaları Nesne Olarak Geçirme

Bir bileşene yuva içeriği geçirmek için alt öğeler bağımsız değişkeni, işlevlerden oluşan bir nesneye dönüşür. Her anahtar bir yuva adıdır ve her değer, sanal düğümler veya metin döndüren bir işlevdir.

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

Adlandırılmış ve Kapsamlı Yuvalar

Birden çok yuva, yalnızca birden çok anahtardır. Kapsamlı yuvalar, özelliklerini işlev bağımsız değişkeni olarak alır.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

Olay Dinleyicileri

Olaylar, olay adının PascalCase biçimiyle devam eden on ön ekiyle başlayan özelliklerdir. Tıklama dinleyicisi, onClick özelliğidir.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

Oluşturma İşlevinden h Döndürme

setup içinde şablon yerine bir oluşturma işlevi döndürebilirsiniz. Bu işlev, sanal düğüm ağacını üretmek için her yeniden oluşturmada çağrılır.

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

Hızlı Kontrol

h kullanarak varsayılan yuva içeriğini bir bileşene nasıl geçirirsiniz?

Özet

h işlevi, h(type, props, children) ile sanal düğümler oluşturur. Tür bir etiket veya bileşendir, özellikler öznitelikleri ve onEvent dinleyicilerini içerir, alt öğeler ise metin, sanal düğüm dizisi veya işlevlerden oluşan bir yuva nesnesidir. Oluşturma işlevleri h çağrıları döndürür ve her yeniden oluşturmada çalışır.

Sıkça Sorulan Sorular

“h() İşlevine Derinlemesine Bakış” dersi ücretsiz mi?

Evet — “h() İşlevine Derinlemesine Bakış” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“h() İşlevine Derinlemesine Bakış” dersinde ne öğreneceğim?

h(type, props, children) imzası, VNode yapısı ve dinamik bileşen türlerini işleme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“h() İşlevine Derinlemesine Bakış” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön