建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

小巧实用的前端框架Alpine.js

来源:易助科技网浏览量:9收藏

简介


Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性。你可以继续操作 DOM,并在需要的时候使用 Alpine.js。lpine.js 的语法几乎完全借用自 Vue (并用 Angular 的语法做了些扩展)。


Alpine.js-官方Logo


Alpine的优势在于DOM操作的简便性,如:

在某些条件下显示和隐藏DOM节点,

绑定用户输入,

监听事件并相应地更改UI,

你还可以使用Alpine.js来模板化数据是否可以在JSON中使用。



使用


1.  引入文件


<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>


这一写法使用了 module/nomodule 模式(英文) ,这样的写法可以让现代浏览器自动加载模块版本依赖,而在 IE11 或其他早期浏览器中自动加载专属兼容版本。

在你的脚本中引入它。


import 'alpinejs'


2.  基本用法


下拉菜单(Dropdown)/模态弹窗(Modal)


<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>


标签页 Tabs


<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>


这样的写法也可以用在其他地方: 鼠标悬停时从服务器预加载下拉菜单中的 HTML 内容。


<div x-data="{ open: false }">
    <button
        @mouseenter.once="
            fetch('/dropdown-partial.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
        @click="open = true"
    >Show Dropdown</button>

    <div x-ref="dropdown" x-show="open" @click.away="open = false">
        Loading Spinner...
    </div>
</div>



相关链接


GitHub 地址 : https://github.com/alpinejs

官网地址 :https://www.alpinejs.cn/