Alpine.js 精简重

建议有 js 基础,先阅读官网文档,如果您会 vue 类似框架,上手会更快

https://alpinejs.dev

js 代码中可以使用 Alpine.sore 定义全局数据

Alpine.store('tabs', {current: 'first',items: ['first', 'second', 'third'],
})

x-text 可以运算任何 js 表达式

<span x-text="1 + 2"></span>

@submit.prevent 阻止浏览器提交表单

<form @submit.prevent="...">...</form><form @submit.prevent="console.log('submitted')" action="/foo"><button>Submit</button>
</form>

 .stop 也是阻止事件,以下点击按钮不会触发

<div @click="console.log('I will not get logged')"><button @click.stop>Click Me</button>
</div>

$watch 用于监听更改变化的值,需要使用回调添加第二个参数访问变化之前的值

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))"><div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))"><button @click="open = ! open">Toggle Open</button>
</div>

x-effect  用于监听值并且可以使用表达式

<div x-data="{ open: false }" x-effect="console.log(open)">

x-bind 的简写,例如 :class 条件简写

<div :class="show ? '' : 'hidden'">
<!-- Is equivalent to: -->
<div :class="show || 'hidden'"><div :class="closed ? 'hidden' : ''">
<!-- Is equivalent to: -->
<div :class="closed && 'hidden'">

$event 事件对象,和原生 js 里的 event 一样

<button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button#代码调用写法<button @click="handleClick">...</button><script>function handleClick(e) {// Now you can access the event object (e) directly}
</script>

.outside 很方便,点击元素之外触发

<div x-data="{ open: false }"><button @click="open = ! open">Toggle</button><div x-show="open" @click.outside="open = false">Contents...</div>
</div>

.window 添加到事件后,监听的是根对象,以下示例将侦听页面任何位置按下的转义键

<div @keyup.escape.window="...">...</div>

.once 添加到事件后只调用一次

<button @click.once="console.log('I will only log once')">...</button>

.debounce 延迟,防抖动,比如输入框填写文字后一定时间后触发

<input @input.debounce.500ms="fetchResults">

 .throttle 和 debounce  一样,但是只触发一次,可以自定义时间

<div @scroll.window.throttle="handleScroll">...</div>

.self 确保点击的的是自己,而不是子元素

<button @click.self="handleClick">Click Me<img src="...">
</button>

x-model 适用于以下 input

<input type="text">
<textarea>
<input type="checkbox">
<input type="radio">
<select>

 x-model.lazy 焦点离开触发,比如验证注册用户名和邮箱是否重复以及符合条件

<input type="text" x-model.lazy="username">
<span x-show="username.length > 20">The username is too long.</span>

x-model 会将任何数据转为字符串类型,可以添加 x-model.number 转换为数字类型

<input type="text" x-model.number="age">
<span x-text="typeof age"></span>

.debounce 同样防抖动,比如搜索框延迟请求数据,可自定义时间

.throttle 同样可用

<input type="text" x-model.debounce="search">

通过在元素商添加 x-ref 值,可以在别处轻松的设置和获取 x-model 值

el._x_model.get() (返回绑定属性的值)el._x_model.set() (设置绑定属性的值)<div x-data="{ username: 'calebporzio' }"><div x-ref="div" x-model="username"></div><button @click="$refs.div._x_model.set('phantomatrix')">Change username to: 'phantomatrix'</button><span x-text="$refs.div._x_model.get()"></span>
</div>

x-for 只能包含一个根目录,参考以下代码

无效<template x-for="color in colors"><span>The next color is </span><span x-text="color">
</template>有效<template x-for="color in colors"><p><span>The next color is </span><span x-text="color"></p>
</template>

x-ignore 忽略 alpinejs 的特性,以下代码中的中间 div 的 x-text 将不会生效

<div x-data="{ label: 'From Alpine' }"><div x-ignore><span x-text="label"></span></div>
</div>

添加 x-ref 并在其他元素使用 $refs 来调用它,$refs 指向的是 x-ref = 的元素

<button @click="$refs.text.remove()">Remove Text</button><span x-ref="text">Hello 👋</span>

x-cloak 直到 alpinejs 设置了值才显示,防止页面加载后但在 alpinejs 加载前闪现,建议使用 x-if 代替此写法

必须先添加 css

[x-cloak] { display: none !important; }
<span x-cloak x-text="message"></span>

x-teleport 追加元素到指定元素的后面,相当于 document.querySelector('boody').append

可循环嵌套,注意循环嵌套追加到同一元素之后的是同一层级

        <template x-teleport="body"><div x-show="open">Modal contents...</div></template>

$el 指向当前 dom 节点

<button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>

