# component-party-i18n.dev

**Repository Path**: zouhua2233_admin/component-party-i18n.dev

## Basic Information

- **Project Name**: component-party-i18n.dev
- **Description**: 🎉 Web组件JS框架的语法和特性概述,支持中文、英文切换
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-01-18
- **Last Updated**: 2024-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![Component Party i18n 🎉](.github/banner.webp)

> Web组件JS框架的语法和功能快速概述,支持中文、英文切换

[English](./README_EN.md) | 简体中文

**Website: <https://component-party.dev>**

## 🤔 初衷 ?

许多JS开发人员并没有很好地概述每一个具有自己语法和功能的现有JS框架。
我们如何解决这个问题？开发人员喜欢通过示例对框架进行概述。这是在深入之前的快速介绍。

## 🔥 进展

<!-- progression start -->
<details>
        <summary>
            <img width="18" height="18" src="public/framework/svelte.svg" />
            <b>Svelte 4</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] 插槽
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/react.svg" />
            <b>React</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/vue.svg" />
            <b>Vue 3</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/angular.svg" />
            <b>Angular</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [ ] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [ ] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/lit.svg" />
            <b>Lit</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/vue.svg" />
            <b>Vue 2</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/ember.svg" />
            <b>Ember</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [ ] 应用程序
  - [ ] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/solid.svg" />
            <b>SolidJS</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [ ] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [ ] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/alpine.svg" />
            <b>Alpine</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [ ] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [ ] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/mithril.svg" />
            <b>Mithril</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/aurelia.svg" />
            <b>Aurelia 2</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/qwik.svg" />
            <b>Qwik</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/marko.svg" />
            <b>Marko</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/aurelia.svg" />
            <b>Aurelia 1</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [ ] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [ ] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [ ] 应用程序
  - [ ] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/svelte.svg" />
            <b>Svelte 5 (preview)</b>
            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

- [x] 响应式基础
  - [x] 状态声明
  - [x] 状态更新
  - [x] 计算属性
- [x] 模板语法
  - [x] 快速入门
  - [x] 样式
  - [x] for 循环
  - [x] 点击事件
  - [x] Dom 操作
  - [x] 条件判断
- [x] 生命周期
  - [x] 挂载完成
  - [x] 卸载完成
- [x] 组件
  - [x] 父子传参
  - [x] 子父传参
  - [x] Slot
  - [x] 插槽使用
  - [x] 上下文
- [x] 表单
  - [x] 输入框
  - [x] 复选框
  - [x] 单选框
  - [x] 选择框
- [x] 应用程序
  - [x] 渲染程序
  - [x] 获取数据
  - [x] 路由器链接
  - [x] 路由

</details>
<!-- progression end -->

## 🤝 贡献

这个网站是用[Vite]建造的(https://vitejs.dev)和[Svelte](https://svelte.dev).网站内容以位于“内容”中的Markdown格式编写。对于简单的编辑，您可以直接在GitHub上编辑文件并生成Pull Request。
对于当地发展，[pnpm](https://pnpm.io/)首选作为包管理器：

```bash
pnpm i
pnpm run dev
```

此项目要求Node.js为“v16.0.0”或更高版本。

### 添加/编辑框架片段时的原则

> 对于组成方来说，清晰度优于优化

我们的目标是简化不同JS框架的复杂概述，以便于理解，而不是提供过度优化的解决方案。
我们认为，深入理解应该先于优化，使学习者能够独立掌握框架的使用和发现优化技术。这种方法符合我们在web组件JavaScript框架领域促进可访问和有效学习的承诺。

### 添加新框架

1.分叉项目并创建一个新分支2.在`public/framework中添加新的framework SVG徽标` 3.安装与框架关联的ESLint插件4.在`frameworks.mjs`中，添加一个带有SVG链接和ESLint配置的新条目5.如果框架需要语言语法高亮显示，请将其添加到“build/lib/generateContent.js”中对“getHighlighter”的“langs”参数的调用中`
6.制作游乐场链接：
    1.添加`create${FRAMEWORK}Playground.js`文件位于`build/lib/moundation`中。
    2.该文件应该导出一个函数，该函数使用“fromContentByFilename”方法返回一个对象，该方法接受文件路径键和文件内容值的对象，然后在加载了这些文件的情况下返回一个绝对URL到框架的在线REPL。
    3.在`build/lib/playground/index.js中注册其导出`

## ⚖️ 许可证

MIT. Made with 💖