Vue Academy · Pelajaran

Menyelami Fungsi h()

Signature h(type, props, children), struktur VNode, serta merender tipe komponen dinamis.

Menyelami Fungsi h() adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Fungsi h

Fungsi h (singkatan dari skrip hiper) membuat node DOM virtual secara langsung dalam JavaScript. Fungsi ini menjadi dasar yang digunakan untuk mengompilasi templat. Fungsi render mengembalikan hasil pemanggilan h.

Tanda Tangan Fungsi

h menerima tiga argumen: h(type, props, children). Tipe dapat berupa teks nama tag, objek komponen, atau komponen fungsional. Properti adalah objek yang berisi atribut, properti, dan peristiwa. Anak dapat berupa teks, array node virtual, atau objek slot.

import { h } from "vue";

h(type, props, children);

Elemen Sederhana

Memberikan nama tag dan objek properti dengan class akan menghasilkan elemen bergaya. Argumen ketiga di sini adalah isi teks biasa.

import { h } from "vue";

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

Properti vs Atribut

Semuanya berada dalam objek properti yang sama: atribut HTML, properti DOM, class, style, dan pendengar peristiwa. Vue menentukan tempat masing-masing saat menerapkan perubahan.

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

Array Anak

Jika sebuah elemen memiliki beberapa anak, berikan array node virtual sebagai argumen ketiga. Setiap anak merupakan pemanggilan h tersendiri.

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

Meneruskan null Tanpa Properti

Jika sebuah elemen tidak memiliki properti, Anda dapat meneruskan null (atau objek kosong) sebagai argumen kedua agar anak-anak tetap berada di posisi ketiga.

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

Merender Komponen

Argumen tipe dapat berupa komponen yang diimpor. Properti yang Anda teruskan akan menjadi properti komponen tersebut.

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

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

Meneruskan Slot sebagai Objek

Untuk meneruskan konten slot ke komponen, argumen anak menjadi objek berisi fungsi. Setiap kunci adalah nama slot, dan setiap nilai adalah fungsi yang mengembalikan VNode atau teks.

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

Slot Bernama dan Berscope

Beberapa slot cukup direpresentasikan sebagai beberapa kunci. Slot berscope menerima propertinya sebagai argumen fungsi.

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

Pendengar Peristiwa

Peristiwa adalah properti yang diawali on, diikuti nama peristiwa dalam PascalCase. Pendengar klik adalah properti onClick.

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

Mengembalikan h dari Fungsi Render

Di dalam setup, Anda dapat mengembalikan fungsi render alih-alih templat. Fungsi ini dipanggil pada setiap perenderan ulang untuk menghasilkan pohon VNode.

import { h, ref } from "vue";

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

Pemeriksaan Singkat

Bagaimana Anda meneruskan konten slot bawaan ke komponen menggunakan h?

Ringkasan

Fungsi h membangun VNode dengan h(type, props, children). Tipe adalah tag atau komponen, props menyimpan atribut dan pendengar onEvent, sedangkan children dapat berupa teks, array VNode, atau objek slot berisi fungsi. Fungsi render mengembalikan pemanggilan h dan berjalan pada setiap perenderan ulang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyelami Fungsi h()” gratis?

Ya — teks lengkap “Menyelami Fungsi h()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyelami Fungsi h()”?

Signature h(type, props, children), struktur VNode, serta merender tipe komponen dinamis. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyelami Fungsi h()” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy