Haunted 项目教程

最新推荐文章于 2024-10-10 07:05:57 发布

吴毓佳

最新推荐文章于 2024-10-10 07:05:57 发布

阅读量389

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00859/article/details/141989197

Haunted 项目教程

hauntedReact's Hooks API implemented for web components 👻项目地址:https://gitcode.com/gh_mirrors/ha/haunted

1. 项目介绍

Haunted 是一个基于 Web 组件的反应式库，旨在简化创建和使用 Web 组件的过程。它利用了现代 JavaScript 的特性，如 Proxy 和 Reflect，来实现响应式状态管理。Haunted 的核心思想是通过声明式的方式定义组件，使得开发者可以更专注于业务逻辑而非底层实现。

2. 项目快速启动

安装

首先，你需要在你的项目中安装 Haunted：

npm install haunted

创建一个简单的组件

以下是一个使用 Haunted 创建的简单计数器组件的示例：

import { html, component } from 'haunted';

function Counter() {
  const [count, setCount] = this.state({ count: 0 });

  return html`
    <div>
      <p>Count: ${count}</p>
      <button @click=${() => setCount({ count: count + 1 })}>Increment</button>
    </div>
  `;
}

customElements.define('my-counter', component(Counter));

使用组件

在你的 HTML 文件中使用这个自定义组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Haunted Counter</title>
</head>
<body>
  <my-counter></my-counter>
  <script type="module" src="path/to/your/counter.js"></script>
</body>
</html>