AlpineJS

Alpine.js提供大型框架诸如Vue、React等的反应性和声明性的组件化开发框架，可保留自己的DOM并按照自定义最合适的方式操作行为。

Alpine.js可理解JavaScript的Tailwind，Alpine.js中的Alpine意为阿尔卑斯山。

Alpine的语法几乎完全来自Vue.js，共有13条指令，可用于快速构建应用。

Alpine.js和Vue、jQuery一样，无需任何构建过程。与Vue不同之处在于Alpine胡hi初始化自身，因此无需创建实例，只需加载即可。

特性

Alpine创造者Caleb Poizio称Alpine.js提供了“疯狂的小尺寸功能，无需安装NPM”。

• 没有虚拟DOM可以接管DOM
• 极简 不适用于大型SPA单页应用程序
• 灵活 单独JS文件

安装

Github地址

https://github.com/alpinejs/alpine

CDN地址

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

NPM安装

$ npm i -S alpinejs

指令

Alpine.js语法借鉴之Vue.js，以指令为基础，指令以x-开头。

指令	描述
x-data	声明一个新的组件范围
x-init	当一个组件被初始化时运行指定的表达式，类似Vue中的mounted在组件挂载到DOM后触发。
x-bind	将属性值设置为JS表达式的结果
x-model	为元素添加双向绑定，使输入元素与组件数据保持同步。
x-text	工作原理类似x-bind不同之处会更新元素的innerText属性
x-html	工作元素类似x-bind不同之处会更新元素的innerHTML属性
x-ref	快捷地从组件中获取元素的DOM元素
x-on	为元素添加一个事件监听器，在触发监听事件后执行JS表达式。
x-if	从DOM中完全删除一个元素，需在<template>标记上使用。
x-show	根据表达式的布尔值在元素上切换display:none/block属性值
x-for	遍历数组，为象每个数组项目创建新的DOM节点，需在<template>标记中使用。
x-transition	元素过渡指令
x-clock	在Alpine初始化时将被移除，用于隐藏预初始化的DOM。

类别	指令
文本渲染	x-text、x-html
双向绑定	x-model
条件渲染	x-if、x-show
列表渲染	x-for
事件监听	x-on、@
初始化	x-init
转场	x-transition

x-data

x-data指令用于声明一个新的组件的作用域范围，类似Vue组件中的data属性。

例如：点击显示隐藏

<div x-data="{show:false}">
  <button x-on:click="show = true">点击</button>
  <div x-show="show" x-on:click.way="show = false">显示区域</div>
</div>

将数据与行为提取到可重用的函数中

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

<div x-data="dropdown()">
  <button x-on:click="open">打开</button>
  <div x-show="isOpen()" x-on:click.way="close">显示区域</div>
</div>

<script>
function dropdown(){
  return {
    show:false,
    open(){
      this.show = true;
    },
    close(){
      this.show = false;
    },
    isOpen(){
      return this.show === true; 
    }
  }
}
</script>

例如：点击切换

<div x-data="{tab:'tab1'}">  
  <button :class="{'active': tab === 'tab1'}" @click="tab = 'tab1'">tab1</button>
  <button :class="{'active': tab === 'tab2'}" @click="tab = 'tab2'">tab2</button>
  <div x-show="tab === 'tab1'">tab1 content</div>
  <div x-show="tab === 'tab2'">tab2 content</div>
</div>

例如：鼠标滑过加载文件，点击后显示区域。

<div x-data="{show:false}">
  <button @click="show = true" @mouseenter.once="fetch('/content.html').then(res=>res.text()).then(html=>$refs.content.innerHTML = html)">load</button>
  <div x-show="show" x-refs="content" @click.away = "show = false">
    loading spinner...
  </div>
</div>

x-init

x-init指令会在组件初始化时运行指定表达式，若希望在Alpine对DOM进行初始化更新后在运作程序，可从x-init中定义一个回调函数。类似于Vue中的mounted()钩子函数，在组件挂载到DOM后触发。

<div x-data="{text:'hello'}" x-init="alert('hello')">
  <div x-text="text"></div>
</div>

x-bind

<input x-bind:[attribute] = "[expression]" />

x-bind指令可使用简写的:语法，x-bind将一个属性值设定为JavaScript运算表达式的最终结果，这个表达式可以存储组件的数据对象data中的所有键，而且每次更新数据数据时都会同步更新。

用于class属性的x-bind指令

当x-bind指令绑定class属性使用时行为有所不同，对于class属性会传入一个对象，对象的键是class而值是布尔表达式，以用于确定元素是否应用此class。

例如：当show属性值为true时类名hidden才会被 应用

<div x-data="{show:false}">
  <div x-bind:class="{'hidden':show}"></div>
</div>

x-bind指令支持元素boolean属性

