Latihan 1: Render Functions — Vue

Latihan 1 dari materi Render Functions di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tulis tampilannya dengan render function, bukan template. Starter-nya sudah punya const { h } = Vue, objek App yang setup()-nya masih kosong, dan template <component :is="App" />; template itu tetap.

Di setup() milik App, kembalikan fungsi: return () => h("div", { id: "app" }, [ ... ]).
Di dalam array itu, tulis h("h1", "Judul") lalu h("p", "Dibuat dengan Vue").

Yang dicek:

Ada #app, h1 berisi Judul, dan p berisi Dibuat dengan Vue.
<h1> dan <p> dibuat dengan h("h1", ...) dan h("p", ...), bukan ditulis di template.

Hint

setup() boleh mengembalikan fungsi, dan fungsi itulah render function-nya. Isinya pemanggilan h() yang menggambarkan elemen.
h menerima tag, props, lalu anak-anaknya. div ber-id app punya dua anak dalam array: h1 berisi Judul dan p berisi Dibuat dengan Vue.
setup() { return () => h("div", { id: "app" }, [h("h1", "Judul"), h("p", "Dibuat dengan Vue")]) }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Render Functions — Vue

Hint

Memperbarui Aplikasi