阿尔卑斯山JS？？AlpineJS入门

简介

最近发现了一个好玩的框架，叫做AlpineJS，它是类似于Vue或者React这样的组件化开发框架，但是它更加轻量，下面是它的github地址

https://github.com/alpinejs/alpine

Scrimba上的视频教程

https://scrimba.com/g/galpinejs

它更适合于在现有的项目里的某个部分应用组件（Vue和React也可以在某个部位适用，但是总感觉有点大），它有种拿来即用的感觉

小例子

先忽视安装步骤，直接看下面这个小例子

<div x-data="{ word: 'hello world' }">
	<h1 x-text="word"></h1>
</div>	

它的语法是从Vue里借鉴过来的，几乎和Vue一样，但是它是以指令为基础，没有什么{{}}这样的语法，并且指令是以x-开头的，不是Vue的v-开头。
上面的那个例子中，你可以理解为，带有x-data指令的标签容器，就相当于一个组件，在组件内部可以通过其他x-指令去运用x-data里的数据，做声明式的渲染操作。
看起来是不是很方便，官方说有点类似于javascript的tailwind CSS（如果你用过tailwind CSS你应该知道，这种工具式的开发特别爽）。
接下来看下一些常见的功能，它是怎么使用的。

如果想知道怎么安装的话直接去文档上看

如果你学过Vue，那么下面这些指令和Vue几乎一样，你也会知道其用法

文本渲染

• x-text
  直接输出纯文本，不会编译HTML代码，如上面的例子

  <div x-data="{ word: 'hello world' }">
  	<h1 x-text="word"></h1>
  </div>	
  

• x-html
  和第一个一样，但是会渲染HTML

  <div x-data="{ word: '<h1>helloworld</h1>' }">
  	<div x-html="word"></div>
  </div>	
  

双向绑定

• x-model

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

条件渲染

• x-if
• x-show

  <div x-data="{isShow:false}">
    <div x-show="isShow">something hiddened</div>
  </div>
  

列表渲染

• x-for

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

事件监听

• x-on:or@

<div x-data="{isShow:true}">
  <button @click="isShow = !isShow">show</button>
  <div x-show="isShow">
  	jsut a panel
  </div>
</div>

AlpineJS的事件监听修饰器和Vue的有些不同，除了这几个

• .stop
• .prevent
• .once

还有下面这些键盘事件

• @keydown.enter
• @keydown.escape
• @keydown.arrow-up
• 等等…

下面介绍些Alpine特有的

事件修饰符

• .away
  这个很好用，当事件绑定对象之外的元素触发对应事件时，会调用监听函数。比如：

<div x-data="{isShow:true}">
   <div @click.away="isShow = false" x-show="isShow">
      点我之外的元素来把我隐藏
   </div>
</div>

• .window

这个也很棒，对事件加上.window修饰符后，该事件会绑定在window这个全局对象上，而不是事件所在的DOM节点，这样，我们很轻松地来添加一些全局事件如resize，比如：

<div x-data="{isShow:true}">
  <div 
  	x-show="isShow" 
  	@resize.window="isShow=window.outerWidth>768?false:true">
  	hello world
  </div>
</div>

初始化函数

• x-init
  类似于Vue的mounted，在组件挂载到DOM后触发

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

总结

AlpineJS还有很多功能，我不想像文档那样一个个列出来，我只是列出一些让大家感受下。怎么样？AlpineJS是不是很有趣，它可以快速地在局部实现功能性组件，对于快速封装下拉菜单，模态框，滑动侧边栏等具有功能性的组件有种便捷性。但是我目前还不知道如果把其整合到项目里，后再研究了