Alpine.js入门教程
Alpine.js。它是类似于Vue或者React这样的 响应式和声明式特性组件化开发框架，但是它更加轻量。可以理解为 JavaScript 版本的 Tailwind。
备注：Alpine.js 的语法几乎完全借用自 Vue （并用 Angular 的语法做了些扩展）。下面我们来一步一步讲解安装使用及注意事项
一、安装 Alpine
有以下两种安装方式
1、使用 CDN：
把以下脚本加入到你的 <head> 尾部.
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
就是这样，Alpine.js 会自行初始化。
生产环境中，建议在链接中锁定特定版本号，以此避免新版本中的变更造成问题。 例如，锁定版本为 2.8.2 (最新版本):
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
2、使用 npm：
从 npm 安装依赖包。
npm i alpinejs
并在你的脚本中引入它。
import 'alpinejs'
需要 IE11 支持的场景 改用这段脚本。
<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 或其他早期浏览器中自动加载专属兼容版本
二、使用
以下几行代码实现了一个下拉菜单，无需在编写单独的js，直接在html中定义就好了，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alpine</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
</head>
<body>
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
</body>
</html>
我们再来实现一个标签页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alpine</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
</head>
<body>
<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>
</body>
</html>
我们再来一个ajax请求接口数据生成下拉菜单的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alpine</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
</head>
<body>
<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>
</body>
</html>
ajax的接口没有数据，所以显示404
一、指令及属性
当前共有 14 个指令可用，如下所示：
指令 描述
x-data 定义一个新的组件作用域。
x-init 组件初始化时运行其中的表达式。
x-show 根据表达式结果（true 或 false）控制元素的 display: none;（译者注：控制模块显示/隐藏）
x-bind 将当前属性的值设定为指令中表达式的结果。
x-on 向元素上挂载事件监听器。当事件触发时执行其中的表达式。
x-model 向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。
x-text 和 x-bind 类似，但更新的是元素的 innerText。
x-html 和 x-bind 类似，但更新的是元素的 innerHTML。
x-ref 在组件外获取原始 DOM 元素的简便方法。
x-if 值为 false 时将从 DOM 中完全移除元素。需要在 <template> 标签中使用。
x-for 为数组中的每一项创建一个新的 DOM 节点。需要在 <template> 标签中使用。
x-transition 用于在过渡（CSS Translation）的各个阶段中为元素添加 class 的指令。
x-spread 为了更好的复用，可以绑定一个带有 Alpine 指令（作为 key）的对象到元素上。
x-cloak 这一属性会在 Alpine 初始化完成后被移除，可以用来隐藏未初始化的 DOM。
以及 6 个魔法属性：
魔法属性 描述
$el 获取根元素的 DOM 节点。
$refs 获取组件中标记有 x-ref 的 DOM 元素。
$event 在事件监听器中获取浏览器原生的「Event」对象。
$dispatch 创建一个「CustomEvent」并使用其内部的 .dispatchEvent() 方法进行分发。
$nextTick 在 Alpine 做出响应式 DOM 更新后，执行一个给出的表达式。
$watch 当监听的组件属性发生变化时，触发给定的回调函数。
指令 Directives
x-data
x-data 将定义一个新的组件作用域。它将通知框架初始化带有传入数据的一个新组件。
类似 Vue 组件中的 data 属性。
例如： <div x-data="{ foo: 'bar' }">...</div>
结构： <div x-data="[可迭代对象]">...</div>
抽离组件逻辑
你可以把数据（以及行为）通过一个可复用的函数抽离出来：
<div x-data="dropdown()">
<button x-on:click="open">Open</button>
<div x-show="isOpen()" x-on:click.away="close">
// Dropdown
</div>
</div>
<script>
function dropdown() {
return {
show: false,
open() { this.show = true },
close() { this.show = false },
isOpen() { return this.show === true },
}
}
</script>
注意 Alpine.js 操作的函数都在全局作用域（window），你需要把 x-data 使用的函数声明到 window 上，例如 window.dropdown = function () {} (因为在 Webpack, Rollup, Parcel 等工具中，function 默认会被挂载模块作用域，而非 window).
你也可以通过对象解构语法，把多个数据对象混合起来：
<div x-data="{...dropdown(), ...tabs()}">
x-init
x-init 将在组件初始化时运行给定的表达式。
例如： <div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>
结构： <div x-data="..." x-init="[表达式]"></div>
如果你希望代码在 Alpine 对 DOM 进行初始化更新后再调用（类似 VueJS 中的 mounted() 钩子），你可以传入一个回调函数，它将在 DOM 操作完成后被调用，例如：
x-init="() => { // we have access to the post-dom-initialization state here // }"
x-show
x-show 将根据表达式结果（true 或 false）控制元素的 display: none;（译者注：控制模块显示/隐藏）
例如: <div x-show="open"></div>
结构: <div x-show="[表达式]"></div>
x-show.transition
x-show.transition 是一个可以让你在使用 x-show 操作 CSS 过渡（Transition）时更爽的简便 API。
<div x-show.transition="open">
这段内容会在过渡中滑入/滑出。
</div>
指令 描述
x-show.transition 同时滑入/滑出并缩放（默认值：opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms）
x-show.transition.in 仅滑入
x-show.transition.out 仅滑出
x-show.transition.opacity 仅使用淡入淡出
x-show.transition.scale 仅使用缩放
x-show.transition.scale.75 自定义 CSS 缩放转换为 transform: scale(.75).
x-show.transition.duration.200ms 设定 "in" 的的过渡时间为 200ms。出动作（"out"）将是它的一半 (100ms).
x-show.transition.origin.top.right 自定义 CSS 转换起始位置为 transform-origin: top right.
x-show.transition.in.duration.200ms.out.duration.50ms 为 "in" 和 "out" 设定不同的过渡时间。
备注： 所有的过渡修饰符都可组合使用。也就是说可以这么用（虽然真这么用过于粗暴23333）: x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95
备注： x-show 将等待子元素完成 out。如果你希望跳过这一行为，可以添加 .immediate 修饰符：
<div x-show.immediate="open">
<div x-show.transition="open">
</div>
x-bind
x-bind 将当前属性的值设定为指令中表达式的结果。 这一表达式可以访问组件数据对象中的所有 key，并在每次数据更新时重算结果。
备注：可以用 ":" 简写语法替代，例如： :type="...".
例如: <input x-bind:type="inputType">
结构: <input x-bind:[HTML属性]="[表达式]">
备注： 属性数据绑定只会在依赖的值更新时被重算。框架足够智能，可以观测数据变化并检测绑定是否关心这些变化。
x-bind 到 class 属性
x-bind 在完成到 class 属性的绑定时，行为略有不同。
对于 class，你可以传入一个对象，key 为 class 名，值为布尔量，用来表示对应 ...
点击查看剩余70%
{{collectdata}}
网友评论0