Alpine.js一个类似jquery、vue的js插件

英文官网地址：https://alpinejs.dev/directives/data

中文文档地址：https://www.alpinejs.cn/

### 安装
```
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
```

### 使用
```
<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

<ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>
```

```
<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>
```

```
<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>
```

### 学习

## 学习 Learn[#](https://www.alpinejs.cn/#学习-learn)

当前共有 14 个指令可用，如下所示：

| 指令                                                    | 描述                                                         |
| ------------------------------------------------------- | ------------------------------------------------------------ |
| [`x-data`](https://www.alpinejs.cn/#x-data)             | 定义一个新的组件作用域。                                     |
| [`x-init`](https://www.alpinejs.cn/#x-init)             | 组件初始化时运行其中的表达式。                               |
| [`x-show`](https://www.alpinejs.cn/#x-show)             | 根据表达式结果（true 或 false）控制元素的 `display: none;`（译者注：控制模块显示/隐藏） |
| [`x-bind`](https://www.alpinejs.cn/#x-bind)             | 将当前属性的值设定为指令中表达式的结果。                     |
| [`x-on`](https://www.alpinejs.cn/#x-on)                 | 向元素上挂载事件监听器。当事件触发时执行其中的表达式。       |
| [`x-model`](https://www.alpinejs.cn/#x-model)           | 向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。 |
| [`x-text`](https://www.alpinejs.cn/#x-text)             | 和 `x-bind` 类似，但更新的是元素的 `innerText`。             |
| [`x-html`](https://www.alpinejs.cn/#x-html)             | 和 `x-bind` 类似，但更新的是元素的 `innerHTML`。             |
| [`x-ref`](https://www.alpinejs.cn/#x-ref)               | 在组件外获取原始 DOM 元素的简便方法。                        |
| [`x-if`](https://www.alpinejs.cn/#x-if)                 | 值为 false 时将从 DOM 中完全移除元素。需要在 `<template>` 标签中使用。 |
| [`x-for`](https://www.alpinejs.cn/#x-for)               | 为数组中的每一项创建一个新的 DOM 节点。需要在 `<template>` 标签中使用。 |
| [`x-transition`](https://www.alpinejs.cn/#x-transition) | 用于在过渡（CSS Translation）的各个阶段中为元素添加 class 的指令。 |
| [`x-spread`](https://www.alpinejs.cn/#x-spread)         | 为了更好的复用，可以绑定一个带有 Alpine 指令（作为 key）的对象到元素上。 |
| [`x-cloak`](https://www.alpinejs.cn/#x-cloak)           | 这一属性会在 Alpine 初始化完成后被移除，可以用来隐藏未初始化的 DOM。 |

以及 6 个魔法属性：

| 魔法属性                                         | 描述                                                         |
| ------------------------------------------------ | ------------------------------------------------------------ |
| [`$el`](https://www.alpinejs.cn/#el)             | 获取根元素的 DOM 节点。                                      |
| [`$refs`](https://www.alpinejs.cn/#refs)         | 获取组件中标记有 `x-ref` 的 DOM 元素。                       |
| [`$event`](https://www.alpinejs.cn/#event)       | 在事件监听器中获取浏览器原生的「Event」对象。                |
| [`$dispatch`](https://www.alpinejs.cn/#dispatch) | 创建一个「CustomEvent」并使用其内部的 `.dispatchEvent()` 方法进行分发。 |
| [`$nextTick`](https://www.alpinejs.cn/#nexttick) | 在 Alpine 做出响应式 DOM 更新后，执行一个给出的表达式。      |
| [`$watch`](https://www.alpinejs.cn/#watch)       | 当监听的组件属性发生变化时，触发给定的回调函数。             |

### 抽离组件逻辑

你可以把数据（以及行为）通过一个可复用的函数抽离出来：

```
<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

<div x-show="isOpen()" x-on:click.away="close">
        // Dropdown
    </div>
</div>

更多请关注官网

注:原创不易,转载请注明出处( https://micuu.com/new/3085.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。