Skip to main content

Trong Svelte, một ứng dụng bao gồm một hoặc nhiều component. Một component là một khối code khép kín (self-contained) có thể dùng lại được, bao gồm các HTML, CSS và JavaScript được gói gọn với nhau và được viết vào tệp với đuôi .svelte. Tệp App.svelte ở editor phía bên phải, là một component đơn giản.

Thêm dữ liệu

Một component mà chỉ có nội dung markup tĩnh thì chẳng có gì thú vị. Ta hãy thêm dữ liệu vào nó nhé.

Đầu tiên, thêm một thẻ script vào component của bạn và khai báo một biến name:

App.svelte
<script>
	let name = 'Svelte';
</script>

<h1>Hello world!</h1>

Rồi, chúng ta có thể cho giá trị của name vào trong markup:

App.svelte
<h1>Hello {name}!</h1>

Ở trong dấu ngoặc nhọn, chúng ta có thể thêm bất kì lệnh JavaScript nào chúng ta muốn. Hãy thử đổi name thành name.toUpperCase() để có lời chào "lớn tiếng" hơn.

App.svelte
<h1>Hello {name.toUpperCase()}!</h1>

Tiếp theo: Thuộc tính động

1
2
<h1>Hello world!</h1>
 
initialising