Alpine.js là gì ? Hãy Cùng tìm hiểu về cách sử dụng nào

quivo — Fri, 01 Dec 2023 02:35:52 +0000

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.

JavaScript

" style="color:#f6f6f4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/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 alpinejs

Tiế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 dev

Bây giờ, bạn có thể sử dụng được alpine (nhớ thêm app.js vào blade view nhé)

Cùng xem 1 ví dụ đơn giản nhé:

JavaScript
            Ví dụ
            Ví dụ về alpine js

" style="color:#f6f6f4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<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 jsspan>
            <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.