Update Home

Home.md

@@ -1 +1,77 @@
-Welcome to the Wiki.
+# 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`
+      <div>
+        <button @click="${this.increase}">点击我</button>
+      </div>
+      <div>所有点击数为: <span>${this.count}</span></div>
+    `
+  }
+
+  increase(){
+    this.count++
+  }
+
+}
+
+if (!customElements.get('wc-hello')) {
+  customElements.define('wc-hello', Hello)
+}
+// 和上面的写法等价
+// 如果不希望修改前缀`wc-`的话, 可以直接调用内置的reg方法注册组件即可。
+Hello.reg('hello')
+
+
+/* 
+
+  <!-- 在html中,便可以直接使用 -->
+  <wc-hello></wc-hello>
+
+*/
+
+```
+