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

魔术属性

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

事件修饰符

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

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

x-text指令用于直接输出纯文本，不会编译为 HTML代码。

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

x-html

x-html指令用于直接输出文本，但会渲染HTML代码。

<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" />