Alpine.js là gì ?
Alpine.js là một JavaScript framework nhẹ và dễ sử dụng, giúp bạn tạo ra các tương tác trực tiếp trên giao diện người dùng (UI) một cách dễ dàng và nhanh chóng mà không cần phải chạy npm, biên dịch tập lệnh, định cấu hình webpack. Nó là một giải pháp thay thế đơn giản và hiệu quả cho các frontend framework khác như Vue, React & Angular. Hãy nghĩ về nó giống như Tailwind dành cho JavaScript.
Cách sử dụng
Theo tài liệu của Alpine.js , cú pháp của nó gần như được mượn hoàn toàn từ Vue.js (và phần mở rộng Angular.js ), vì vậy nếu bạn đã biết một trong hai framework này thì bạn sẽ không phải mất nhiều thời gian để bắt đầu.
Trong blog này, Chúng ta sẽ tìm hiểu cách sử dụng Alpine.js trong Laravel với hai ví dụ.
- Alpine.js CDN
- Laravel Mix
Sử dụng qua CDN
Bạn chỉ cần thêm một thẻ script liên kết thư viện (xem ví dụ bên dưới). Rất đơn giản phải không nào! Bạn không cần phải biên dịch javascript hoặc cấu trúc dự án của mình theo bất kỳ cách cụ thể nào.
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>Sử dụng qua Laravel mix
Trước tiên, bạn cần cài đặt Alpine js bằng lệnh npm bên dưới:
npm install alpinejsTiếp đó, bạn cần import vào resources/js/app.js file
import 'alpinejs';Cuối cùng chỉ cần chạy lệnh
npm run devBây giờ, bạn có thể sử dụng được alpine (nhớ thêm app.js vào blade view nhé)
<script src="{{ mix('js/app.js') }}"></script>Cùng xem 1 ví dụ đơn giản nhé:
<div
x-data="{ show: false }"
x-show="show"
x-on:notify.window="() => { show = true; setTimeout(() => { show = false; }, 5000 ) }"
style="display:none;"
class="toast active"
>
<div class="toast-content">
<i class="ti ti-check toast-icon" x-on:click="show = false"></i>
<div class="message">
<span class="message-title">Ví dụ</span>
<span class="message-content">Ví dụ về alpine js</span>
<span x-on:click="show = false" class="close">
<i class="ti ti-x"></i>
</span>
</div>
<div class="progress active"></div>
</div>
</div>Ở ví dụ trên, tôi có một component alert được phản ứng khi sự kiện notify được thực hiện thì sẽ hiển thị thông báo.
Kết luận
Với sự đơn giản và gọn nhẹ của Alpine, tôi tin rằng đây sẽ là 1 trong số các giải pháp tốt nhất cho bạn trong một số trường hợp thay vì sử dụng các Js framework khác như Vue hay React để rồi nhận thêm sự cồng kềnh, phức tạp mà chúng mang lại.
Hiện tại, cùng với sự kết hợp với Tailwind, Livewire và Laravel, bộ tứ này đã và đang hình thành nên 1 ngăn xếp công nghệ mới được gọi là ngăn xếp TALL. Nếu tò mò bạn có thể xem tại blog.laravelvietnam.
1 comment
Đẳng cấp