You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/02/01 07:21:06 UTC
[06/51] [partial] incubator-weex-site git commit: Site updated:
2017-02-01 15:00:00
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/index.html b/content/cn/v-0.10/guide/syntax/index.html
new file mode 100644
index 0000000..2ef554a
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/index.html
@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u8bed\u6cd5\u4ecb\u7ecd | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u8bed\u6cd5\u4ecb\u7ecd">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.948Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u8bed\u6cd5\u4ecb\u7ecd">
+<meta name="twitter:description" content="\u8bed\u6cd5\u7efc\u8ff0Weex \u4ee3\u7801\u7531 &lt;template&gt;\u3001&lt;style&gt;\u3001&lt;script&gt; \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002
+
+&lt;template&gt;\uff1a\u5fc5\u987b\u7684\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002
+&lt;style&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002
+&lt;script&gt;\uff1a\u53ef\u9009\u7684\uff0c\u4f7f\u7528 JavaScri">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link current ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link current ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u8bed\u6cd5\u4ecb\u7ecd
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.948Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u8bed\u6cd5\u7efc\u8ff0"><a href="#\u8bed\u6cd5\u7efc\u8ff0" class="headerlink" title="\u8bed\u6cd5\u7efc\u8ff0"></a>\u8bed\u6cd5\u7efc\u8ff0</h1><p>Weex \u4ee3\u7801\u7531 <code><template></code>\u3001<code><style></code>\u3001<code><script></code> \u4e09\u4e2a\u90e8\u5206\u6784\u6210\u3002</p>
+<ul>
+<li><code><template></code>\uff1a<em>\u5fc5\u987b\u7684</em>\uff0c\u4f7f\u7528 HTML \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7ed3\u6784\uff0c\u5185\u5bb9\u7531\u591a\u4e2a\u6807\u7b7e\u7ec4\u6210\uff0c\u4e0d\u540c\u7684\u6807\u7b7e\u4ee3\u8868\u4e0d\u540c\u7684\u7ec4\u4ef6\u3002</li>
+<li><code><style></code>\uff1a<em>\u53ef\u9009\u7684</em>\uff0c\u4f7f\u7528 CSS \u8bed\u6cd5\u63cf\u8ff0\u9875\u9762\u7684\u5177\u4f53\u5c55\u73b0\u5f62\u5f0f\u3002</li>
+<li><code><script></code>\uff1a<em>\u53ef\u9009\u7684</em>\uff0c\u4f7f\u7528 JavaScript \u63cf\u8ff0\u9875\u9762\u4e2d\u7684\u6570\u636e\u548c\u9875\u9762\u7684\u884c\u4e3a\uff0cWeex \u4e2d\u7684\u6570\u636e\u5b9a\u4e49\u4e5f\u5728 <code><script></code> \u4e2d\u8fdb\u884c\u3002</li>
+</ul>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="comment"><!-- (required) the structure of page --></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="comment">/* (optional) stylesheet */</span></div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="comment">/* (optional) the definition of data, methods and life-circle */</span></div><div class="line"><span class="tag"></<span class="name">script</span>>
;</span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u662f\u4e00\u4e2a\u5178\u578b\u7684 M-V-VM \u67b6\u6784\uff1a\u901a\u8fc7 ViewModel \u628a Model \u548c View \u5efa\u7acb\u66f4\u76f4\u63a5\u6709\u6548\u7684\u5173\u7cfb\uff0cViewModel \u7684\u5b9e\u73b0\u4ee5 <code><script></code> \u7684\u5185\u5bb9\u4e3a\u4e3b\u3002</p>
+<h2 id="lt-template-gt-\u6a21\u677f"><a href="#lt-template-gt-\u6a21\u677f" class="headerlink" title="<template> \u6a21\u677f"></a><code><template></code> \u6a21\u677f</h2><p><code><template></code> \u4e2d\u7684\u6807\u7b7e\u7ec4\u7ec7\u7c7b\u4f3c\u5982\u4e0b\u4ee3\u7801\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">style</span>=<span class="string">"width: 200; height: 200;"</span> <span class="attr">src</span>=<span class="string">"https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"</span>></span><span class="tag"></<span class="name">image</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Alibaba Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table>
</figure>
+<p><a href="http://dotwe.org/5256e6e610ded330369f2e8010f7f0e6" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p><code><div></code> \u6807\u7b7e\u662f\u4e00\u4e2a\u6839\u8282\u70b9\uff0c\u91cc\u9762\u5305\u542b\u63cf\u8ff0\u56fe\u7247\u7684 <code><image></code> \u6807\u7b7e\u548c\u63cf\u8ff0\u6587\u5b57\u7684 <code><text></code> \u6807\u7b7e\u3002</p>
+<p>\u548c HTML \u7c7b\u4f3c\uff0c\u4e0d\u540c\u6807\u7b7e\u4ee3\u8868\u7684\u7ec4\u4ef6\u6709\u5404\u81ea\u7684\u7279\u6027 (attribute)\uff0c\u90e8\u5206\u7ec4\u4ef6\u53ef\u4ee5\u62e5\u6709\u81ea\u5df1\u7684\u5b50\u7ec4\u4ef6\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../../references/components/index.html">\u5185\u7f6e\u7ec4\u4ef6\u5217\u8868</a></p>
+<p>\u6839\u8282\u70b9\uff1a\u6bcf\u4e2a Weex \u9875\u9762\u6700\u9876\u5c42\u7684\u8282\u70b9\uff0c\u6211\u4eec\u79f0\u4e3a\u6839\u8282\u70b9\u3002\u4e0b\u9762\u662f\u76ee\u524d\u6211\u4eec\u652f\u6301\u7684\u4e09\u79cd\u6839\u8282\u70b9\uff1a</p>
+<ul>
+<li><code><div></code>\uff1a\u666e\u901a\u6839\u8282\u70b9\uff0c\u6709\u786e\u5b9a\u7684\u5c3a\u5bf8\uff0c\u4e0d\u53ef\u6eda\u52a8\u3002</li>
+<li><code><scroller></code>\uff1a\u53ef\u6eda\u52a8\u6839\u8282\u70b9\uff0c\u9002\u7528\u4e8e\u9700\u8981\u5168\u9875\u6eda\u52a8\u7684\u573a\u666f\u3002</li>
+<li><code><list></code>\uff1a\u5217\u8868\u6839\u8282\u70b9\uff0c\u9002\u7528\u4e8e\u5176\u4e2d\u5305\u542b\u91cd\u590d\u7684\u5b50\u5143\u7d20\u7684\u5217\u8868\u573a\u666f\u3002</li>
+</ul>
+<p>\u76ee\u524d Weex \u4ec5\u652f\u6301\u4ee5\u4e0a\u4e09\u79cd\u6839\u8282\u70b9\u3002</p>
+<p><em>\u6ce8\u610f\u4e8b\u9879\uff1a<code><template></code> \u53ea\u652f\u6301\u4e00\u4e2a\u6839\u8282\u70b9\uff0c\u591a\u4e2a\u6839\u8282\u70b9\u5c06\u65e0\u6cd5\u88ab Weex \u6b63\u5e38\u7684\u8bc6\u522b\u548c\u5904\u7406\u3002</em></p>
+<h2 id="lt-style-gt-\u6837\u5f0f"><a href="#lt-style-gt-\u6837\u5f0f" class="headerlink" title="<style> \u6837\u5f0f"></a><code><style></code> \u6837\u5f0f</h2><p>\u6211\u4eec\u53ef\u4ee5\u628a Weex \u4e2d\u7684\u6837\u5f0f\u8bed\u6cd5\u7406\u89e3\u4e3a CSS \u7684\u4e00\u4e2a\u5b50\u96c6\uff0c\u4e24\u8005\u6709\u4e00\u4e9b\u7ec6\u5fae\u7684\u533a\u522b</p>
+<p>\u7b2c\u4e00\u79cd\u5199\u6cd5\u662f\uff0c\u4f60\u80fd\u5728\u6807\u7b7e\u4e0a\uff0c\u76f4\u63a5\u901a\u8fc7\u5185\u8054 <code>style</code> \u7279\u6027\u7f16\u5199\u6837\u5f0f. \u7b2c\u4e8c\u79cd\u5199\u6cd5\uff0c\u901a\u8fc7\u6807\u7b7e\u4e2d\u7684 <code>class</code> \u7279\u6027\u4e0e <code><style></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f\u5efa\u7acb\u5bf9\u5e94\u5173\u7cfb\uff0c\u8ba9 <code><style></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u7684\u6837\u5f0f\u4f5c\u7528\u4e8e\u7279\u5b9a\u6807\u7b7e\u4e4b\u4e0a\u3002\u4ee5\u4e0b\u662f\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 64;"</span>></span>Alibaba<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"large"</span>></span>Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">style</span>></s
pan><span class="css"></span></div><div class="line"> <span class="selector-class">.large</span> {<span class="attribute">font-size</span>: <span class="number">64</span>;}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/d8af9186bf045df74e7a538d91798db4" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0a\u9762\u7684\u4e24\u4e2a <code><text></code> \u7ec4\u4ef6\u90fd\u88ab\u8bbe\u7f6e\u4e86\u540c\u6837\u7684\u5b57\u4f53\u5927\u5c0f\uff0c\u4f46\u5206\u522b\u7528\u4e86\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../references/common-style.html">Weex \u901a\u7528\u6837\u5f0f</a></p>
+<p><strong>\u6ce8\u610f</strong>\uff1aWeex \u9075\u5faa <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank" rel="external">HTML \u7279\u6027</a> \u547d\u540d\u89c4\u8303\uff0c\u6240\u4ee5\u7279\u6027\u547d\u540d\u65f6<strong>\u8bf7\u4e0d\u8981\u4f7f\u7528\u9640\u5cf0\u683c\u5f0f (CamelCase)</strong>\uff0c\u91c7\u7528\u4ee5\u201c-\u201d\u5206\u5272\u7684 <strong>long-name</strong> \u5f62\u5f0f\u3002</p>
+<h2 id="lt-script-gt-\u811a\u672c"><a href="#lt-script-gt-\u811a\u672c" class="headerlink" title="<script> \u811a\u672c"></a><code><script></code> \u811a\u672c</h2><p><code><script></code> \u63cf\u8ff0\u9875\u9762\u4e2d\u7684\u6570\u636e\u548c\u9875\u9762\u7684\u884c\u4e3a\uff0c\u4ee3\u7801\u9075\u5faa JavaScript (ES5) \u8bed\u6cd5 (\u76ee\u524d iOS \u7aef\u548c\u6d4f\u89c8\u5668\u7aef\u53d6\u51b3\u4e8e\u5185\u7f6e JavaScript \u5f15\u64ce\u5bf9 ES \u7248\u672c\u7684\u652f\u6301\u60c5\u51b5\uff0c\u5b89\u5353\u7aef\u80fd\u591f\u5b8c\u6574\u652f\u6301 ES5\uff0c\u4f46\u4e0d\u539f\u751f\u652f\u6301 ES6\uff0c\u9700\u8981\u7528\u7c7b\u4f3c <a href="http://babeljs.io" target="_blank" rel="external">babel</a> \u7684\u5de5\u5177\u5bf9\u6e90\u4ee3\u7801\u8fdb\u884c\u8f6c\u6362)\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>The time is {{datetime}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{title}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>{{getTitle()}}<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><
div class="line"></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">title</span>: <span class="string">'Alibaba'</span>,</div><div class="line"> <span class="attr">datetime</span>: <span class="literal">null</span></div><div class="line"> },</div><div class="line"> <span class="attr">methods</span>: {</div><div class="line"> <span class="attr">getTitle</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'Weex Team'</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">created</span>
: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.datetime = <span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString()</div><div class="line"> }</div><div class="line"> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/8095bed0d9db4299fb39975d4b35b13f" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0a\u9762 <code><script></code> \u6807\u7b7e\u4e2d\u5b9a\u4e49\u4e86\u88ab\u8d4b\u503c\u7ed9 <code>module.exports</code> \u7684\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5176\u5b9e\u5c31\u662f\u4e00\u4e2a ViewModel \u9009\u9879\uff0c\u8ba9\u4e09\u4e2a <code><text></code> \u6807\u7b7e\u663e\u793a\u5f53\u524d\u65f6\u95f4\u3001\u201cAlibaba\u201d\u5b57\u6837\u548c\u201cWeex Team\u201d\u5b57\u6837\u3002</p>
+<p>\u9009\u9879\u4e2d\u7684 <code>data</code> \u7528\u4e8e\u5b58\u50a8\u6570\u636e\uff0c\u8fd9\u4e9b\u6570\u636e\u53ef\u4ee5\u901a\u8fc7<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u673a\u5236\u548c <code><template></code> \u6807\u7b7e\u4e2d\u7684\u5185\u5bb9\u7ed1\u5b9a\u8d77\u6765\u3002\u5f53\u8fd9\u4e9b\u6570\u636e\u53d8\u66f4\u65f6\uff0c\u88ab\u7ed1\u5b9a\u7684\u6a21\u677f\u5185\u5bb9\u4e5f\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002\u8fd9\u4e9b\u6570\u636e\u5728 <code><script></code> \u4e2d\u7684\u5404\u4e2a\u65b9\u6cd5\u4e2d\u53ef\u4ee5\u901a\u8fc7\u7c7b\u4f3c <code>this.x</code> \u7684\u65b9\u5f0f\u8fdb\u884c\u8bfb\u5199\u64cd\u4f5c\u3002</p>
+<p>\u800c\u9009\u9879\u4e2d\u7684 <code>methods</code> \u91cc\u5219\u5217\u51fa\u4e86\u5f53\u524d\u4e0a\u4e0b\u6587\u53ef\u6267\u884c\u7684\u5404\u79cd\u51fd\u6570\uff0c\u6bd4\u5982 <code>getTitle()</code>\u3002</p>
+<p>\u9009\u9879\u4e2d\u6700\u540e\u7684 <code>created</code> \u662f\u751f\u547d\u5468\u671f\u51fd\u6570\uff0c\u4f1a\u5728\u6570\u636e\u521d\u59cb\u5316\u4e4b\u540e\u3001\u754c\u9762\u88ab\u7ed1\u5b9a\u6570\u636e\u5e76\u6e32\u67d3\u4e4b\u524d\u6267\u884c\u3002\u7c7b\u4f3c\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\u8fd8\u6709 <code>init</code>\u3001<code>ready</code> \u7b49\uff0c\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c<code>datetime</code> \u4f1a\u5728\u754c\u9762\u6e32\u67d3\u4e4b\u524d\u88ab\u66f4\u65b0\u4e3a\u5f53\u524d\u7684\u65f6\u95f4\u3002</p>
+<p>\u5ef6\u4f38\u9605\u8bfb\uff1a<a href="../../references/component-defs.html">ViewModel \u9009\u9879</a></p>
+<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u6765\u8be6\u7ec6\u4ecb\u7ecd<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u7684\u76f8\u5173\u77e5\u8bc6\u3002</p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/render-logic.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/render-logic.html b/content/cn/v-0.10/guide/syntax/render-logic.html
new file mode 100644
index 0000000..d4e8570
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/render-logic.html
@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236 | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+<meta property="og:type" content="website">
+<meta property="og:title" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/render-logic.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.948Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236">
+<meta name="twitter:description" content="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236appendappend \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a
+
+\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (append=&quot;tree&quot;)\uff0c\u8fd8\u662f
+\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (append=&quot;node&quot;)
+
+&lt;template&gt; &lt;div&gt; &lt;div&gt; &lt;text&gt;Hello&l">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link current ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link current ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ \u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.948Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236"><a href="#\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236" class="headerlink" title="\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236"></a>\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</h1><h2 id="append"><a href="#append" class="headerlink" title="append"></a><code>append</code></h2><p><code>append</code> \u7279\u6027\u5b9a\u4e49\u4e86\u5f53\u524d\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\uff1a</p>
+<ol>
+<li>\u4ee5\u4e00\u6574\u68f5\u6811\u7684\u65b9\u5f0f\u4e00\u6b21\u6027\u6dfb\u52a0\u5230\u89c6\u56fe\u4e2d (<code>append="tree"</code>)\uff0c\u8fd8\u662f</li>
+<li>\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u90fd\u4ea7\u751f\u4e00\u6b21\u5355\u72ec\u7684\u6dfb\u52a0\u5230\u89c6\u56fe\u7684\u6307\u4ee4 (<code>append="node"</code>)</li>
+</ol>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"node"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello
<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">append</span>=<span class="string">"tree"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Hello<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span>></span>Weex<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="li
ne"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/417c75415efce66d8e22bf5942b380ee" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u7b2c\u4e00\u7ec4\u548c\u7b2c\u4e8c\u7ec4 <code><div></code> \u7684\u6e32\u67d3\u8fc7\u7a0b\u76f8\u540c\uff0c\u5373\u5148\u6dfb\u52a0\u7a7a\u7684\u7236\u7ea7 <code><div></code>\uff0c\u7136\u540e\u63d2\u5165\u7b2c\u4e00\u4e2a <code><text></code> Hello\uff0c\u7136\u540e\u63d2\u5165\u7b2c\u4e8c\u4e2a <code><text></code> Weex\uff1b\u7b2c\u4e09\u7ec4 <code><div></code> \u5219\u662f\u8fde\u5e26\u4e24\u4e2a <code><text></code> \u5b50\u7ec4\u4ef6\u4e00\u9f50\u4f20\u7ed9\u6e32\u67d3\u5c42\u8fdb\u884c\u6e32\u67d3\u7684\u3002</p>
+<p>\u6e32\u67d3\u7ed3\u679c\u663e\u800c\u6613\u89c1\uff0c\u524d\u4e24\u7ec4\u6e32\u67d3\u65b9\u5f0f\u4f1a\u4f7f\u9996\u6b21\u7ed8\u5236\u7684\u54cd\u5e94\u901f\u5ea6\u6bd4\u540e\u8005\u5feb\u4e9b\uff0c\u4f46\u662f\u603b\u6e32\u67d3\u65f6\u95f4\u53ef\u80fd\u6bd4\u7b2c\u4e09\u7ec4 <code>append="tree"</code> \u66f4\u957f\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u5b9e\u9645\u754c\u9762\u7684\u60c5\u51b5\u81ea\u884c\u9009\u62e9\u5408\u7406\u7684\u6e32\u67d3\u8fc7\u7a0b\u3002</p>
+<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u9664\u4e86 <code><cell></code> \u7ec4\u4ef6\u7684\u9ed8\u8ba4\u6e32\u67d3\u8fc7\u7a0b\u662f <code>tree</code> \u6a21\u5f0f\uff0c\u5176\u5b83\u7ec4\u4ef6\u90fd\u9ed8\u8ba4\u6309\u7167 <code>node</code> \u6a21\u5f0f\u8fdb\u884c\u6e32\u67d3\u3002</p>
+<p>\u4e0b\u4e00\u8282\uff1a<a href="./composed-component.html">\u81ea\u5b9a\u4e49\u7ec4\u4ef6</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/render-logic.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/guide/syntax/style-n-class.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/guide/syntax/style-n-class.html b/content/cn/v-0.10/guide/syntax/style-n-class.html
new file mode 100644
index 0000000..31b3a51
--- /dev/null
+++ b/content/cn/v-0.10/guide/syntax/style-n-class.html
@@ -0,0 +1,553 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>CSS \u6837\u5f0f\u548c\u7c7b | Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+<meta property="og:type" content="website">
+<meta property="og:title" content="CSS \u6837\u5f0f\u548c\u7c7b">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/guide/syntax/style-n-class.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.949Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="CSS \u6837\u5f0f\u548c\u7c7b">
+<meta name="twitter:description" content="CSS \u6837\u5f0f\u548c\u7c7b\u57fa\u7840\u8bed\u6cd5CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002
+.div &#123; width: 400; height: 50;&#125;
+\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f prop-name: prop-value;\u3002\u952e\u540d\u662f prop-name\uff0c\u952e\u503c\u662f prop-value\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 : \u8fdb\u884c\u5206">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="guide" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "guide";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="">
+ <div class="sidebar-menu">
+
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link current ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="article-wrapper page-layout">
+ <div class="doc-nav">
+
+
+
+<div class="summary">
+ <h2 class="part-title">
+
+ \u6559\u7a0b
+
+ </h2>
+ <ul class="doc-summary">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/index.html" class="sidebar-link ">\u4e0a\u624b\u6559\u7a0b</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/develop-on-your-local-machine.html" class="sidebar-link ">\u5982\u4f55\u5728\u672c\u5730\u5f00\u53d1 Weex \u9875\u9762</a></h3>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/syntax/index.html" class="sidebar-link ">\u8bed\u6cd5\u4ecb\u7ecd</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/data-binding.html" class="sidebar-link ">\u6570\u636e\u7ed1\u5b9a</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html" class="sidebar-link current ">CSS \u6837\u5f0f\u548c\u7c7b</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/events.html" class="sidebar-link ">\u4e8b\u4ef6\u5904\u7406</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/display-logic.html" class="sidebar-link ">\u5c55\u793a\u903b\u8f91\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/render-logic.html" class="sidebar-link ">\u6e32\u67d3\u8fc7\u7a0b\u63a7\u5236</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/composed-component.html" class="sidebar-link ">\u7ec4\u4ef6\u5c01\u88c5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/id.html" class="sidebar-link ">\u627e\u8282\u70b9</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/comm.html" class="sidebar-link ">\u7ec4\u4ef6\u901a\u4fe1</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/config-n-data.html" class="sidebar-link ">\u9875\u9762\u914d\u7f6e\u548c\u9875\u9762\u6570\u636e</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li>
+ <h3 class="chapter-title"><a href="/cn/v-0.10/guide/how-to/index.html" class="sidebar-link ">\u4f7f\u7528 Devtools \u8c03\u8bd5 Weex \u9875\u9762</a></h3>
+
+ <ul class="chapter">
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/debug-with-html5.html" class="sidebar-link ">\u5728\u6d4f\u89c8\u5668\u4e2d\u8c03\u8bd5</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/require-3rd-party-libs.html" class="sidebar-link ">\u5982\u4f55\u5f15\u5165\u7b2c\u4e09\u65b9\u5e93</a>
+ </li>
+
+ <li>
+ <a href="/cn/v-0.10/guide/how-to/transform-code-into-js-bundle.html" class="sidebar-link ">\u5c06 `.we` \u6e90\u4ee3\u7801\u8f6c\u6362\u6210 JS Bundle</a>
+ </li>
+
+ </ul>
+
+ </li>
+
+
+
+ </ul>
+</div>
+ </div>
+
+
+<article class="article article-type-guide">
+ <div class="article-entry" itemprop="articleBody">
+ <header class="article-header">
+
+
+ <h1 class="article-title" itemprop="name">
+ CSS \u6837\u5f0f\u548c\u7c7b
+ </h1>
+
+
+ <time class="article-date" datetime="2017-02-01T06:23:21.949Z">Updated time: 01/02/2017</time>
+</header>
+ <h1 id="CSS-\u6837\u5f0f\u548c\u7c7b"><a href="#CSS-\u6837\u5f0f\u548c\u7c7b" class="headerlink" title="CSS \u6837\u5f0f\u548c\u7c7b"></a>CSS \u6837\u5f0f\u548c\u7c7b</h1><h2 id="\u57fa\u7840\u8bed\u6cd5"><a href="#\u57fa\u7840\u8bed\u6cd5" class="headerlink" title="\u57fa\u7840\u8bed\u6cd5"></a>\u57fa\u7840\u8bed\u6cd5</h2><p>CSS \u6837\u5f0f\u53ef\u4ee5\u7406\u89e3\u4e3a\u4e00\u7cfb\u5217\u7684\u952e\u503c\u5bf9\uff0c\u5176\u4e2d\u7684\u6bcf\u4e00\u5bf9\u63cf\u8ff0\u4e86\u4e00\u4e2a\u7279\u5b9a\u7684\u6837\u5f0f\uff0c\u4f8b\u5982\u7ec4\u4ef6\u7684\u5bbd\u6216\u8005\u9ad8\u3002</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.div</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">400</span>; </div><div class="line"> <span class="attribute">height</span>: <span class="number">50</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
+<p>\u952e\u503c\u5bf9\u7684\u5f62\u5f0f\u662f <code>prop-name: prop-value;</code>\u3002\u952e\u540d\u662f <code>prop-name</code>\uff0c\u952e\u503c\u662f <code>prop-value</code>\u3002 \u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u952e\u540d\u6309\u7167\u8fde\u63a5\u7b26\u7684\u65b9\u5f0f\u8fdb\u884c\u547d\u540d\uff0c\u952e\u548c\u503c\u4e4b\u95f4\u7531\u5192\u53f7 <code>:</code> \u8fdb\u884c\u5206\u9694\uff0c\u6bcf\u5bf9\u952e\u503c\u4e4b\u95f4\u7531\u5206\u53f7 <code>;</code> \u8fdb\u884c\u5206\u9694\u3002</p>
+<p>\u5728 Weex \u9875\u9762\u4e0a\u6837\u5f0f\u6709\u4e24\u79cd\u5f62\u5f0f\uff1a</p>
+<ul>
+<li><code><template></code> \u4e2d\u7684 <code>style</code> \u7279\u6027</li>
+<li><code><style></code> \u6837\u5f0f\u8868</li>
+</ul>
+<h3 id="lt-template-gt-\u4e2d\u7684-style-\u7279\u6027"><a href="#lt-template-gt-\u4e2d\u7684-style-\u7279\u6027" class="headerlink" title="<template> \u4e2d\u7684 style \u7279\u6027"></a><code><template></code> \u4e2d\u7684 <code>style</code> \u7279\u6027</h3><p>\u5728 <code>style</code> \u7279\u6027\u4e2d\u7f16\u5199\u6837\u5f0f\uff0c\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 400; height: 50;"</span>></span></div><div class="line"> ...</div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div></pre></td></tr></table></figure>
+<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u610f\u601d\u662f <code><div></code> \u7ec4\u4ef6\u7684\u5bbd\u548c\u9ad8\u5206\u522b\u4e3a 400 \u50cf\u7d20\u548c 50 \u50cf\u7d20\u3002</p>
+<h3 id="lt-style-gt-\u6837\u5f0f\u8868"><a href="#lt-style-gt-\u6837\u5f0f\u8868" class="headerlink" title="<style> \u6837\u5f0f\u8868"></a><code><style></code> \u6837\u5f0f\u8868</h3><p>\u4f8b\u5982:</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> { <span class="attribute">width</span>: <span class="number">600</span>; }</div><div class="line"> <span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div><div class="line"> <span class="selector-class">.highlight</span> { <span class="attribute">color</span>: <span class="number">#ff0000</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p>\u6837\u5f0f\u8868\u5305\u542b\u4e86\u591a\u4e2a\u6837\u5f0f\u89c4\u5219\uff0c\u6bcf\u6761\u89c4\u5219\u6709\u4e00\u4e2a\u5bf9\u5e94\u7684\u7c7b\uff0c\u4ee5\u53ca\u7531 <code>{...}</code> \u5305\u62ec\u7684\u82e5\u5e72\u6761\u6837\u5f0f\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div></pre></td></tr></table></figure>
+<h3 id="class-\u7279\u6027"><a href="#class-\u7279\u6027" class="headerlink" title="class \u7279\u6027"></a><code>class</code> \u7279\u6027</h3><p><code><template></code> \u6807\u7b7e\u4e2d\u7684 <code>class</code> \u7279\u6027\u503c\u7528\u6765\u5339\u914d <code><style></code> \u6837\u5f0f\u8868\u4e2d\u7684\u4e00\u4e2a\u6216\u591a\u4e2a class \u540d\uff0c\u591a\u4e2a class name \u4e4b\u95f4\u7531\u7a7a\u683c\u5206\u9694\u3002\u4f8b\u5982\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrapper"</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>></span>...<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title highlight"</span>></span>...<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag"><<
span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.wrapper</span> { <span class="attribute">width</span>: <span class="number">600</span>; }</div><div class="line"> <span class="selector-class">.title</span> { <span class="attribute">width</span>: <span class="number">400</span>; <span class="attribute">height</span>: <span class="number">50</span>; }</div><div class="line"> <span class="selector-class">.highlight</span> { <span class="attribute">color</span>: <span class="number">#ff0000</span>; }</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/8487e2a33cd051c9adfa887d0bafbb44" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u542b\u4e49\u662f <code><div></code> \u7ec4\u4ef6\u7684\u5bbd\u5ea6\u662f 600 \u50cf\u7d20\uff0c\u4e24\u4e2a <code><text></code> \u7ec4\u4ef6\u7684\u5c3a\u5bf8\u4e3a 400x50\uff0c\u5176\u4e2d\u7b2c\u4e8c\u4e2a\u6587\u672c\u7ec4\u4ef6\u662f\u7ea2\u8272\u5b57\u3002</p>
+<p><strong>\u6ce8\u610f\u4e8b\u9879</strong></p>
+<ul>
+<li>\u4e3a\u4e86\u7b80\u5316\u9875\u9762\u8bbe\u8ba1\u548c\u5b9e\u73b0\uff0c\u5c4f\u5e55\u7684\u5bbd\u5ea6\u7edf\u4e00\u4e3a 750 \u50cf\u7d20\uff0c\u4e0d\u540c\u8bbe\u5907\u5c4f\u5e55\u90fd\u4f1a\u6309\u7167\u6bd4\u4f8b\u8f6c\u5316\u4e3a\u8fd9\u4e00\u5c3a\u5bf8\u8fdb\u884c\u957f\u5ea6\u8ba1\u7b97\u3002</li>
+<li>\u6807\u51c6 CSS \u652f\u6301\u5f88\u591a\u6837\u5f0f\u9009\u62e9\u5668\uff0c\u4f46 Weex \u76ee\u524d\u53ea\u652f\u6301\u5355\u4e2a class name \u7684\u9009\u62e9\u5668\u3002</li>
+<li>\u6807\u51c6 CSS \u652f\u6301\u5f88\u591a\u7684\u957f\u5ea6\u5355\u4f4d\uff0c\u4f46 Weex \u76ee\u524d\u53ea\u652f\u6301\u50cf\u7d20\uff0c\u5e76\u4e14 <code>px</code> \u5355\u4f4d\u53ef\u4ee5\u5ffd\u7565\u4e0d\u5199\uff0c\u76f4\u63a5\u4f7f\u7528\u5bf9\u5e94\u7684\u6570\u503c\u3002\u66f4\u591a\u8be6\u60c5\u8bf7\u67e5\u770b<a href="../references/common-style.html">\u901a\u7528\u6837\u5f0f</a>\u3002</li>
+<li>\u5b50\u5143\u7d20\u7684\u6837\u5f0f\u4e0d\u4f1a\u7ee7\u627f\u81ea\u7236\u5143\u7d20\uff0c\u8fd9\u4e00\u70b9\u4e0e\u6807\u51c6 CSS \u4e0d\u540c\uff0c\u6bd4\u5982 <code>color</code> \u548c <code>font-size</code> \u7b49\u6837\u5f0f\u4f5c\u7528\u5728 <code><text></code> \u4e0a\u5c42\u7684 <code><div></code> \u4e0a\u662f\u65e0\u6548\u7684\u3002</li>
+<li>\u6807\u51c6 CSS \u5305\u542b\u4e86\u975e\u5e38\u591a\u7684\u6837\u5f0f\u5c5e\u6027\uff0c\u4f46 Weex \u53ea\u652f\u6301\u4e86\u5176\u4e2d\u7684\u4e00\u90e8\u5206\uff0c\u6bd4\u5982\u76d2\u6a21\u578b\u3001flexbox\u3001position \u7b49\u5e03\u5c40\u5c5e\u6027\uff0c\u4ee5\u53ca <code>font-size</code>\u3001<code>color</code> \u7b49\u5176\u5b83\u6837\u5f0f\u3002</li>
+</ul>
+<h2 id="\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408"><a href="#\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408" class="headerlink" title="\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408"></a>\u4e0e\u6570\u636e\u7ed1\u5b9a\u7ed3\u5408</h2><p>\u8bf7\u67e5\u9605<a href="./data-binding.html">\u6570\u636e\u7ed1\u5b9a</a>\u4e2d\u6709\u5173 <code>style</code> \u548c <code>class</code> \u7279\u6027\u7684\u76f8\u5173\u90e8\u5206\u3002\u8fd9\u91cc\u7b80\u5355\u4e3e\u4e2a\u4f8b\u5b50\uff1a</p>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag"><<span class="name">template</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: {{fontSize}};"</span>></span>Alibaba<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"large {{textClass}}"</span>></span>Weex Team<span class="tag"></<span class="name">text</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">template</span>></span></div><div class="line"><span class="tag">&l
t;<span class="name">style</span>></span><span class="css"></span></div><div class="line"> <span class="selector-class">.large</span> {<span class="attribute">font-size</span>: <span class="number">32</span>;}</div><div class="line"> <span class="selector-class">.highlight</span> {<span class="attribute">color</span>: <span class="number">#ff0000</span>;}</div><div class="line"><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"> <span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">data</span>: {</div><div class="line"> <span class="attr">fontSize</span>: <span class="number">32</span>,</div><div class="line"> <span class="attr">textClass</span>: <span class="string">'highlight'</span></div><div class="line"> }</div><div class="line"
> }</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure>
+<p><a href="http://dotwe.org/440d3318dc7b83e3bb0a110f3b3236ca" target="_blank" rel="external">\u4f53\u9a8c\u4e00\u4e0b</a></p>
+<p>\u4e0b\u4e00\u7bc7\uff1a<a href="./events.html">\u4e8b\u4ef6\u5904\u7406</a></p>
+
+ </div>
+
+</article>
+</div>
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/guide/syntax/style-n-class.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/guide/syntax/style-n-class.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/14041490/content/cn/v-0.10/index.html
----------------------------------------------------------------------
diff --git a/content/cn/v-0.10/index.html b/content/cn/v-0.10/index.html
new file mode 100644
index 0000000..2bff8a4
--- /dev/null
+++ b/content/cn/v-0.10/index.html
@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Weex</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta property="og:type" content="website">
+<meta property="og:title" content="Weex">
+<meta property="og:url" content="https://weex.apache.org/cn/v-0.10/index.html">
+<meta property="og:site_name" content="Weex">
+<meta property="og:updated_time" content="2017-02-01T06:23:21.950Z">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="Weex">
+
+ <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml">
+
+
+ <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
+
+
+ <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+ <link rel="stylesheet" href="/css/style.css">
+ <link rel="stylesheet" href="/css/swiper.min.css">
+</head>
+
+<body id="index" class="lang-cn">
+
+ <script>
+ window.PAGE_TYPE = "index";
+ window.ROOT = "/"
+ </script>
+ <header id="header">
+ <div class="navbar">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <div class="main-nav">
+ <ul class="links">
+ <li><a href="/cn/guide">\u6559\u7a0b</a></li>
+ <li><a href="/cn/references">\u624b\u518c</a></li>
+ <li><a href="/cn/faq.html">FAQ</a></li>
+ <li class="dropdown">
+ <a href="javascript:;">\u4e0b\u8f7d</a>
+ <ul class="dropdown-menu subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="info">
+ <li><a href="https://github.com/alibaba/weex/" target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
+ </ul>
+ <ul class="tools">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-header" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <!--<li></li>-->
+ </ul>
+ </div>
+ </div>
+ <div id="mobile-nav">
+ <a id="logo" href="/cn/">
+ <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
+ </a>
+ <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
+ </div>
+</header>
+ <div id="sidebar" class="index-sidebar">
+ <div class="sidebar-menu">
+
+ <ul class="main-nav">
+ <li>
+ <div class="search">
+ <form id="search-form" class="search-form"> <!-- \u641c\u7d22\u6846\u76f8\u5173 -->
+ <input type="text" id="search-input-sidebar" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+ <span class="iconfont icon-search"></span>
+ </form>
+ <div class="results-panel">
+ </div>
+</div>
+ </li>
+ <li>
+ <a class="" href="/cn/guide">
+ \u6559\u7a0b
+ </a>
+ </li>
+ <li>
+ <a class="" href="/cn/references">
+ \u624b\u518c
+ </a>
+ </li>
+ <li>
+ <a href="/cn/faq">
+ FAQ
+ </a>
+ </li>
+ <li>
+ <p>\u4e0b\u8f7d</p>
+ <ul class="subnav">
+ <li>
+ <a href="/cn/playground.html">Playground</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weex-devtool" target="_blank">Devtool</a>
+ </li>
+ <li>
+ <a href="https://www.npmjs.com/package/weexpack" target="_blank">Weexpack</a>
+ </li>
+ <li>
+ <a href="http://dotwe.org" target="_blank">Snippets</a>
+ </li>
+ </li>
+ <li>
+ <a href="https://market.weex-project.io/" target="_blank">Market</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="https://github.com/alibaba/weex" target="_blank">
+ GitHub
+ </a>
+ </li>
+ </ul>
+
+ <a class="btn-close-sidebar iconfont icon-close"></a>
+ </div>
+</div>
+ <div class="scene header" style="background: #00BDFF;">
+ <div class="scene-container">
+ <div class="galaxy left">
+ <canvas width="560" height="560" id="left-canvas"></canvas>
+ </div>
+ <div class="galaxy right">
+ <canvas width="500" height="500" id="right-canvas"></canvas>
+ </div>
+ <div id="slider">
+ <div class="swiper-container swiper-container-horizontal">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide" style="background:url('//gw.alicdn.com/tps/TB1rY5sPXXXXXbfapXXXXXXXXXX-800-800.png') 50% 50% / contain no-repeat">
+ <div class="slide-content">
+ <h1 class="page-title">\u4e00\u5957\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848</h1>
+ <div class="btn-group">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b</a>
+ <a href="https://github.com/alibaba/weex/" class="button get-started" target="_blank">GitHub</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--<div class="swiper-button-next iconfont icon-arrow-small"></div>
+ <div class="swiper-button-prev iconfont icon-arrow-small"></div>-->
+ </div>
+</div>
+ </div>
+</div>
+<div class="scene edge overlength horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4f18\u52bf</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB17ga7PXXXXXbnXXXXXXXXXXXX-120-121.svg" alt="Lightweight">
+ <h3>\u8f7b\u91cf</h3>
+ <span class="underline"></span>
+ <p>\u4f53\u79ef\u5c0f\u3001\u8bed\u6cd5\u7b80\u5355\u3001\u6613\u4e8e\u638c\u63e1</p>
+ </div>
+ <div class="inner-box">
+ <img src="//gw.alicdn.com/tps/TB1BGSCPXXXXXb1aXXXXXXXXXXX-79-79.svg" alt="Extendable">
+ <h3>\u53ef\u6269\u5c55</h3>
+ <span class="underline"></span>
+ <p>\u53ef\u4ee5\u6a2a\u5411\u6269\u5c55\u548c\u5b9a\u5236\u539f\u751f\u7ec4\u4ef6\u548c\u529f\u80fd</p>
+ </div>
+ <div class="inner-box">
+ <img src="//img.alicdn.com/tps/TB1uMC9PXXXXXaFXXXXXXXXXXXX-80-69.svg" alt="High Performance">
+ <h3>\u9ad8\u6027\u80fd</h3>
+ <span class="underline"></span>
+ <p>\u5bf9\u52a0\u8f7d\u65f6\u95f4\u548c\u8d44\u6e90\u5360\u7528\u6df1\u5ea6\u4f18\u5316\uff0c\u7ed9\u4f60\u66f4\u597d\u7684\u4f53\u9a8c</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene feature">
+ <div class="scene-container">
+ <div class="feature-content">
+ <div class="left-text">
+ <h2>\u5e2e\u52a9\u4f60\u6784\u5efa\u539f\u751f\u5e94\u7528</h2>
+ <p>\u4e0e Web App\u3001HTML5 App \u6216 hybrid App \u4e0d\u540c\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Weex \u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684\u539f\u751f\u5e94\u7528\u3002\u66f4\u8d34\u5fc3\u7684\u662f\u4f60\u7684\u4ee3\u7801\u53ea\u9700\u4f7f\u7528 HTML\u3001CSS\u3001JavaScript \u53ef\u4ee5\u6784\u5efa\u539f\u751f\u5e94\u7528\uff0c\u4e0a\u624b\u975e\u5e38\u7b80\u5355\u3002\u4f46\u5b9e\u9645\u4e0a\uff0c\u5e94\u7528\u7684\u5e95\u5c42\u662f Objective-C \u6216 Java\uff0c \u540c\u65f6\uff0cWeex \u63d0\u4f9b\u5f88\u591a native \u7ec4\u4ef6\u6216\u6a21\u5757\u4f9b\u5f00\u53d1\u4eba\u5458\u4f7f\u7528\u3002</p>
+ </div>
+ <div class="right-box">
+ <div class="imgbox phone-layer level1">
+ </div>
+ <div class="imgbox phone-layer level2">
+ </div>
+ <div class="imgbox phone-layer level3">
+ </div>
+ <div class="imgbox phone-layer level4">
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="scene cross-platform horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4e00\u6b21\u7f16\u5199\uff0c\u591a\u7aef\u8fd0\u884c</h2>
+ <p>Weex \u63d0\u4f9b\u5f3a\u5927\u7684\u8de8\u5e73\u53f0\u80fd\u529b\uff0c\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u7684 API \u5f00\u53d1 Web\uff0cAndroid \u548c iOS \u5e94\u7528\u3002 \u540c\u65f6\uff0c\u6211\u4eec\u5bf9\u63a5\u53e3\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u80fd\u529b\u3002 \u8fd9\u6837\uff0c\u5f53\u60a8\u9700\u8981\u6269\u5c55\u539f\u751f\u7ec4\u4ef6\u6216\u6a21\u5757\u65f6\uff0c\u8fd9\u5c06\u975e\u5e38\u65b9\u4fbf\u3002</p>
+ </div>
+ <div class="sketch-content">
+ <div class="inner-box imgbox ios"></div>
+ <div class="inner-box imgbox android"></div>
+ <div class="inner-box imgbox h5"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene supporting-vue horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u652f\u6301 Vue \u8bed\u6cd5</h2>
+ <p>Weex \u9075\u5faa Web \u6807\u51c6\uff0c\u540c\u65f6\u652f\u6301 vue.js \u7684\u8bed\u6cd5\u3002\u56e0\u6b64\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 vue.js \u8bed\u6cd5\u6765\u5f00\u53d1\u5e94\u7528\u7a0b\u5e8f\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ <div class="imgbox"></div>
+ </div>
+ </div>
+</div>
+
+<div class="scene schematic horizon">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u5de5\u4f5c\u539f\u7406</h2>
+ <p>Weex \u662f\u4e00\u4e2a\u52a8\u6001\u5316\u7684\u9ad8\u6269\u5c55\u8de8\u5e73\u53f0\u89e3\u51b3\u65b9\u6848\u3002 \u5728 Weex \u4ee3\u7801\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 <template>\uff0c<style> \u548c <script> \u6807\u7b7e\u7f16\u5199\u9875\u9762\u6216\u7ec4\u4ef6\uff0c\u7136\u540e\u5c06\u5b83\u4eec\u8f6c\u6362\u4e3a JS bundle \u4ee5\u8fdb\u884c\u90e8\u7f72\u3002\u5f53\u670d\u52a1\u5668\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef JS bundle \u65f6\uff0cJS bundle \u4f1a\u88ab\u5ba2\u6237\u7aef\u7684 JavaScript \u5f15\u64ce\u5904\u7406\uff0c\u5e76\u7ba1\u7406\u6e32\u67d3 native \u89c6\u56fe\uff0c\u8c03\u7528\u539f\u751f API \u548c\u7528\u6237\u4ea4\u4e92\u3002</p>
+ </div>
+ <div class="sketch-content imgbox">
+ </div>
+ </div>
+</div>
+
+<div class="scene users horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u8c01\u5728\u4f7f\u7528 Weex</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-logo tmall-logo">
+ <h3>\u5929\u732b</h3>
+ <div class="user-info">
+ <h4>\u5929\u732b</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684 B2C \u8d2d\u7269\u5e73\u53f0.</p>
+ </div>
+ </div>
+ <div class="user-logo aliyun-logo">
+ <h3>\u963f\u91cc\u4e91</h3>
+ <div class="user-info">
+ <h4>\u963f\u91cc\u4e91</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u4e91\u8ba1\u7b97\u4e1a\u52a1\uff0c\u963f\u91cc\u4e91\u63d0\u4f9b\u5168\u9762\u7684\u5168\u7403\u4e91\u8ba1\u7b97\u670d\u52a1\uff0c\u4e3a\u56fd\u9645\u5ba2\u6237\u7684\u5728\u7ebf\u4e1a\u52a1\u548c\u963f\u91cc\u5df4\u5df4\u81ea\u5df1\u7684\u7535\u5b50\u5546\u52a1\u751f\u6001\u7cfb\u7edf\u63d0\u4f9b\u652f\u6301\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo taobao-logo">
+ <h3>\u6dd8\u5b9d</h3>
+ <div class="user-info">
+ <h4>\u6dd8\u5b9d</h4>
+ <p>\u4e2d\u56fd\u6700\u5927\u7684\u79fb\u52a8\u7535\u5b50\u8d2d\u7269\u5e73\u53f0\uff0c\u5c55\u793a\u6570\u4ee5\u4ebf\u8ba1\u7684\u4ea7\u54c1\u4e0e\u670d\u52a1\u4fe1\u606f\uff0c\u4e3a\u6d88\u8d39\u8005\u63d0\u4f9b\u591a\u4e2a\u79cd\u7c7b\u7684\u4ea7\u54c1\u548c\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo ding-logo">
+ <h3>\u9489\u9489</h3>
+ <div class="user-info">
+ <h4>\u9489\u9489</h4>
+ <p>\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u4e13\u4e3a\u4e2d\u5c0f\u4f01\u4e1a\u6253\u9020\u7684\u6c9f\u901a\u548c\u534f\u540c\u5e73\u53f0\u3002\u9489\u9489\u56e0\u4e2d\u5c0f\u4f01\u4e1a\u800c\u751f\uff0c\u5e2e\u52a9\u4e2d\u5c0f\u4f01\u4e1a\u901a\u8fc7\u7cfb\u7edf\u5316\u7684\u89e3\u51b3\u65b9\u6848\uff08\u5fae\u5e94\u7528\uff09\uff0c\u5168\u65b9\u4f4d\u63d0\u5347\u4e2d\u5c0f\u4f01\u4e1a\u6c9f\u901a\u548c\u534f\u540c\u6548\u7387\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo alibaba-logo">
+ <h3>1688</h3>
+ <div class="user-info">
+ <h4>1688</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u7f51\u4e0a\u6279\u53d1\u5e73\u53f0\uff0c\u8986\u76d6\u666e\u901a\u5546\u54c1\u3001\u670d\u88c5\u3001\u7535\u5b50\u4ea7\u54c1\u3001\u539f\u6750\u6599\u3001\u5de5\u4e1a\u90e8\u4ef6\u3001\u519c\u4ea7\u54c1\u548c\u5316\u5de5\u4ea7\u54c1\u7b49\u591a\u4e2a\u884c\u4e1a\u7684\u4e70\u5bb6\u548c\u5356\u5bb6\u30021688 \u4e3a\u5728\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u65d7\u4e0b\u96f6\u552e\u5e02\u573a\u7ecf\u8425\u4e1a\u52a1\u7684\u5546\u5bb6\uff0c\u63d0\u4f9b\u4e86\u4ece\u672c\u5730\u6279\u53d1\u5546\u91c7\u8d2d\u4ea7\u54c1\u7684\u6e20\u9053\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo cainiao-logo">
+ <h3>\u83dc\u9e1f\u88f9\u88f9</h3>
+ <div class="user-info">
+ <h4>\u83dc\u9e1f\u88f9\u88f9</h4>
+ <p>\u83dc\u9e1f\u88f9\u88f9\u662f\u963f\u91cc\u5df4\u5df4\u65d7\u4e0b\u83dc\u9e1f\u7f51\u7edc\u63a8\u51fa\u7684\u4e00\u6b3e\u5feb\u9012\u670d\u52a1 APP\uff0c\u4e3b\u8981\u529f\u80fd\u6709\uff1a\u5feb\u9012\u8fd0\u5355\u67e5\u8be2\u3001\u9884\u7ea6\u5bc4\u5feb\u9012\u3001\u5305\u88f9\u81ea\u52a8\u8ddf\u8e2a\u3001\u83dc\u9e1f\u9a7f\u7ad9\u7f51\u70b9\u4ee3\u6536\u4ee3\u5bc4\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo xiami-logo">
+ <h3>\u867e\u7c73</h3>
+ <div class="user-info">
+ <h4>\u867e\u7c73</h4>
+ <p>\u63d0\u4f9b\u9ad8\u54c1\u8d28\u97f3\u4e50\u7684\u4e2a\u6027\u5316\u63a8\u8350\u670d\u52a1\uff0c\u4ee5\u53ca\u7ebf\u4e0b\u97f3\u4e50\u6d3b\u52a8\u7b49\u4e92\u52a8\u5185\u5bb9\u3002</p>
+ </div>
+ </div>
+ <div class="user-logo youku-logo">
+ <h3>\u4f18\u9177</h3>
+ <div class="user-info">
+ <h4>\u4f18\u9177</h4>
+ <p>\u4e2d\u56fd\u9886\u5148\u7684\u89c6\u9891\u670d\u52a1\u5e73\u53f0\uff0c\u63d0\u4f9b\u89c6\u9891\u64ad\u653e\uff0c\u89c6\u9891\u53d1\u5e03\uff0c\u89c6\u9891\u5206\u4eab\u7b49\u670d\u52a1\u3002</p>
+ </div>
+ </div>
+ </div>
+ <!--<div class="more">
+ <a class="more" href="">More</a>
+ </div>-->
+ </div>
+</div>
+
+<div class="scene feedback horizon overlength">
+ <div class="scene-container">
+ <div class="textbox">
+ <h2>\u4ed6\u4eec\u8bf4</h2>
+ </div>
+ <div class="sketch-content">
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1xHiYPXXXXXc8XpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9648\u5929\u4e88</p>
+ <p class="user-title">\u4f17\u5b89\u4fdd\u9669\u6280\u672f\u603b\u76d1</p>
+ <p class="user-say">\u201c Weex \u4e0d\u4ec5\u5e94\u7528\u7075\u6d3b\u3001\u6027\u80fd\u5f3a\u5927\uff0c\u800c\u4e14\u80fd\u8ba9\u524d\u7aef\u5f00\u53d1\u8005\u6700\u5927\u7a0b\u5ea6\u590d\u7528\u73b0\u6709\u6280\u672f\u79ef\u7d2f\uff0c\u5e2e\u52a9\u6211\u4eec\u7528\u6700\u5c11\u6210\u672c\u8bbe\u8ba1\u5168\u65b0\u7684\u8de8\u5e73\u53f0\u67b6\u6784\u4f53\u7cfb\uff0c\u5e76\u5c3d\u5feb\u8fdb\u5165\u5b9e\u65bd\u9636\u6bb5\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB1e.CYPXXXXXcsXpXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u6797\u5efa\u950b</p>
+ <p class="user-title">\u997f\u4e86\u4e48\u5927\u524d\u7aef\u90e8\u8d1f\u8d23\u4eba</p>
+ <p class="user-say">\u201c Weex \u63d0\u4f9b\u4e86\u5ab2\u7f8e HTML5 \u5f00\u53d1\u6548\u7387\u548c Native \u7684\u6027\u80fd\uff0c\u5bf9\u4e8e\u7c7b\u4f3c\u6211\u4eec\u8fd9\u79cd\u8fed\u4ee3\u901f\u5ea6\u8981\u6c42\u6bd4\u8f83\u9ad8\u7684\u56e2\u961f\uff0c\u51e0\u4e4e\u662f\u76ee\u524d\u6700\u597d\u7684\u65b9\u6848\u3002\u201d</p>
+ </div>
+ <div class="user-feedback">
+ <img class="avatar" src="//gw.alicdn.com/tps/TB15MOQPXXXXXbCXFXXXXXXXXXX-130-130.jpg" alt="avatar">
+ <p class="user-name">\u9ec4\u6cf0\u6210</p>
+ <p class="user-title">\u5929\u732b\u6280\u672f\u4e13\u5bb6</p>
+ <p class="user-say">\u201c Weex \u4f5c\u4e3a\u8f7b\u91cf\u6e32\u67d3\u5f15\u64ce\u53c8\u63d0\u4f9b\u4e86\u5f88\u65b9\u4fbf\u7684\u63d2\u4ef6\u673a\u5236\uff0c\u8ba9\u5404\u4e2a\u7aef\u53ef\u4ee5\u628a\u81ea\u5df1\u7684\u80fd\u529b\u53d1\u6325\u51fa\u6765\uff0c\u5145\u5206\u53d1\u6325\u5728\u5929\u732b\u7684\u4e1a\u52a1\u4e0a\uff0c\u5e76\u826f\u597d\u7684\u652f\u6301\u53cc11\u3002\u201d</p>
+ </div>
+ </div>
+ <div class="go-2-doc">
+ <a href="/cn/guide/index.html" class="button get-started">\u4e0a\u624b\u6559\u7a0b \u2192</a>
+ </div>
+ </div>
+</div>
+<a href="javascript:;" id="back2top" class="back2top"><span class="iconfont icon-arrow-small"></span></a>
+<script src="/js/swiper.min.js"></script>
+<script src="/js/velocity.js"></script>
+<script>
+var swiper = new Swiper('.swiper-container', {
+ nextButton: '.swiper-button-next',
+ prevButton: '.swiper-button-prev',
+ slidesPerView: 1,
+ spaceBetween: 30,
+ loop: false,
+ autoplay: false,
+ autoplayDisableOnInteraction: false
+})
+</script>
+
+
+ <footer id="footer">
+ <div class="row clearfix">
+ <div class="ali-logo">
+ <img src="//gw.alicdn.com/tps/TB1Ef93PXXXXXaXXpXXXXXXXXXX-252-126.png" alt="Alibaba">
+ </div>
+ <div class="dropdown select-lang">
+ <a href="javascript:;" class="dropdown-toggle">
+ Language
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="/v-0.10/index.html">English</a>
+ </li>
+ <li>
+ <a href="/cn/v-0.10/index.html">\u4e2d\u6587</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p><span>Released under </span><a href="">Apache License 2.0</a></p>
+ </div>
+ <div class="row clearfix">
+ <div class="cell"><span>Copyright(c) 2016 </span><a href="https://www.alibaba.com">Alibaba</a></div>
+ <div class="cell"><span>GroupMade by </span><a href="">\u963f\u91cc\u4e91UED AX</a></div>
+ </div>
+</footer>
+ <div style="display: none;">
+ <script src="//s95.cnzz.com/z_stat.php?id=1261102667&web_id=1261102667" language="JavaScript"></script>
+</div>
+
+ <script src="/js/reqwest.js"></script>
+ <script src="/js/common.js"></script>
+</body>
+</html>