阿尔卑斯山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">