Dokumentasi/Unit 1: dasar-dasarnya

Bangun aplikasi catatan dengan Nexy, bagian 4: komponen

Bagian 4 mengubah setiap catatan menjadi komponen yang dapat digunakan kembali, file .nexy yang Anda impor seperti nama Python dan digunakan seperti tag HTML.

Sebelum Anda memulai: aplikasi bagian 3.

Tulis komponennya

Komponen adalah file .nexy di luar rute. Propsnya dideklarasikan dengan prop[...], dan pemanggil meneruskannya sebagai atribut:

---id: prop[int]text: prop[str]---<article class="note">  <a href="/notes/{{ id }}">{{ text }}</a></article> <style>  .note { padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }</style>

Blok <style> dikirim bersama setiap halaman yang menggunakan kartu. Itu tidak tercakup: .note adalah satu kelas untuk seluruh halaman, jadi berikan nama kelas komponen yang hanya digunakannya.

Gunakan dalam daftar

---from "@/components/NoteCard.nexy" import NoteCardfrom src.notes import NOTES notes = NOTES.items()---<section class="app-page">  <h1>Notes</h1>  {% for id, text in notes %}  <NoteCard id="{{ id }}" text="{{ text }}" />  {% endfor %}</section>

---from "@/components/NoteCard.nexy" import NoteCardfrom src.notes import NOTES notes = NOTES.items()---<section class="app-page">  <h1>Notes</h1>  {% for id, text in notes %}  <NoteCard id="{{ id }}" text="{{ text }}" />  {% endfor %}</section>

@/ adalah alias impor bagian 1: menunjuk ke src/. Nama file adalah nama komponen, dalam PascalCase: NoteCard.nexy ekspor NoteCard.

Buka http://localhost:3000/notes: setiap not kini menjadi kartu.

Apa yang Anda pelajari

• File .nexy di luar rute adalah sebuah komponen; prop[...]-nya adalah atributnya.
• from "@/components/x.nexy" import X mengimpornya; <X /> menerjemahkannya.
• Blok <style> tidak tercakup: beri nama kelas komponen setelahnya.

Langkah selanjutnya

• Bagian 5: menyimpan catatan di SQLite
• Komponen: Image, Link dan pembantu bawaan

Salin halaman sebagai Markdown Sunting di GitHub