$dispatch 在元素之间传递事件,还可以在不同的 x-data 组件内通信传递

<div @notify="alert('Hello World!')"><button @click="$dispatch('notify')">Notify</button>
</div>#带数据传递<div @notify="alert($event.detail.message)"><button @click="$dispatch('notify', { message: 'Hello World!' })">Notify</button>
</div>#同级别层次用<div x-data><span @notify.window="..."></span><button @click="$dispatch('notify')">Notify</button>
</div>

 $nextTick 事件更新后执行表达式,它返回的是一个 promise 对象


点击后 button 按钮文字由 hello 变成 Hello World!,点击之后控制台输出的是 Hello World!
<div x-data="{ title: 'Hello' }"><button@click="title = 'Hello World!';$nextTick(() => { console.log($el.innerText) });"x-text="title"></button>
</div>另一种写法
<div x-data="{ title: 'Hello' }"><button@click="title = 'Hello World!';await $nextTick();console.log($el.innerText);"x-text="title"></button>
</div>

$data 魔法属性,可以在data以及嵌套区域获取 x-data 属性值

<div x-data="{ greeting: 'Hello' }"><div x-data="{ name: 'Caleb' }"><button @click="sayHello($data)">Say Hello</button></div>
</div><script>function sayHello({ greeting, name }) {alert(greeting + ' ' + name + '!')}
</script>

x-text 等可以使用异步函数

async function getLabel() {let response = await fetch('/api/label')return await response.text()
}<span x-text="await getLabel()"></span>或者直接写为<span x-text="getLabel"></span>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/112395.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu16.04下标定Astra相机

ubuntu16.04下标定Astra相机 1.安装相机驱动 rosrun camera_calibration cameracalibrator.py --size 7x5 --square 0.018 image:/camera/rgb/image_raw camera:/camera/rgb 2.下载camere_calibration 3.进行标定 打开终端&#xff0c;输入 roslaunch astra_launch astrap…

从入门到进阶 之 ElasticSearch 配置优化篇

&#x1f339; 以上分享从入门到进阶 之 ElasticSearch 配置优化篇&#xff0c;如有问题请指教写。&#x1f339;&#x1f339; 如你对技术也感兴趣&#xff0c;欢迎交流。&#x1f339;&#x1f339;&#x1f339; 如有需要&#xff0c;请&#x1f44d;点赞&#x1f496;收藏…

浏览器不能访问阿里云ECS

一、浏览器不能访问端口 在阿里云ECS中构建了工程&#xff0c;nigix或者tomcat或者其他&#xff0c;然后在本地浏览器访问ip端口的时候&#xff0c;连接超时&#xff0c;解决办法&#xff1a; 进入阿里云ECS服务 -> 查看公网ip (外部连接需要使用公网) -> 进入ECS实例的…

攻防世界web篇-cookie

看到cookie立马就会想到F12键看cookie的一些信息 我这个实在存储里面看的&#xff0c;是以.php点缀结尾&#xff0c;可以试一下在链接中加上.php 得到的结果是这样 这里&#xff0c;我就只能上csdn搜索一下了&#xff0c;看到别人写的是在get请求中可以看到flag值

Mysql 约束,基本查询,复合查询与函数

文章目录 约束空属性约束默认值约束zerofill主键约束自增长约束唯一键约束外键约束 查询select的执行顺序单表查询排序 updatedelete整张表的拷贝复合语句group by分组查询 函数日期函数字符串函数数学函数其他函数 复合查询合并查询union 约束 空属性约束 两个值&#xff1a…

Windows安装Jenkins

JDK 11 以上 https://github.com/adoptium/temurin11-binaries/releases/download/jdk-11.0.20%2B8/OpenJDK11U-jdk_x64_windows_hotspot_11.0.20_8.msi https://www.jenkins.io/download/ 下载windows安装版本 授权用户administrator logon as services windows(server)安装…

操作系统【OS】中断和异常

异常&#xff08;内中断&#xff09; 中断&#xff08;外中断&#xff09; 基本概念 由CPU执行指令内部产生的事件内中断都是不可屏蔽中断&#xff0c;一旦出现&#xff0c;就要立即处理。 由来自CPU外部的设备发出的中断请求&#xff08;常用于输入输出&#xff09;典型的由…

element-ui 以CDN 方式引入原生js开发的几个别坑 (+vue)

element-ui 以CDN 方式引入原生js开发的几个坑 最近两个月太忙了 忙的没空写文章 两个月赶出来了几个的项目 一个是雪佛兰裸眼3D的一个商品屏幕展示项目 一个是广汽云渲染的一个云看车项目 一个是奥迪中国充电桩的网页开发项目&#xff0c; 奥迪中国做个饭也是目前正在做的 不…

