Cách làm việc với Câu lệnh phản ứng trong Svelte
Trong Svelte, bạn có thể lắng nghe các thay đổi trong trạng thái thành phần và cập nhật các biến khác.
Ví dụ, nếu bạn có mộtcount
Biến đổi:
<script>
let count = 0
</script>
và bạn cập nhật nó bằng cách nhấp vào một nút:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
Bạn có thể lắng nghe các thay đổi trêncount
sử dụng cú pháp đặc biệt$:
xác định một khối mới mà Svelte sẽ chạy lại khi bất kỳ biến nào được tham chiếu vào nó thay đổi.
Đây là một ví dụ:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
</script>
{count} <button on:click={incrementCount}>+1</button>
Tôi đã sử dụng khối:
$: console.log(`${count}`)
Bạn có thể viết nhiều hơn một trong số chúng:
<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
Và bạn cũng có thể thêm một khối để nhóm nhiều hơn một câu lệnh:
<script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
Tôi đã sử dụng lệnh gọi console.log () trong đó, nhưng bạn cũng có thể cập nhật các biến khác:
<script>
let count = 0
let double = 0
$: {
console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
double = count * 2
console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
}
</script>
Tải xuống miễn phí của tôiSổ tay Svelte
Các hướng dẫn nhỏ gọn hơn:
- Bắt đầu với Svelte - một hướng dẫn ngắn
- Cách làm việc với các đạo cụ trong Svelte
- Cách nhập các thành phần trong Svelte
- Cách xuất các hàm và biến từ một thành phần Svelte
- Mẫu Svelte: logic có điều kiện
- Cách kết xuất một thành phần Svelte theo yêu cầu
- Slotte Slots
- Cách thêm nhận xét trong các mẫu Svelte
- Ràng buộc mảnh mai
- Xử lý cập nhật trạng thái trong Svelte
- Câu lệnh phản ứng trong Svelte
- Sự kiện vòng đời của Svelte
- Svelte mẫu: vòng lặp
- Giải quyết lời hứa trong các mẫu Svelte
- Làm việc với các sự kiện trong Svelte
- Quản lý nhà nước nhiều thành phần trong Svelte
- Cách truy cập tham số URL trong Sapper bên ngoài mô-đun tập lệnh
- Cách áp dụng động CSS trong Svelte
- Cách chuyển hướng đến một URL trong Sapper
- Cách mô phỏng vòng lặp for trong các mẫu Svelte