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

最新推荐文章于 2023-11-24 11:04:07 发布

授社

最新推荐文章于 2023-11-24 11:04:07 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： vue react js

本文链接：https://blog.csdn.net/weixin_44028979/article/details/118543224

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装

使用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>