diff --git a/Home.md b/Home.md index 5d08b7b..86452c6 100644 --- a/Home.md +++ b/Home.md @@ -1 +1,77 @@ -Welcome to the Wiki. \ No newline at end of file +# WKit +> 一个简单易用、功能完善的用于开发`web components`的轻量级开发库。模板解析基于`lit-html`二次开发。大部分API与vue用法接近, 极大的减少学习成本。 + + +## 我们的特色 +- `@xxx=yyy` 事件绑定, 可以任意节点上直接使用类似`vue事件绑定`的这种写法, 就可实现事件绑定。组件被移出文档时, 事件会**自动销毁**, 无须手动销毁。 +- `@click.stop=xxx` 事件绑定支持修饰符 +- `:xxx=yyy`, 属性绑定, 类似`vue`,在属性前加上`:`, 该属性不再使用`setAttribute()`, 而是直接赋值, 可满足你需要传递复杂数据结构的需求。 +- `#animation={type}`, 开箱即用的动画配置, 内置6种动画`fade(默认), scale, bounce, micro-bounce, rotate, slide` +- `ref=xxx`, 类似`vue`的节点标识, 可方便的在`mounted()`之后通过 `this.$refs.xxx` 来访问该节点 +- 用内置的`bind()`方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。 +- 灵活的`props`定义 + + +### 示例 + +```js + +import { css, html, Component } from 'wkit' + +class Hello extends Component { + + static props = { + count: { + type: Number, + default: 0, + attribute: true // 是否显式表现为html属性 + }, + foo: 0, // 简写 + bar: String // 简写 + } + + // 若需要支持 scss语法, 则需要使用构建工具编译。 + // 可支持数组 + static styles = css` + button { color: #09f; } + span { color: #f30; } + ` + + // 支持多个 + static styles = [ + css`...`, + css`...` + ] + + render(){ + return html` +