本文主要是介绍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>这篇关于Alpine.js 精简重的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
