Svelte là một công cụ để build web applications. Giống như các khung giao diện người dùng khác, nó cho phép bạn xây dựng ứng dụng của mình bằng cách khai báo từ các components kết hợp markup, styles và behaviours.

Cài đặt project với Svelte bằng cú pháp

npm init svelte

Trong Svelte một ứng dụng được tạo từ 1 hoặc nhiều component. Một component bao gồm 1 khối HTML, CSS và Javascript được viết trong file .svelte và có thể tái sử dụng.

Component

Một component đơn giản sẽ như sau:

App.svelte

<style>
	h1 {
		color: goldenrod;
		font-family: 'Comic Sans MS', cursive;
	}
</style>

<script>
  let name = 'Svelte';
</script>

<h1>Hello {name}</h1>

Ở đây bạn set style cho thẻ h1 chỉ có hiệu lực trong component, không có hiệu lực cho toàn bộ application.

Trong cặp `{}` bạn có thể thêm code Javascript nếu muốn.

Nếu tên và value của thuộc tính giống nhau thì có thể viết tắt:

<script>
	let src = '/image.gif';
</script>

<img src={src}/>
//có thể viết thành
<img {src}/>

Import components

Nested.svelte

<p>This is another paragraph.</p>

App.svelte

<script>
	import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>
<Nested />

HTML tags

Nếu muốn chèn và muốn Svelte hiểu được là đang chèn một đoạn HTML thì bạn cần thêm tag @html

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

Xử lý sự kiện

<script>
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

Thông thường một số thuộc tính bạn cần xử lý trước khi hiển thị và phụ thuộc vào các thuộc tính khác. Ví dụ fullname sẽ phụ thuộc vào firstname và lastname. Chúng ta thường sẽ:

<script>
	let count = 0, doubled = 0;

	function increment() {
		count += 1;
		doubled = count * 2;
	}
</script>

<button on:click={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

Thay vào đó bạn có thể:

<script>
	let count = 0;
	$: doubled = count * 2;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

Ngoài đặt tên cho thuộc tính thì chúng ta có thể log giá trị khi thuộc tính thay đổi

<script>
  let count = 0;
  $: console.log(`the count is ${count}`);
</script>

Hoặc đặt trước block if:

<script>
  let count = 0;
  $: if (count >= 10) {
  	alert('count is dangerously high!');
  	count = 0;
  }
</script>

Cập nhật array và object

Vì khả năng phản ứng của Svelte được kích hoạt bởi các phép gán nên việc sử dụng các phương thức array như push và splice sẽ không tự động tạo ra các bản cập nhật. Ví dụ: việc nhấp vào nút ‘Add a number’ hiện không thực hiện bất kỳ tác vụ nào, mặc dù chúng ta đang numbers.push(…) bên trong addNumber.

Để khắc phục vấn đề này chúng ta có thể:

<script>
  function addNumber() {
  	numbers.push(numbers.length + 1);
  	numbers = numbers;
  }
</script>

Hoặc

<script>
  function addNumber() {
  	numbers = [...numbers, numbers.length + 1];
  }
</script>