{"version":"https://jsonfeed.org/version/1.1","title":"JavaScript on Somnia","home_page_url":"https://kkbt0.github.io/Somnia/tags/javascript/","feed_url":"https://kkbt0.github.io/Somnia/tags/javascript/feed.json","authors":[{"name":{"about":"","avatar":"https://ftls.xyz/img/avatar.webp","bio":"浮生若梦 为欢几何","email":"0@ftls.xyz","github":"https://github.com/kkbt0","gravataremail":"","link":"https://www.ftls.xyz","location":"China","name":"恐咖兵糖"}}],"items":[{"title":"Alpine.js 从入门到精通 3 全局与其他","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs3/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs3/","content_text":"\u003ch2 id=\"三全局-globals\"\u003e三、全局 Globals\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一些全局方法和对象，可以在任何地方使用。\u003c/p\u003e\n\u003ch3 id=\"1-alpinedata-可复用数据逻辑\"\u003e1. Alpine.data() 可复用数据逻辑\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e解读\u003c/strong\u003e：\u003ccode\u003eAlpine.data()\u003c/code\u003e 用于定义可复用的数据逻辑，类似于 Vue 的 \u003ccode\u003esetup()\u003c/code\u003e 或 React 的自定义 Hook。\u003c/p\u003e","date_published":"2025-01-01T09:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]},{"title":"Alpine.js 从入门到精通 2 魔法属性","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs2/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs2/","content_text":"\u003ch2 id=\"二魔法属性-magic-properties\"\u003e二、魔法属性 Magic Properties\u003c/h2\u003e\n\u003cp\u003eAlpine.js 提供了一些以 \u003ccode\u003e$\u003c/code\u003e 开头的魔法属性，可以在组件中直接访问。\u003c/p\u003e\n\u003ch3 id=\"1-el-当前元素\"\u003e1. $el 当前元素\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e解读\u003c/strong\u003e：\u003ccode\u003e$el\u003c/code\u003e 指向当前 Alpine 组件的根 DOM 元素。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e示例代码\u003c/strong\u003e：\u003c/p\u003e\n\n\n\n\u003cdiv class=\"astro-code astro-code-themes chroma \" style=\"overflow-x: auto;\"\n    data-language=\"html\"\u003e\n    \u003cpre\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ediv\u003c/span\u003e \u003cspan class=\"na\"\u003ex-data\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;{}\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"na\"\u003eclick\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;console.log($el)\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e查看根元素\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e \u003cspan class=\"err\"\u003e@\u003c/span\u003e\u003cspan class=\"na\"\u003eclick\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;$el.style.backgroundColor = \u0026#39;yellow\u0026#39;\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e改变背景\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ebutton\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003ediv\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n    \u003cspan class=\"language ps-1 pe-3 text-sm bg-muted text-muted-foreground rounded-bl\"\u003ehtml\u003c/span\u003e\n    \u003cbutton class=\"copy text-muted-foreground p-1 box-content border rounded-lg bg-card\" aria-label=\"Copy code\"\n        data-code=\"\u0026lt;div x-data=\u0026#34;{}\u0026#34;\u0026gt;\n    \u0026lt;button @click=\u0026#34;console.log($el)\u0026#34;\u0026gt;查看根元素\u0026lt;/button\u0026gt;\n    \u0026lt;button @click=\u0026#34;$el.style.backgroundColor = \u0026#39;yellow\u0026#39;\u0026#34;\u0026gt;改变背景\u0026lt;/button\u0026gt;\n\u0026lt;/div\u0026gt;\" onclick=\"\n          navigator.clipboard.writeText(this.dataset.code);\n          this.classList.add('copied');\n          setTimeout(() =\u003e this.classList.remove('copied'), 2000)\n        \"\u003e\n        \u003cdiv class=\"ready\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n              \u003cuse href='/Somnia/icons/main.svg#clipboard' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"success hidden\"\u003e\n            \u003csvg class=\"size-5\"\u003e\n                \u003cuse href='/Somnia/icons/main.svg#file-check' /\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n    \u003c/button\u003e\n    \n\u003c/div\u003e\u003cp\u003e\u003cstrong\u003e适用范围\u003c/strong\u003e：\u003c/p\u003e","date_published":"2025-01-01T08:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]},{"title":"Alpine.js 从入门到精通 1 指令","id":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs1/","url":"https://kkbt0.github.io/Somnia/docs/alpine.js/alpinejs1/","content_text":"\u003cp\u003eAlpine.js 是一个轻量级的 JavaScript 框架，它借鉴了 Vue.js 和 Angular 的思想，但更加精简，可以直接在 HTML 中通过指令来管理状态和行为，非常适合需要少量交互的静态网站或增强渐进式应用。\u003c/p\u003e","date_published":"2025-01-01T07:00:00+08:00","tags":["Alpine.js","前端","JavaScript"]}]}