机器人SLAM与自主导航

机器人技术的迅猛发展&#xff0c;促使机器人逐渐走进了人们的生活&#xff0c;服务型室内移动机器人更是获得了广泛的关注。但室内机器人的普及还存在许多亟待解决的问题&#xff0c;定位与导航就是其中的关键问题之一。在这类问题的研究中&#xff0c;需要把握三个重点&#…

Python 打包whl文件Setup参数

setup 函数常用的参数如下 参数说明name包名称version包版本author程序的作者author_email程序的作者的邮箱地址maintainer维护者maintainer_email维护者的邮箱地址url程序的官网地址license程序的授权信息description程序的简单描述long_description程序的详细描述platforms程…

专题:链表常考题目汇总

文章目录 反转类型&#xff1a;206.反转链表完整版二刷记录 25. K个一组反转链表1 &#xff1a;子链表左闭右闭反转版本2 &#xff1a; 子链表左闭右开反转版本&#xff08;推荐&#xff09;⭐反转链表左闭右闭和左闭右开 合并类型&#xff1a;21.合并两个有序链表1: 递归法2: …

10月19日,每日信息差

今天是2023年10月19日&#xff0c;以下是为您准备的17条信息差 第一、中国海洋石油遭南向资金净卖出2.38亿港元 第二、阅文集团侯晓楠&#xff1a;网文已经成为中国文化的一张全球名片。据了解&#xff0c;2022年以来&#xff0c;阅文已经在海外上线了自制的300多部动漫影视作…

作为决策者,谁能拒绝这样一张数据可视化报表

数据分析是决策的一大助力&#xff0c;因此作为企业的管理决策者都会希望获得一份直观易懂、支持灵活自助分析的数据可视化报表&#xff0c;比如说由奥威BI数据可视化软件制作的这张BI报表。 名称&#xff1a;零售业数据分析驾驶舱 来源&#xff1a;奥威BI零售数据分析方案 …

pnpm的环境安装以及安装成功后无法使用的问题

文章目录 前言1、使用npm 安装2、安装后的注意点3、遇到问题4、配置path的环境变量&#xff08;1&#xff09;找到环境变量&#xff08;2&#xff09;找到并双击path的系统变量&#xff08;3&#xff09;复制第1步中使用npm安装的红框部分的路径&#xff08;4&#xff09;将第&…

【MySql】8- 实践篇(六)

文章目录 1. MySql保证主备一致1.1 MySQL 主备的基本原理1.2 binlog 的三种格式对比1.3 循环复制问题 2. MySql保证高可用2.1 主备延迟2.2 主备延迟的来源2.3 可靠性优先策略2.4 可用性优先策略 3. 备库为何会延迟很久-备库并行复制能力3.1 MySQL 5.6 版本的并行复制策略3.2 Ma…

编译安装Nginx+GeoIP2自动更新+防盗链+防爬虫+限制访问速度+限制连接数

此文章是Nginx的GeoIP2模块和MaxMind国家IP库相互结合&#xff0c;达到客户端IP访问的一个数据记录以及分析&#xff0c;同时还针对一些业务需求做出对Nginx中间件的控制&#xff0c;如&#xff1a;防盗链、防爬虫、限制访问速度、限制连接数等 该篇文章是从一个热爱搞技术的博…

他海投260万未回本,一天手写200面单到效率提升200%,经历了什么

他们是时代里的“小人物”&#xff0c;正经历着最为蓬勃的商业变革。年轻一代的创业老板们站在十字路口上&#xff0c;比老一辈更懂直播风口、人工智能、云计算、智能制造、数字经济等经济热词的含义。 作为北京快递行业内少见的本地人&#xff0c;范小菲形容自己的创业历程是…

使用Java生成玫瑰花代码

抖音最近爆火的玫瑰花示例代码 ***************- ;* ; : …

YOLOv8改进实战 | 更换主干网络Backbone(一)之轻量化模型Ghostnet

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法&#xff1a; 网络剪枝&#xff1a;移除神经网络中冗余的连接和参数&#xff0c;以达到模型压缩和加速的目的。分组卷积&#xff1a;将卷积操作分解为若干个…

Vue3+TS中的shims-vue.d.ts文件的作用及代码说明

在Vue3中安装TypeScript后&#xff0c;会出现一个shims-vue.d.ts文件&#xff0c;那么它是干什么的&#xff0c;起着什么作用呢&#xff1f; shims-vue.d.ts是为了typescript做的适配定义文件&#xff0c;因为.vue文件不是一个常规的文件类型&#xff0c;TypeScript是不能理解…