一个网站有多个域名,中介网站模板,做外语网站的公司,重庆知名网站建设免费建议有 js 基础#xff0c;先阅读官网文档#xff0c;如果您会 vue 类似框架#xff0c;上手会更快
https://alpinejs.dev js 代码中可以使用 Alpine.sore 定义全局数据
Alpine.store(tabs, {current: first,items: [first, second, third],
})
x-text 可以运算任何 js 表…建议有 js 基础先阅读官网文档如果您会 vue 类似框架上手会更快
https://alpinejs.dev js 代码中可以使用 Alpine.sore 定义全局数据
Alpine.store(tabs, {current: first,items: [first, second, third],
})
x-text 可以运算任何 js 表达式
span x-text1 2/span
submit.prevent 阻止浏览器提交表单
form submit.prevent....../formform submit.preventconsole.log(submitted) action/foobuttonSubmit/button
/form .stop 也是阻止事件以下点击按钮不会触发
div clickconsole.log(I will not get logged)button click.stopClick 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 clickopen ! openToggle Open/button
/div
x-effect 用于监听值并且可以使用表达式
div x-data{ open: false } x-effectconsole.log(open)
x-bind 的简写例如 :class 条件简写
div :classshow ? : hidden
!-- Is equivalent to: --
div :classshow || hiddendiv :classclosed ? hidden :
!-- Is equivalent to: --
div :classclosed hidden
$event 事件对象和原生 js 里的 event 一样
button clickalert($event.target.getAttribute(message)) messageHello WorldSay Hi/button#代码调用写法button clickhandleClick.../buttonscriptfunction handleClick(e) {// Now you can access the event object (e) directly}
/script
.outside 很方便点击元素之外触发
div x-data{ open: false }button clickopen ! openToggle/buttondiv x-showopen click.outsideopen falseContents.../div
/div
.window 添加到事件后监听的是根对象以下示例将侦听页面任何位置按下的转义键
div keyup.escape.window....../div
.once 添加到事件后只调用一次
button click.onceconsole.log(I will only log once).../button
.debounce 延迟防抖动比如输入框填写文字后一定时间后触发
input input.debounce.500msfetchResults .throttle 和 debounce 一样但是只触发一次可以自定义时间
div scroll.window.throttlehandleScroll.../div
.self 确保点击的的是自己而不是子元素
button click.selfhandleClickClick Meimg src...
/button
x-model 适用于以下 input
input typetext
textarea
input typecheckbox
input typeradio
selectx-model.lazy 焦点离开触发比如验证注册用户名和邮箱是否重复以及符合条件
input typetext x-model.lazyusername
span x-showusername.length 20The username is too long./span
x-model 会将任何数据转为字符串类型可以添加 x-model.number 转换为数字类型
input typetext x-model.numberage
span x-texttypeof age/span
.debounce 同样防抖动比如搜索框延迟请求数据可自定义时间
.throttle 同样可用
input typetext x-model.debouncesearch
通过在元素商添加 x-ref 值可以在别处轻松的设置和获取 x-model 值
el._x_model.get() 返回绑定属性的值el._x_model.set() 设置绑定属性的值div x-data{ username: calebporzio }div x-refdiv x-modelusername/divbutton click$refs.div._x_model.set(phantomatrix)Change username to: phantomatrix/buttonspan x-text$refs.div._x_model.get()/span
/div
x-for 只能包含一个根目录参考以下代码
无效template x-forcolor in colorsspanThe next color is /spanspan x-textcolor
/template有效template x-forcolor in colorspspanThe next color is /spanspan x-textcolor/p
/template
x-ignore 忽略 alpinejs 的特性以下代码中的中间 div 的 x-text 将不会生效
div x-data{ label: From Alpine }div x-ignorespan x-textlabel/span/div
/div
添加 x-ref 并在其他元素使用 $refs 来调用它,$refs 指向的是 x-ref 的元素
button click$refs.text.remove()Remove Text/buttonspan x-reftextHello /span
x-cloak 直到 alpinejs 设置了值才显示防止页面加载后但在 alpinejs 加载前闪现建议使用 x-if 代替此写法
必须先添加 css
[x-cloak] { display: none !important; }
span x-cloak x-textmessage/span
x-teleport 追加元素到指定元素的后面相当于 document.querySelector(boody).append
可循环嵌套注意循环嵌套追加到同一元素之后的是同一层级 template x-teleportbodydiv x-showopenModal contents.../div/template
$el 指向当前 dom 节点
button click$el.innerHTML Hello World!Replace me with Hello World!/button
$dispatch 在元素之间传递事件还可以在不同的 x-data 组件内通信传递
div notifyalert(Hello World!)button click$dispatch(notify)Notify/button
/div#带数据传递div notifyalert($event.detail.message)button click$dispatch(notify, { message: Hello World! })Notify/button
/div#同级别层次用div x-dataspan notify.window.../spanbutton click$dispatch(notify)Notify/button
/div $nextTick 事件更新后执行表达式它返回的是一个 promise 对象 点击后 button 按钮文字由 hello 变成 Hello World!点击之后控制台输出的是 Hello World!
div x-data{ title: Hello }buttonclicktitle Hello World!;$nextTick(() { console.log($el.innerText) });x-texttitle/button
/div另一种写法
div x-data{ title: Hello }buttonclicktitle Hello World!;await $nextTick();console.log($el.innerText);x-texttitle/button
/div
$data 魔法属性可以在data以及嵌套区域获取 x-data 属性值
div x-data{ greeting: Hello }div x-data{ name: Caleb }button clicksayHello($data)Say Hello/button/div
/divscriptfunction sayHello({ greeting, name }) {alert(greeting name !)}
/script
x-text 等可以使用异步函数
async function getLabel() {let response await fetch(/api/label)return await response.text()
}span x-textawait getLabel()/span或者直接写为span x-textgetLabel/span
