Alpine.js 基本使用 快来0成本get新技能

安装

使用cdn引入

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

Alpine.js 的语法几乎完全借用自 Vue （并用 Angular 的语法做了些扩展）。在此由衷感谢他们对 Web 世界的贡献。

x-data 将定义一个新的组件作用域。它将通知框架初始化带有传入数据的一个新组件。
类似 Vue 组件中的 data 属性。

hello world

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

:key绑定时可选的，但是强烈推荐，使用它在列表渲染中是必要的。
x-for 可以用于为数组中的每一项创建一个新的 DOM 节点。这一特性与 Vue 中的 v-for 非常类似，他也需要在 template 标签上使用，不能是普通的 DOM 元素。

循环一个列表

 <div x-data="{listdata:[{name:'小明'},{name:'小红'}]}">
       <ul>
           <template x-for="(item, index,collection) in listdata" :key="index">
                    <div x-text="item.name"></div>
            </template>
       </ul>
 </div>

click事件 动态绑定class

 <div x-data="{num:1}">
       <button @click='num++' >+</button>
       <span :class="num<10?'red':'green'"  x-text='num' ></span>
       <button @click='num--' >-</button>
 </div>

抽离组件逻辑

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>
    <div x-show="isOpen()" x-on:click.away="close"> </div>
</div>

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

以上为大家展示了一些常用的指令
相信对vue或react了解的人应该一眼都能看懂 具体内容可以去官网查看哦 0成本get新技能

中文官网地址 https://www.alpinejs.cn/

平时用来写一些活动页也蛮不错的