x-bind指令支持与数值属性相等的布尔属性，可使用变量作为条件或可解析为true或false的JavaScript表达式。

常见符合HTML规范的布尔属性包括disabled、readonly、required、checked、hidden、selected、open等。

例如：使用自定义disabled布尔变量来控制添加或删除按钮的disabled属性

<div x-data="{disabled:true}">
  <button x-bind:disabled="disabled">click 1</button>
  <button disabled="disabled">click 2</button>
  <button>click 3</button>
</div>

x-text

<span x-text= "[expression]"></span>

• x-text指令用于直接输出纯文本，不会编译为 HTML代码。
• x-text指令的工作原理与x-bind类似，只是x-text不会更新元素的值，而是更新元素的innerText。

<div x-data="{title:'page title'}">
  <h1 x-text="title"></h1>
</div>

x-html

<span x-html="[expression]"></span>

• x-html指令用于直接输出文本，但会渲染HTML代码。
• x-html指令的工作原理类似x-bind，只是不会更新元素的值，而是更新元素的innerHTML。
• 若使用第三方内容动态生成HTML将会导致XSS漏洞的发生

<div x-data="{title:'<h1>page title</h1>'}">
  <div x-html="title"></div>
</div>

x-model

x-model指令用于双向数据绑定

<div x-data="{title:'hello world'}">
  <input type="text" x-model="title">
  <div x-text="title"></div>
</div>

修饰器x-model.debounce用于允许为事件处理程序添加延迟执行机制，即事件处理程序将不会立即被运行，它会自事件触发后等待一段事件后才会开始运行。当处理程序准备还被调用时，最后一个处理程序的调用将被执行。预设的debounce等待时间为250毫秒，若需要自定义等待事件可使用。

<input x-model.debounce.750 = "search" />
<input x-model.debounce.750ms = "search" />

x-show

<div x-show="[expression]"></div>

x-show指令用于条件渲染，指令值为布尔类型true或false，根据布尔值会在元素上切换显示CSS的display属性值是否为none。

<div x-data="{show:false}">
  <div x-show="show">show area</div>
</div>

x-if

<template x-if="[expression]"></template>

x-if指令用于条件渲染，但仅限用于<template>标签中拥有根元素的情况下，x-if标签可以从DOM中完全删除元素，因为Alpine不是使用的虚拟DOM。

<div x-data="{show:false}">
  <template x-if="show">
    hello
  </template>
</div>

x-for

x-for指令用于列表的渲染，可为数组中每个子项创建新的DOM节点，与Vue中的v-for指令类似，适用于<template>模板标记中，而非常规DOM元素中。

<div x-data="{list:[1,2,3]}">
  <ul>
  <template x-for="item in list" :key="item">
    <li x-text="item"></li>
  </template>
  </ul>
</div>

<div x-data="{list:[{name:'alice'}, {name:'ben'}]}">
  <ul>
  <template x-for="(item, index) in list" :key="index">
    <li>
      <span x-text="index"></span>
      <span x-text="item.name"></span>
    </li>
  </template>
  </ul>
</div>

• x-for指令必须使用在<template>模板标记拥有根元素的情形下
• x-for指令支持嵌套，但必须将每个循环都包含在元素中。

<div x-data="{list:[{name:'alice', ls:[1,2,3]}, {name:'ben', ls:[1,2,3]}]}">
  <ul>
  <template x-for="(item, index) in list" :key="index">
    <li>
      <span x-text="index"></span>
      <span x-text="item.name"></span>
      <template x-for="v in item.ls">
        <span x-text="v"></span>
      </template>
    </li>
  </template>
  </ul>
</div>

x-ref

x-ref指令提供从组件中检索原始DOM元素的便捷方式，通过在元素上设置x-ref属性可使其对名为$refs的对象内的所有事件处理程序都可用。这种方式可有效地替代设置id属性以及使用document.querySelector获取id属性。

<div x-ref="name"></div>
<button x-on:click="$refs.name.innerText = 'hello'">click</button>

x-cloak

<style>
[x-cloak]{display:none;}
</style>

<div x-data="{name:'junchow'}" x-cloak></div>

当Alpine初始化后，x-cloak属性会从元素上被移除。对于隐藏预先初始化的DOM元素很有用。

x-on

x-on指令可使用简化的@语法，比如@click=""。

<button x-on:[event] = "[expression]">click</button>

x-on指令将事件监听器添加到所声明的元素上，当触发对应事件时将执行它所设置的JavaScript表达式的值。如果在表达式中修改了任何数据，都将会更新到“绑定”到此数据的其它元素的属性中。

事件修饰符

事件修饰器只能添加在x-on指令上

事件修饰符	描述
.away	当事件绑定的对象之外的元素触发对应事件时调用的监听函数
.window	将事件绑定在window全局对象上，而非事件所在的DOM节点。

