Alpine.js 精简重
建议有 js 基础，先阅读官网文档，如果您会 vue 类似框架，上手会更快
https://alpinejs.dev
js 代码中可以使用 Alpine.sore 定义全局数据
Alpine.store('tabs', {
current: 'first',
items: ['first', 'second', 'third'],
})x-text 可以运算任何 js 表达式
<span x-text="1 + 2"></span>@submit.prevent 阻止浏览器提交表单
<form @submit.prevent="...">...</form>
<form @submit.prevent="console.log('submitted')" action="/foo">
<button>Submit</button>
</form>.stop 也是阻止事件，以下点击按钮不会触发
<div @click="console.log('I will not get logged')">
<button @click.stop>Click Me</button>
</div>$watch 用于监听更改变化的值，需要使用回调添加第二个参数访问变化之前的值
<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
<div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">
<button @click="open = ! open">Toggle Open</button>
</div>x-effect 用于监听值并且可以使用表达式
<div x-data="{ open: false }" x-effect="console.log(open)">x-bind 的简写，例如 :class 条件简写
<div :class="show ? '' : 'hidden'">
<!-- Is equivalent to: -->
<div :class="show || 'hidden'">
<div :class="closed ? 'hidden' : ''">
<!-- Is equivalent to: -->
<div :class="closed && 'hidden'">$event 事件对象，和原生 js 里的 event 一样
<button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button
#代码调用写法
<button @click="handleClick">...</button>
<script>
function handleClick(e) {
// Now you can access the event object (e) directly
}
</script>.outside 很方便，点击元素之外触发
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<div x-show="open" @click.outside="open = false">
Contents...
</div>
</div>.window 添加到事件后，监听的是根对象，以下示例将侦听页面任何位置按下的转义键
<div @keyup.escape.window="...">...</div>.once 添加到事件后只调用一次
<button @click.once="console.log('I will only log once')">...</button>.debounce 延迟，防抖动，比如输入框填写文字后一定时间后触发
<input @input.debounce.500ms="fetchResults">.throttle 和 debounce 一样，但是只触发一次，可以自定义时间
<div @scroll.window.throttle="handleScroll">...</div>.self 确保点击的的是自己，而不是子元素
<button @click.self="handleClick">
Click Me
<img src="...">
</button>x-model 适用于以下 input
<input type="text">
<textarea>
<input type="checkbox">
<input type="radio">
<select>
x-model.lazy 焦点离开触发，比如验证注册用户名和邮箱是否重复以及符合条件
<input type="text" x-model.lazy="username">
<span x-show="username.length > 20">The username is too long.</span>x-model 会将任何数据转为字符串类型，可以添加 x-model.number 转换为数字类型
<input type="text" x-model.number="age">
<span x-text="typeof age"></span>.debounce 同样防抖动，比如搜索框延迟请求数据，可自定义时间
.throttle 同样可用
<input type="text" x-model.debounce="search">通过在元素商添加 x-ref 值，可以在别处轻松的设置和获取 x-model 值
el._x_model.get() （返回绑定属性的值）
el._x_model.set() （设置绑定属性的值）
<div x-data="{ username: 'calebporzio' }">
<div x-ref="div" x-model="username"></div>
<button @click="$refs.div._x_model.set('phantomatrix')">
Change username to: 'phantomatrix'
</button>
<span x-text="$refs.div._x_model.get()"></span>
</div>x-for 只能包含一个根目录，参考以下代码
无效
<template x-for="color in colors">
<span>The next color is </span><span x-text="color">
</template>
有效
<template x-for="color in colors">
<p>
<span>The next color is </span><span x-text="color">
</p>
</template>x-ignore 忽略 alpinejs 的特性，以下代码中的中间 div 的 x-text 将不会生效
<div x-data="{ label: 'From Alpine' }">
<div x-ignore>
<span x-text="label"></span>
</div>
</div>添加 x-ref 并在其他元素使用 $refs 来调用它,$refs 指向的是 x-ref = 的元素
<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hello 👋</span>x-cloak 直到 alpinejs 设置了值才显示，防止页面加载后但在 alpinejs 加载前闪现，建议使用 x-if 代替此写法
必须先添加 css
[x-cloak] { display: none !important; }<span x-cloak x-text="message"></span>x-teleport 追加元素到指定元素的后面，相当于 document.querySelector('boody').append
可循环嵌套，注意循环嵌套追加到同一元素之后的是同一层级
<template x-teleport="body">
<div x-show="open">
Modal contents...
</div>
</template>$el 指向当前 dom 节点
<button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>$dispatch 在元素之间传递事件，还可以在不同的 x-data 组件内通信传递
<div @notify="alert('Hello World!')">
<button @click="$dispatch('notify')">
Notify
</button>
</div>
#带数据传递
<div @notify="alert($event.detail.message)">
<button @click="$dispatch('notify', { message: 'Hello World!' })">
Notify
</button>
</div>
#同级别层次用
<div x-data>
<span @notify.window="..."></span>
<button @click="$dispatch('notify')">Notify</button>
</div>$nextTick 事件更新后执行表达式，它返回的是一个 promise 对象
点击后 button 按钮文字由 hello 变成 Hello World!，点击之后控制台输出的是 Hello World!
<div x-data="{ title: 'Hello' }">
<button
@click="
title = 'Hello World!';
$nextTick(() => { console.log($el.innerText) });
"
x-text="title"
></button>
</div>
另一种写法
<div x-data="{ title: 'Hello' }">
<button
@click="
title = 'Hello World!';
await $nextTick();
console.log($el.innerText);
"
x-text="title"
></button>
</div>$data 魔法属性，可以在data以及嵌套区域获取 x-data 属性值
<div x-data="{ greeting: 'Hello' }">
<div x-data="{ name: 'Caleb' }">
<button @click="sayHello($data)">Say Hello</button>
</div>
</div>
<script>
function sayHello({ greeting, name }) {
alert(greeting + ' ' + name + '!')
}
</script>x-text 等可以使用异步函数
async function getLabel() {
let response = await fetch('/api/label')
return await response.text()
}
<span x-text="await getLabel()"></span>
或者直接写为
<span x-text="getLabel"></span>
ac446f46-5842-40c4-b895-a0afb493058f
