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