事件修饰器	描述
.away	事件处理器只有在事件源为非自身或子项时才会被执行
.prevent	在触发事件时调用preventDefault函数以取消元素默认行为
.stop	在触发事件时调用stopPropagation函数以阻止事件冒泡
.self	只有当$event.target是元素本身时，.self才会触发事件处理程序。
.window	将事件监听器加入到全局的window对象中而非当前DOM节点上
.once	保证事件监听器只会被处理依次
.debounce	事件处理器延迟执行

转场修饰器

x-show.transition提供的修饰器可方便地使用CSS控制转场过渡效果，若想禁止使用可直接使用x-show.immediate修饰器。

转场修饰器	描述
x-show.transition	开启转场过渡效果
x-show.immediate	禁止转场过渡效果

x-show.transition修饰器默认为同步淡出与缩放效果

opacity
scale:0.95
timing-function:cubic-bezier(0.4, 0.0, 0.2, 1)
duration-in: 150ms
duration-out: 75ms

转场修饰器指令	描述
x-show.transition.in	只在进入时转场
x-show.transition.out	只在退出时转场
x-show.transition.opacity	只使用淡出效果
x-show.transition.scale	只使用缩放效果
x-show.transition.scale.75	自定义CSS缩放比例transform: scale(.75)
x-show.transition.duration.200ms	将进入转场设定为200ms，退出时会自动设置为进入时的一般即100ms。
x-show.transition.origin.top.right	自定义CSS转场起始点为transform-origin: top right
x-show.transition.in.duration.200ms.out.duration.50ms	为进入和退出设置不同的持续时长

转场指令 x-transition

Alpine提供了6种不同的转场指令，用于元素的隐藏和显示状态之间的不同阶段，转场指令可同时与x-show和x-if指令同时使用。

转场指令	描述
x-transition:enter	在整个进入阶段时执行
x-transition:enter-start	在元素插入前添加，在元素插入后删除一帧。
x-transition:enter-end	元素在插入后添加一帧，同时删除enter-start，即在转场或动画结束时删除。
x-transition:leave	在整个退出阶段时执行
x-transition:leave-start	触发离开转场时立即添加，一帧后删除。
x-transition:leave-end	触发离开转场后添加一帧，同时删除leave-start，即在转场或动画结束时删除。

<div x-data="{open:true}">
  <div x-show="open"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0 transform scale-90"
       x-transition:enter-end="opacity-100 transform scale-100"
       x-transition:leave="transition ease-in duration-300"
       x-transition:leave-start="opacity-100 transform scale-100"
       x-transition:leave-end="opacity-0 transform scale-90"
       >
    transition1
  </div>
</div>

魔术属性

魔术属性	描述
$el	检索根组件的DOM节点
$refs	检索组件内被标记为x-ref的DOM元素
$event	检索事件监听器中原生浏览器Event事件
$dispatch	创建一个自定义事件并在内部使用.dispatchEvent()事件进行调度
$nextTick	在Alpine进行响应式DOM更新后执行给定的表达式
$watch	当监听的组件属性被修改时会调用指定回调函数

$el

$el是一个魔术属性，可用于检索根组件的DOM节点。

<div x-data>
  <button @click="$el.innerHTML='hello'">click</button>
</div>

$refs

$refs魔术属性用于检索组件内拥有x-ref指令标记的DOM元素，对于手动操作DOM元素非常有用。

<div x-data>
  <span x-ref="name"></span>
  <button @click="$refs.name.innerText='alice'">click</button>
</div>

$event

$event魔术属性可以在事件监听器种检索本机原生浏览器中的event事件对象

<div x-data>
  <input type="text" @input="alert($event.target.value)"/>
</div>

$dispatch

$dispatch是创建自定义事件CustomEvent并在其内部使用dispatchEvent()分发事件的快捷方法

<div x-data>
  <div @custom-event="alert($event.detail.key)">
    <button @click="$dispatch('custom-event', {key:'hello'})">click</button>
  </div>
</div>

$dispath(eventname, object)中的第二个参数object会透过事件的detail属性来获取$event.detail.attrname，即将自定义的事件数据附加到.detail属性是浏览器中CustomEvent的标准做法。

$nextTick

$nextTick魔术属性允许仅在Alpine完成反应式DOM更新后执行给定的表达式，这对于想要在DOM状态回应数据更新之后，再与之交互的情形中非常有用。

<div x-data="{name:'click'}">
    <button x-text="name" @click="name='test'; $nextTick(_=>alert($event.target.innerText))"></button>
</div>

$watch

$watch魔术属性用于监视组件的属性

<div x-data="{open:false}" x-init="$watch('open', value=>alert(value))">
    <button @click="open=!open">click</button>
</div>