Alpine 快速上手

前端精髓
576 阅读3分钟

写在前面

先放两个官方链接，如果你还不了解这两个框架是什么，你可以点击下面链接看一看。

  1. Alpine：alpinejs.dev/
  2. petite-vue：github.com/vuejs/petit…

对比区别

petite-vue 确实解决了与 Alpine 类似的范围，但目标是更小和与 Vue 更兼容。

  1. petite-vue 大约是 Alpine 的一半大小。
  2. petite-vue 没有过渡系统（状态过渡 transition）。

尽管 Alpine 在很大程度上类似于 Vue 的设计，但在许多情况下其行为与 Vue 本身不同。未来它也可能与 Vue 有更多的分歧，因为 Alpine 可以朝着自己的方向发展。

相比之下，petite-vue 将尽可能与标准 Vue 行为保持一致，以便在需要时减少迁移到标准 Vue 的成本。它宗旨是成为 Vue 生态系统的一部分。

快速上手

首先创建一个html文件，然后复制下面代码到你的编辑器。

<html>
<head>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>

用浏览器打开然后你就可以看到如下效果：

截屏2022-05-04 上午9.56.45.png

x-data

  1. x-data 将一大块 HTML 定义为 Alpine 组件，并为该组件提供响应式数据能力。
  2. x-data指令中定义的属性可用于所有子元素。甚至在其他嵌套 x-data 组件中。
  3. 因为x-data被称为普通的 JavaScript 对象，所以除了状态之外，您还可以存储方法甚至 getter
<div x-data="{
  open: false,
  get isOpen() { return this.open },
  toggle() { this.open = ! this.open },
}">
    <button @click="toggle()">Toggle Content</button>
 
    <div x-show="isOpen">
        Content...
    </div>
</div>

x-init

与生命周期相关，x-init 指令允许您绑定到 Alpine 中任何元素的初始化阶段。有时，您想等到 Alpine 完全完成渲染之后再执行一些代码（mounted）。通过使用 Alpine 的内部$nextTick方法。

<div x-init="$nextTick(() => { ... })"></div>

x-show

x-show 指令它提供了一种显示和隐藏 DOM 元素的功能。如果您想对x-show行为应用平滑过渡，可以将其与x-transition配合使用。

<div x-data="{ open: false }">
  <button x-on:click="open = ! open">Toggle Dropdown</button>

  <div x-show="open" x-transition>
      Dropdown Contents...
  </div>
</div>

Alpine 提供了一个开箱即用的强大的动画效果。默认情况下，x-transition使用的过渡默认值是淡入淡出和缩放显示元素。您可以使用额外的修饰符覆盖这些默认值。

x-effect

effect 响应式地追踪其依赖，并在依赖更改时重新执行，因此每当更改 label 时它都会重新运行。

<body>
  <div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
    <button @click="label += ' World!'">Change Message</button>
  </div>
</body>

x-ignore

默认情况下，Alpine 会抓取并初始化包含 x-init 或 x-data 的元素的整个 DOM 树。如果出于某种原因，您不希望 Alpine 初始化 HTML 的特定部分，则可以使用x-ignore.

<div x-data="{ label: 'From Alpine' }">
  <div x-ignore>
      <span x-text="label"></span>
  </div>
</div>

x-ref

x-ref 结合使用 $refs 是一个有用的获取元素的方式。

<button @click="$refs.text.remove()">Remove Text</button>
 
<span x-ref="text">Hello 👋</span>

x-teleport

通过在 <template> 元素上添加 x-teleport指令，告诉 Alpine 将该元素“附加”到指定的选择器里面。通常被用于 dialog 对话框这样的。

<body>
  <div x-data="{ open: false }">
      <button @click="open = ! open">Toggle Modal</button>

      <template x-teleport="body">
          <div x-show="open">
              Modal contents...
          </div>
      </template>
  </div>

  <div>Some other content placed AFTER the modal markup.</div>

  ...

</body>

其他

由于功能真的是太多啦，我就不一一介绍了，因为大部分功能和 vue 都十分类似，下面的几个指令：

avatar
文章
阅读
粉丝