update site
This commit is contained in:
dntzhang
parent
6cdeafba0d
commit
ca38c5db2b
|
|
@ -1,20 +1,20 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.fb9dfd08.css",
|
||||
"cn.css.map": "static/css/cn.fb9dfd08.css.map",
|
||||
"cn.js": "static/js/cn.1a8e2bdb.js",
|
||||
"cn.js.map": "static/js/cn.1a8e2bdb.js.map",
|
||||
"cn.js": "static/js/cn.4ef15d56.js",
|
||||
"cn.js.map": "static/js/cn.4ef15d56.js.map",
|
||||
"index.css": "static/css/index.fb9dfd08.css",
|
||||
"index.css.map": "static/css/index.fb9dfd08.css.map",
|
||||
"index.js": "static/js/index.6a68a9f7.js",
|
||||
"index.js.map": "static/js/index.6a68a9f7.js.map",
|
||||
"index.js": "static/js/index.2000b09a.js",
|
||||
"index.js.map": "static/js/index.2000b09a.js.map",
|
||||
"static/js/0.f770eb0e.chunk.js": "static/js/0.f770eb0e.chunk.js",
|
||||
"static/js/0.f770eb0e.chunk.js.map": "static/js/0.f770eb0e.chunk.js.map",
|
||||
"static/js/1.0d025b66.chunk.js": "static/js/1.0d025b66.chunk.js",
|
||||
"static/js/1.0d025b66.chunk.js.map": "static/js/1.0d025b66.chunk.js.map",
|
||||
"static/js/10.e6acfca5.chunk.js": "static/js/10.e6acfca5.chunk.js",
|
||||
"static/js/10.e6acfca5.chunk.js.map": "static/js/10.e6acfca5.chunk.js.map",
|
||||
"static/js/11.a7b0d9ea.chunk.js": "static/js/11.a7b0d9ea.chunk.js",
|
||||
"static/js/11.a7b0d9ea.chunk.js.map": "static/js/11.a7b0d9ea.chunk.js.map",
|
||||
"static/js/11.94470037.chunk.js": "static/js/11.94470037.chunk.js",
|
||||
"static/js/11.94470037.chunk.js.map": "static/js/11.94470037.chunk.js.map",
|
||||
"static/js/12.1551e567.chunk.js": "static/js/12.1551e567.chunk.js",
|
||||
"static/js/12.1551e567.chunk.js.map": "static/js/12.1551e567.chunk.js.map",
|
||||
"static/js/13.a7923ed9.chunk.js": "static/js/13.a7923ed9.chunk.js",
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
"static/js/19.50bd4319.chunk.js.map": "static/js/19.50bd4319.chunk.js.map",
|
||||
"static/js/2.9632a8c5.chunk.js": "static/js/2.9632a8c5.chunk.js",
|
||||
"static/js/2.9632a8c5.chunk.js.map": "static/js/2.9632a8c5.chunk.js.map",
|
||||
"static/js/20.f678728b.chunk.js": "static/js/20.f678728b.chunk.js",
|
||||
"static/js/20.f678728b.chunk.js.map": "static/js/20.f678728b.chunk.js.map",
|
||||
"static/js/20.83b21c96.chunk.js": "static/js/20.83b21c96.chunk.js",
|
||||
"static/js/20.83b21c96.chunk.js.map": "static/js/20.83b21c96.chunk.js.map",
|
||||
"static/js/21.fc4d0781.chunk.js": "static/js/21.fc4d0781.chunk.js",
|
||||
"static/js/21.fc4d0781.chunk.js.map": "static/js/21.fc4d0781.chunk.js.map",
|
||||
"static/js/22.d0e764c7.chunk.js": "static/js/22.d0e764c7.chunk.js",
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
"static/js/23.b1e284bd.chunk.js.map": "static/js/23.b1e284bd.chunk.js.map",
|
||||
"static/js/24.d0714382.chunk.js": "static/js/24.d0714382.chunk.js",
|
||||
"static/js/24.d0714382.chunk.js.map": "static/js/24.d0714382.chunk.js.map",
|
||||
"static/js/25.7cdbb574.chunk.js": "static/js/25.7cdbb574.chunk.js",
|
||||
"static/js/25.7cdbb574.chunk.js.map": "static/js/25.7cdbb574.chunk.js.map",
|
||||
"static/js/25.204510ac.chunk.js": "static/js/25.204510ac.chunk.js",
|
||||
"static/js/25.204510ac.chunk.js.map": "static/js/25.204510ac.chunk.js.map",
|
||||
"static/js/26.d3e0fb29.chunk.js": "static/js/26.d3e0fb29.chunk.js",
|
||||
"static/js/26.d3e0fb29.chunk.js.map": "static/js/26.d3e0fb29.chunk.js.map",
|
||||
"static/js/27.cd58c5d2.chunk.js": "static/js/27.cd58c5d2.chunk.js",
|
||||
|
|
@ -55,8 +55,8 @@
|
|||
"static/js/29.18dc7b40.chunk.js.map": "static/js/29.18dc7b40.chunk.js.map",
|
||||
"static/js/3.1c5042fb.chunk.js": "static/js/3.1c5042fb.chunk.js",
|
||||
"static/js/3.1c5042fb.chunk.js.map": "static/js/3.1c5042fb.chunk.js.map",
|
||||
"static/js/4.2c975446.chunk.js": "static/js/4.2c975446.chunk.js",
|
||||
"static/js/4.2c975446.chunk.js.map": "static/js/4.2c975446.chunk.js.map",
|
||||
"static/js/4.1a938e71.chunk.js": "static/js/4.1a938e71.chunk.js",
|
||||
"static/js/4.1a938e71.chunk.js.map": "static/js/4.1a938e71.chunk.js.map",
|
||||
"static/js/5.f187d1bc.chunk.js": "static/js/5.f187d1bc.chunk.js",
|
||||
"static/js/5.f187d1bc.chunk.js.map": "static/js/5.f187d1bc.chunk.js.map",
|
||||
"static/js/6.62a98a69.chunk.js": "static/js/6.62a98a69.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.fb9dfd08.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.1a8e2bdb.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.fb9dfd08.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.4ef15d56.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.fb9dfd08.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.6a68a9f7.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.fb9dfd08.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.2000b09a.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([11],{57: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\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\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\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u7528 ES5 \u4e66\u5199 JS \uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u548c ES2015+ \u6765\u66ff\u4ee3\u5b83\u4eec\u3002\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=11.a7b0d9ea.chunk.js.map
|
||||
webpackJsonp([11],{57: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\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\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=11.94470037.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
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([20],{48:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\nYou can also pass any type of data to props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\nYou can set the default value by the static default Props property:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=20.83b21c96.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/20.83b21c96.chunk.js","docs/en/props.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/20.83b21c96.chunk.js","sourcesContent":["webpackJsonp([20],{\n\n/***/ 48:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/20.83b21c96.chunk.js","module.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 48\n// module chunks = 20"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([20],{48:function(n,e){n.exports="\n## Props\n\nTransfer data to sub elements through props, such as:\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name=\"world\"></my-first-element>\n```\n\nYou can also pass any type of data to props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\n```\n\nYou can set the default value by the static default Props property:\n\n```jsx\ndefine('my-first-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=20.f678728b.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/20.f678728b.chunk.js","docs/en/props.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/20.f678728b.chunk.js","sourcesContent":["webpackJsonp([20],{\n\n/***/ 48:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-first-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/20.f678728b.chunk.js","module.exports = \"\\n## Props\\n\\nTransfer data to sub elements through props, such as:\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-first-element>\\n```\\n\\nYou can also pass any type of data to props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\nUsing element:\\n\\n```jsx\\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\nYou can set the default value by the static default Props property:\\n\\n```jsx\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/props.md\n// module id = 48\n// module chunks = 20"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([25],{43:function(n,t){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is next front end framework base on Web Component. 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\nThe HTML structure is written in hyperscript and JS is written in ES5. You can use JSX and ES2015 + instead.\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=25.7cdbb574.chunk.js.map
|
||||
webpackJsonp([25],{43:function(n,t){n.exports="## What's Omi \uff1f\n\nOmi (pronounced /\u02c8om\u026a/) is next front end framework base on Web Component. 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=25.204510ac.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
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([4],{64:function(n,e){n.exports="\n## Props\n\n\u901a\u8fc7 Props \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff0c\u6bd4\u5982\uff1a\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name=\"world\"></my-element>\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f20\u4efb\u610f\u7c7b\u578b\u7684\u6570\u636e\u7ed9 props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element myObj={{ name: 'world' }}></my-element>\n```\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u9759\u6001\u5c5e\u6027 `static defaultProps` \u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c:\n\n```jsx\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=4.1a938e71.chunk.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["../static/js/4.1a938e71.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","64","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.1a938e71.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 64:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.1a938e71.chunk.js","module.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element myObj={{ name: 'world' }}></my-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 64\n// module chunks = 4"],"sourceRoot":""}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([4],{64:function(n,e){n.exports="\n## Props\n\n\u901a\u8fc7 Props \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff0c\u6bd4\u5982\uff1a\n\n```jsx\nimport { WeElement, define, render } from 'omi'\n\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name=\"world\"></my-first-element>\n```\n\n\u4f60\u4e5f\u53ef\u4ee5\u4f20\u4efb\u610f\u7c7b\u578b\u7684\u6570\u636e\u7ed9 props:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return (\n <h1>Hello, {props.myObj.name}!</h1>\n )\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\n```\n\n\u4f60\u53ef\u4ee5\u901a\u8fc7\u9759\u6001\u5c5e\u6027 `static defaultProps` \u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c:\n\n```jsx\ndefine('my-first-element', class extends WeElement {\n static defaultProps = {\n\t\tname: 'Omi',\n\t\tmyAge: 18\n\t}\n\n render(props) {\n return (\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\n )\n }\n})\n```"}});
|
||||
//# sourceMappingURL=4.2c975446.chunk.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/4.2c975446.chunk.js","docs/zh-cn/props.md"],"names":["webpackJsonp","64","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/4.2c975446.chunk.js","sourcesContent":["webpackJsonp([4],{\n\n/***/ 64:\n/***/ (function(module, exports) {\n\nmodule.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-first-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```jsx\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/4.2c975446.chunk.js","module.exports = \"\\n## Props\\n\\n通过 Props 向子组件传递数据，比如：\\n\\n```jsx\\nimport { WeElement, define, render } from 'omi'\\n\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-element name=\\\"world\\\"></my-first-element>\\n```\\n\\n你也可以传任意类型的数据给 props:\\n\\n```jsx\\ndefine('my-element', class extends WeElement {\\n render(props) {\\n return (\\n <h1>Hello, {props.myObj.name}!</h1>\\n )\\n }\\n})\\n```\\n\\n使用元素:\\n\\n```jsx\\n<my-first-element myObj={{ name: 'world' }}></my-first-element>\\n```\\n\\n你可以通过静态属性 `static defaultProps` 来设置默认值:\\n\\n```jsx\\ndefine('my-first-element', class extends WeElement {\\n static defaultProps = {\\n\\t\\tname: 'Omi',\\n\\t\\tmyAge: 18\\n\\t}\\n\\n render(props) {\\n return (\\n <h1>Hello, {props.name}! Age {props.myAge}</h1>\\n )\\n }\\n})\\n```\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/props.md\n// module id = 64\n// module chunks = 4"],"sourceRoot":""}
|
||||
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
|
|
@ -58,7 +58,7 @@ You can also use `like-button` tag directly in HTML：
|
|||
|
||||
- [Online Demo!](https://tencent.github.io/omi/assets/omi.html)
|
||||
|
||||
The HTML structure is written in hyperscript and JS is written in ES5. You can use JSX and ES2015 + instead.
|
||||
You can use JSX and ES2015+ to write the element:
|
||||
|
||||
|
||||
```jsx {8-11}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ define('my-element', class extends WeElement {
|
|||
Using element:
|
||||
|
||||
```jsx
|
||||
<my-element name="world"></my-first-element>
|
||||
<my-element name="world"></my-element>
|
||||
```
|
||||
|
||||
You can also pass any type of data to props:
|
||||
|
|
@ -36,13 +36,13 @@ define('my-element', class extends WeElement {
|
|||
Using element:
|
||||
|
||||
```jsx
|
||||
<my-first-element myObj={{ name: 'world' }}></my-first-element>
|
||||
<my-element myObj={{ name: 'world' }}></my-element>
|
||||
```
|
||||
|
||||
You can set the default value by the static default Props property:
|
||||
|
||||
```jsx
|
||||
define('my-first-element', class extends WeElement {
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'Omi',
|
||||
myAge: 18
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ Omi (读音 /ˈomɪ/，类似于 欧米) 是下一代前端框架，基于 Web C
|
|||
|
||||
* [点击这里看执行结果](https://tencent.github.io/omi/assets/omi.html)
|
||||
|
||||
上面使用的是 hyperscript 的方式来书写 HTML 结构，用 ES5 书写 JS ，你可以使用 JSX 和 ES2015+ 来替代它们。
|
||||
你可以使用 JSX 和 ES2015+ 来书写自定义元素:
|
||||
|
||||
|
||||
```jsx {8-11}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ define('my-element', class extends WeElement {
|
|||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-element name="world"></my-first-element>
|
||||
<my-element name="world"></my-element>
|
||||
```
|
||||
|
||||
你也可以传任意类型的数据给 props:
|
||||
|
|
@ -36,13 +36,13 @@ define('my-element', class extends WeElement {
|
|||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-first-element myObj={{ name: 'world' }}></my-first-element>
|
||||
<my-element myObj={{ name: 'world' }}></my-element>
|
||||
```
|
||||
|
||||
你可以通过静态属性 `static defaultProps` 来设置默认值:
|
||||
|
||||
```jsx
|
||||
define('my-first-element', class extends WeElement {
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
name: 'Omi',
|
||||
myAge: 18
|
||||
|
|
|
|||
Loading…
Reference in New Issue