docs: update docs of omi
This commit is contained in:
dntzhang
parent
8b55ca0449
commit
81e8a53e5e
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.4dd07f49.css",
|
||||
"cn.css.map": "static/css/cn.4dd07f49.css.map",
|
||||
"cn.js": "static/js/cn.0ccc159e.js",
|
||||
"cn.js.map": "static/js/cn.0ccc159e.js.map",
|
||||
"cn.js": "static/js/cn.b4b89379.js",
|
||||
"cn.js.map": "static/js/cn.b4b89379.js.map",
|
||||
"index.css": "static/css/index.4dd07f49.css",
|
||||
"index.css.map": "static/css/index.4dd07f49.css.map",
|
||||
"index.js": "static/js/index.f25bc487.js",
|
||||
"index.js.map": "static/js/index.f25bc487.js.map",
|
||||
"index.js": "static/js/index.1f494a06.js",
|
||||
"index.js.map": "static/js/index.1f494a06.js.map",
|
||||
"static/js/0.fa4729fc.chunk.js": "static/js/0.fa4729fc.chunk.js",
|
||||
"static/js/0.fa4729fc.chunk.js.map": "static/js/0.fa4729fc.chunk.js.map",
|
||||
"static/js/1.21321ba9.chunk.js": "static/js/1.21321ba9.chunk.js",
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
"static/js/10.29b8e7af.chunk.js.map": "static/js/10.29b8e7af.chunk.js.map",
|
||||
"static/js/11.1b7cb28d.chunk.js": "static/js/11.1b7cb28d.chunk.js",
|
||||
"static/js/11.1b7cb28d.chunk.js.map": "static/js/11.1b7cb28d.chunk.js.map",
|
||||
"static/js/12.1235ab8c.chunk.js": "static/js/12.1235ab8c.chunk.js",
|
||||
"static/js/12.1235ab8c.chunk.js.map": "static/js/12.1235ab8c.chunk.js.map",
|
||||
"static/js/12.7a88317e.chunk.js": "static/js/12.7a88317e.chunk.js",
|
||||
"static/js/12.7a88317e.chunk.js.map": "static/js/12.7a88317e.chunk.js.map",
|
||||
"static/js/13.187d2ee6.chunk.js": "static/js/13.187d2ee6.chunk.js",
|
||||
"static/js/13.187d2ee6.chunk.js.map": "static/js/13.187d2ee6.chunk.js.map",
|
||||
"static/js/14.8e15502a.chunk.js": "static/js/14.8e15502a.chunk.js",
|
||||
|
|
@ -49,8 +49,8 @@
|
|||
"static/js/26.ee99a6d0.chunk.js.map": "static/js/26.ee99a6d0.chunk.js.map",
|
||||
"static/js/27.1d911d63.chunk.js": "static/js/27.1d911d63.chunk.js",
|
||||
"static/js/27.1d911d63.chunk.js.map": "static/js/27.1d911d63.chunk.js.map",
|
||||
"static/js/28.b63b7fd5.chunk.js": "static/js/28.b63b7fd5.chunk.js",
|
||||
"static/js/28.b63b7fd5.chunk.js.map": "static/js/28.b63b7fd5.chunk.js.map",
|
||||
"static/js/28.b709e42a.chunk.js": "static/js/28.b709e42a.chunk.js",
|
||||
"static/js/28.b709e42a.chunk.js.map": "static/js/28.b709e42a.chunk.js.map",
|
||||
"static/js/29.bdde5e22.chunk.js": "static/js/29.bdde5e22.chunk.js",
|
||||
"static/js/29.bdde5e22.chunk.js.map": "static/js/29.bdde5e22.chunk.js.map",
|
||||
"static/js/3.95dc6d3d.chunk.js": "static/js/3.95dc6d3d.chunk.js",
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.0ccc159e.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.b4b89379.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.f25bc487.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.1f494a06.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([12],{60:function(n,t){n.exports='\x3c!-- <p align="center"><img src="https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true" alt="omi" width="300"/></p>\n<h2 align="center">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align="center"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n --\x3e\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u8de8\u6846\u67b6\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u8bed\u6cd5\u7684 omio \u517c\u5bb9 IE8+\u3002\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework, Mobile & desktop & mini program)\u3002\n\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards "frameworks" that:<br><br>"export default class WeElement extends HTMLElement {..}"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## \u4e00\u4e2a HTML \u5b8c\u5168\u4e0a\u624b\n\n\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e0d\u9700\u8981\u4efb\u4f55\u6784\u5efa\u5de5\u5177\u5c31\u53ef\u4ee5\u6267\u884c:\n\n```html\n<script src="https://unpkg.com/omi"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define(\'my-counter\', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\n }\n\n sub() {\n this.data.count--\n this.update()\n }\n\n add() {\n this.data.count++\n this.update()\n }\n\n render() {\n return html`\n <div>\n <button onClick=${this.sub}>-</button>\n <span>${this.data.count}</span>\n <button onClick=${this.add}>+</button>\n </div>\n `}\n })\n\n render(html`<my-counter />`, \'body\')\n<\/script>\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n* [\u70b9\u51fb\u8fd9\u91cc\u770b\u6267\u884c\u7ed3\u679c](https://tencent.github.io/omi/assets/omi.html)\n\n\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u4e66\u5199\u81ea\u5b9a\u4e49\u5143\u7d20:\n\n\n```jsx {8-11}\nimport { render, WeElement, define } from \'omi\'\n\ndefine(\'my-counter\', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, \'body\')\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\u606d\u559c\u4f60\uff01'}});
|
||||
//# sourceMappingURL=12.1235ab8c.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([12],{60:function(n,e){n.exports="\x3c!-- <p align=\"center\"><img src=\"https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true\" alt=\"omi\" width=\"300\"/></p>\n<h2 align=\"center\">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align=\"center\"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n --\x3e\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u8de8\u6846\u67b6\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u8bed\u6cd5\u7684 omio \u517c\u5bb9 IE8+\u3002\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework, Mobile & desktop & mini program)\u3002\n\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## \u5feb\u901f\u4e0a\u624b\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\n## \u65e0\u72b6\u6001\u89c6\u56fe\u548c Store \u7cfb\u7edf\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\n\u5165\u95e8\u4e86\uff0c\u606d\u559c\u4f60\uff01"}});
|
||||
//# sourceMappingURL=12.7a88317e.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([28],{44:function(n,t){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is cross-frameworks framework base on Web Component, you can also use omio compatible IE8+ with the same grammar. One framework, Mobile & desktop & mini program.\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\nThis page demonstrates using Omi **with no build tooling**:\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script>\n const { define, WeElement, html, render } = Omi\n\n define('my-counter', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\n }\n\n sub() {\n this.data.count--\n this.update()\n }\n\n add() {\n this.data.count++\n this.update()\n }\n\n render() {\n return html`\n <div>\n <button onClick=${this.sub}>-</button>\n <span>${this.data.count}</span>\n <button onClick=${this.add}>+</button>\n </div>\n `}\n })\n\n render(html`<my-counter />`, 'body')\n<\/script>\n```\n\nYou can also use `like-button` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n- [Online Demo!](https://tencent.github.io/omi/assets/omi.html)\n\nYou can use JSX and ES2015+ to write the element:\n\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\nLooking at the highlighted part above, you can style the components. For example, the scope of the span above is only within the components, and it does not pollute other components. So far you have successfully started Omi! You learned:\n\n* Add ** structure ** for components, such as JSX writing structure above\n* Add ** behavior ** to the component, such as the `onClick'binding event above\n* Add ** style ** to the component, such as `static css` above\n* Rendering components to body, of course, can also render components to any other component\n\n\n\nCongratulations!"}});
|
||||
//# sourceMappingURL=28.b63b7fd5.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([28],{44:function(n,e){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is cross-frameworks framework base on Web Component, you can also use omio compatible IE8+ with the same grammar. One framework, Mobile & desktop & mini program.\n\n<em> Omi looks really neat!<br> </em>\n\u3000\u3000\u3000\u3000\u2014 [Jason Miller (Creator of Preact)](https://twitter.com/_developit/)\n\n<em> I really like the trend towards \"frameworks\" that:<br><br>\"export default class WeElement extends HTMLElement {..}\"<br> <br>This one, Omi, is from Tencent.</em> \n\u3000\u3000\u3000\u3000\u2014 [Dion Almaer](https://twitter.com/dalmaer/)\n\n## Add Omi in One Minute\n\n```jsx {8-11}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\nYou can also use `my-counter` tag directly in HTML\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\nLooking at the highlighted part above, you can style the components. For example, the scope of the span above is only within the components, and it does not pollute other components. So far you have successfully started Omi! You learned:\n\n* Add **structure** for components, such as JSX writing structure above\n* Add **behavior** to the component, such as the `onClick` binding event above\n* Add **style** to the component, such as `static css` above\n* Rendering components to body, of course, can also render components to any other component\n\n## Stateless View & Store System\n\n```jsx\nimport { define, render } from 'omi'\n\nclass Store {\n data = {\n count: 1\n }\n sub = () => {\n this.data.count--\n }\n add = () => {\n this.data.count++\n }\n}\n\ndefine('my-counter', _ => (\n <div>\n <button onClick={_.store.sub}>-</button>\n <span>{_.store.data.count}</span>\n <button onClick={_.store.add}>+</button>\n </div>\n), {\n use: ['count'], \n //or using useSelf, useSelf will update self only, exclude children components\n //useSelf: ['count'], \n css: `span { color: red; }`,\n installed() {\n console.log('installed')\n }\n })\n\nrender(<my-counter />, 'body', new Store)\n```\n\nGetting started, Congratulations!"}});
|
||||
//# sourceMappingURL=28.b709e42a.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -10,57 +10,6 @@ Omi (pronounced /ˈomɪ/) is cross-frameworks framework base on Web Component, y
|
|||
|
||||
## Add Omi in One Minute
|
||||
|
||||
This page demonstrates using Omi **with no build tooling**:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const { define, WeElement, html, render } = Omi
|
||||
|
||||
define('my-counter', class extends WeElement {
|
||||
install() {
|
||||
this.data.count = 1
|
||||
this.sub = this.sub.bind(this)
|
||||
this.add = this.add.bind(this)
|
||||
}
|
||||
|
||||
sub() {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add() {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<button onClick=${this.sub}>-</button>
|
||||
<span>${this.data.count}</span>
|
||||
<button onClick=${this.add}>+</button>
|
||||
</div>
|
||||
`}
|
||||
})
|
||||
|
||||
render(html`<my-counter />`, 'body')
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also use `like-button` tag directly in HTML：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
- [Online Demo!](https://tencent.github.io/omi/assets/omi.html)
|
||||
|
||||
You can use JSX and ES2015+ to write the element:
|
||||
|
||||
|
||||
```jsx {8-11}
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
||||
|
|
@ -98,13 +47,55 @@ define('my-counter', class extends WeElement {
|
|||
render(<my-counter />, 'body')
|
||||
```
|
||||
|
||||
You can also use `my-counter` tag directly in HTML：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
Looking at the highlighted part above, you can style the components. For example, the scope of the span above is only within the components, and it does not pollute other components. So far you have successfully started Omi! You learned:
|
||||
|
||||
* Add ** structure ** for components, such as JSX writing structure above
|
||||
* Add ** behavior ** to the component, such as the `onClick'binding event above
|
||||
* Add ** style ** to the component, such as `static css` above
|
||||
* Add **structure** for components, such as JSX writing structure above
|
||||
* Add **behavior** to the component, such as the `onClick` binding event above
|
||||
* Add **style** to the component, such as `static css` above
|
||||
* Rendering components to body, of course, can also render components to any other component
|
||||
|
||||
## Stateless View & Store System
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
Congratulations!
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
Getting started, Congratulations!
|
||||
|
|
@ -14,58 +14,7 @@ Omi (读音 /ˈomɪ/，类似于 欧米) 是跨框架框架，基于 Web Compone
|
|||
<em> I really like the trend towards "frameworks" that:<br><br>"export default class WeElement extends HTMLElement {..}"<br> <br>This one, Omi, is from Tencent.</em>
|
||||
— [Dion Almaer](https://twitter.com/dalmaer/)
|
||||
|
||||
## 一个 HTML 完全上手
|
||||
|
||||
下面这个页面不需要任何构建工具就可以执行:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const { define, WeElement, html, render } = Omi
|
||||
|
||||
define('my-counter', class extends WeElement {
|
||||
install() {
|
||||
this.data.count = 1
|
||||
this.sub = this.sub.bind(this)
|
||||
this.add = this.add.bind(this)
|
||||
}
|
||||
|
||||
sub() {
|
||||
this.data.count--
|
||||
this.update()
|
||||
}
|
||||
|
||||
add() {
|
||||
this.data.count++
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<button onClick=${this.sub}>-</button>
|
||||
<span>${this.data.count}</span>
|
||||
<button onClick=${this.add}>+</button>
|
||||
</div>
|
||||
`}
|
||||
})
|
||||
|
||||
render(html`<my-counter />`, 'body')
|
||||
</script>
|
||||
```
|
||||
|
||||
通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 `my-counter` 标签：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
* [点击这里看执行结果](https://tencent.github.io/omi/assets/omi.html)
|
||||
|
||||
你可以使用 JSX 和 ES2015+ 来书写自定义元素:
|
||||
|
||||
## 快速上手
|
||||
|
||||
```jsx {8-11}
|
||||
import { render, WeElement, define } from 'omi'
|
||||
|
|
@ -104,6 +53,14 @@ define('my-counter', class extends WeElement {
|
|||
render(<my-counter />, 'body')
|
||||
```
|
||||
|
||||
通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 `my-counter` 标签：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
看上面高亮的部分，可以给组件加样式，比如上面的 span 的作用域仅仅在组件内部，不会污染别的组件。到现在你已经成功入门 Omi 了！你学会了:
|
||||
|
||||
* 为组件添加**结构**，如上面使用 JSX 书写结构
|
||||
|
|
@ -111,4 +68,41 @@ render(<my-counter />, 'body')
|
|||
* 为组件添加**样式**，如上面的 `static css`
|
||||
* 渲染组件到 body，当然也可以把组件渲染到任意其他组件
|
||||
|
||||
恭喜你！
|
||||
|
||||
## 无状态视图和 Store 系统
|
||||
|
||||
```jsx
|
||||
import { define, render } from 'omi'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
<div>
|
||||
<button onClick={_.store.sub}>-</button>
|
||||
<span>{_.store.data.count}</span>
|
||||
<button onClick={_.store.add}>+</button>
|
||||
</div>
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-counter />, 'body', new Store)
|
||||
```
|
||||
|
||||
入门了，恭喜你！
|
||||
Loading…
Reference in New Issue