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>Submitbutton>
form>

 .stop 也是阻止事件，以下点击按钮不会触发

<div @click="console.log('I will not get logged')">
    <button @click.stop>Click Mebutton>
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 Openbutton>
div>

x-effect  用于监听值并且可以使用表达式

<div x-data="{ open: false }" x-effect="console.log(open)">

x-bind 的简写，例如 :class 条件简写

<div :class="show ? '' : 'hidden'">
<div :class="show || 'hidden'">
 
 
<div :class="closed ? 'hidden' : ''">
<div :class="closed && 'hidden'">

$event 事件对象，和原生 js 里的 event 一样

<button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi
 
 
#代码调用写法
 
<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">Togglebutton>
 
    <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

可循环嵌套，注意循环嵌套追加到同一元素之后的是同一层级

$el 指向当前 dom 节点

<button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"

$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')">Notifybutton>
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