Alpine.js cơ bản: Hướng dẫn x-data, x-text, x-on, x-show, x-model, x-for

CD
Đăng ngày 03/07/2026 · Cập nhật 10/07/2026 · 3 phút đọc
#Thư viện Javascript

Alpine.js là thư viện JavaScript nhẹ (15KB), cho phép bạn viết tương tác UI trực tiếp trong HTML mà không cần build step. Bài này hướng dẫn các directive cơ bản nhất.

Cài đặt Alpine.js

<!-- CDN (dùng ngay) -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<!-- npm (dành cho dự án lớn) -->
npm install alpinejs

Chỉ cần thêm CDN vào <head> là bạn đã có thể dùng Alpine.js ngay. Không cần Webpack, không cần import, không cần build.

x-data: Khai báo component

Mọi component Alpine bắt đầu với x-data. Nó khai báo biến và hàm trong phạm vi HTML đó:

<div x-data="{ count: 0, name: 'Alpine', show: false }">
  <!-- count bắt đầu là 0, show là false -->
</div>

x-text và x-html: Hiển thị dữ liệu

x-text thay innerText, x-html thay innerHTML:

<div x-data="{ title: 'Hello', html: '<b>World</b>' }">
  <p x-text="title"></p>    <!-- Hello -->
  <p x-html="html"></p>     <!-- World (in đậm) -->
</div>

x-on (hoặc @): Xử lý sự kiện

x-on:click hoặc viết tắt @click. Hỗ trợ đầy đủ các event JavaScript:

<div x-data="{ count: 0 }">
  <p>Count: <span x-text="count"></span></p>
  <button @click="count++">+</button>
  <button @click="if(count > 0) count--">-</button>
  <button @click="count = 0">Reset</button>
</div>

Trong quá trình triển khai các dự án WordPress tại Code Tốt, Alpine.js thường được dùng để xử lý các tương tác nhỏ như counter, toggle, filter mà không cần jQuery.

x-show và x-transition: Ẩn/hiện

x-show ẩn/hiện phần tử dựa trên biểu thức boolean:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <p x-show="open" x-transition>Hello!</p>
</div>

x-transition thêm hiệu ứng mượt mà khi show/hide, bao gồm cả fade, scale và slide.

x-model: Two-way binding

Liên kết input với biến, tự động cập nhật khi người dùng nhập:

<div x-data="{ name: 'World' }">
  <input type="text" x-model="name">
  <p>Hello, <span x-text="name"></span>!</p>
</div>

x-for: Vòng lặp

<ul x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
  <template x-for="(item, index) in items" :key="index">
    <li>
      <span x-text="item"></span>
      <button @click="items.splice(index, 1)" class="ml-2 text-red-500">Xóa</button>
    </li>
  </template>
</ul>

Tham khảo: Alpine.js Docs | Swiper Slider | Responsive Images