You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:30 UTC
[35/51] [abbrv] incubator-weex-site git commit: update file structure
and fix responsive styles
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md b/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
new file mode 100644
index 0000000..69667ae
--- /dev/null
+++ b/_drafts/v1.0/guide/how-to/transform-code-into-js-bundle.md
@@ -0,0 +1,112 @@
+---
+title: 将 `.we` 源代码转换成 JS Bundle
+type: guide
+order: 4.4
+version: 0.10
+---
+
+# 将 `.we` 源代码转换成 JS Bundle
+<span class="weex-version">0.4</span>
+
+在前面的章节中你已经了解到如何编写及组织 Weex 代码，如果你还有疑问，可参考 [语法](../syntax/main.html) 及 [手册](../../references/main.html)。 但是，Weex 语法的代码必须转换为 JSBundle，以便 Weex JSFramework 可以在 iOS，Android 和浏览器端解析和执行。了解更多信息，可参考 [Weex 工作原理](../../advanced/how-it-works.html) 和 [JS Bundle 格式](../../references/specs/js-bundle-format.html)
+
+现在，回到将 `.we` 源代码转换成 JS Bundle 的主题。有几种方法来实现这一目标。
+
+## 使用 weex-toolkit
+
+如果你已经有了 node.js 开发环境，可以直接使用以下命令。关于 node.js 及其他依赖安装可参考[安装依赖](../develop-on-your-local-machine.html#第一步：安装依赖)
+```bash
+$npm install -g weex-toolkit
+```
+
+### 将 `.we` 文件转换为 JS Bundle
+
+```bash
+$ weex your_best_weex.we -o .
+```
+
+`your_best_weex.we` 将会被转换为 `your_best_weex.js` 并保存在当前目录。
+
+### 将 `.we` 文件转换为 JS Bundle 并开启 watch 功能，实时自动转换
+
+```bash
+
+$ weex your_best_weex.we -o . --watch
+```
+
+### 将所有 `.we` 文件转换到一个目录中
+
+```bash
+$ weex we/file/storage/path -o outputpath
+```
+
+ `we/file/storage/path` 目录下的每个 `.we` 文件都会被转换为 JS Bundle 并保存到 `outputpath` 目录。
+
+请访问 [npmjs.com](https://www.npmjs.com/package/weex-toolkit) 了解更多关于 `weex-toolkit`。
+
+## transformer
+
+```bash
+npm install weex-transformer
+```
+
+### CLI Tool
+
+```
+ Usage: transformer [options] <file...>
+
+ Options:
+
+ -h, --help output usage information
+ -V, --version output the version number
+ -l, --oldFormat [value] whether to transform to old format (default: false)
+ -e, --isEntry [value] whether is an entry module which has `bootstrap` (default: true)
+ -o, --output [path] the output file dirname
+```
+
+### API
+
+** transform(name, code, path, elements, config) **
+
+```javascript
+var transformer = require('weex-transformer')
+var output = transformer.transform('foo', '/* code here */', '.', {})
+```
+
+参数：
+
+- `name {string}`：当前 bundle 文件名
+- `code {string}`：源码
+- `path {string}`： *可选*，当在某个路径中查找自定义组件时很有用
+- `elements {Object}`：*可选*，存在的自定义组件映射
+- `config {Object}`：*可选*
+
+ * `oldFormat {boolean}`：是否转换为旧格式 （默认：`false`）
+ * `isEntry {boolean}`：是否是具有 `bootstrap` 的入口模块 （默认：`true`）
+
+返回值:
+- 一个对象：
+ - `result {string}`：所有自定义组件的 `define()` 方法和最终的 `bootstrap()`
+ - `logs {Array}`：相应的警告和错误日志
+
+## gulp weex
+
+```bash
+npm install gulp-weex
+```
+
+```javascript
+var gulp = require('gulp')
+var weex = require('gulp-weex')
+
+gulp.task('default', function () {
+ return gulp.src('src/*.html')
+ .pipe(weex({}))
+ .pipe(gulp.dest('./dest'))
+})
+```
+
+参数:
+
+- `oldFormat {boolean}`：是否转换为旧格式 （默认：`false`）
+- `isEntry {boolean}`：是否是具有 `bootstrap` 的入口模块 （默认：`true`）
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/index.md b/_drafts/v1.0/guide/index.md
new file mode 100644
index 0000000..73d1a98
--- /dev/null
+++ b/_drafts/v1.0/guide/index.md
@@ -0,0 +1,60 @@
+---
+title: 上手教程
+type: guide
+order: 1
+has_chapter_content: true
+version: 0.10
+---
+
+# 起步教程
+
+Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。
+
+尝试 Weex 最简单的方法是使用 [Playground App](https://alibaba.github.io/weex/download.html) 和在 [dotWe](http://dotwe.org) 编写一个 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子。你不需要考虑安装开发环境或编写 native 代码，只需要做下面两件事：
+
+- 为你的手机安装 [Playground App](https://alibaba.github.io/weex/download.html)，当然，Weex 是跨平台的框架，你依然可以使用浏览器进行预览，只是这样你就无法感受到 native 优秀的体验了。
+- 在新标签页中打开 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 例子，点击预览，然后用 Playground 扫码即可。
+
+在这个例子中，我们看到了熟悉的 HTML 语义化标签、CSS 样式和 Javascript 代码。这是一个最简单的 Weex 示例，它在页面中渲染了一个 "Hello World"。
+
+
+
+## 发生了什么？
+
+就如示例代码所示：
+
+```html
+<template>
+ <div>
+ <text class="text">{{text}}</text>
+ </div>
+</template>
+
+<style>
+ .text {
+ font-size: 50;
+ }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ text: 'Hello World.'
+ }
+ }
+</script>
+```
+
+我们暂时不去关心 Weex 的技术细节，仅看大致的代码结构。Weex 代码由三部分构成：`template`、`style`、`script`，这三个概念之于 Weex 就如 HTML，CSS，JavaScript 之于 Web。
+
+模板部分赋予 Weex 以骨架，由标签以及标签包围的内容构成，标签中能添加 `attribute（特性）`，不同的 `attribute` 有不同的含义，例如 class 特性让同样的样式可以作用于多组 Weex 标签， onclick 特性让标签能对用户点击事件作出回应。
+
+样式部分描述 Weex 标签如何显示。和你一样，我们喜欢 CSS，所以 Weex 中的样式尽量和 CSS 标准一致。Weex 支持很多 CSS 中的特性： margin, padding, fixed...... 更好的是， flexbox 布局模型在 Weex 中获得了很好的支持。
+
+脚本部分为 Weex 标签添加数据与逻辑，在这里你能方便的访问本地或远程的数据并动态更新。你还能定义方法并让这些方法响应不同的事件。Weex 脚本的组织方式基本遵循于 CommonJS module 规范。
+
+是不是觉得这些语法有些眼熟？没错，Weex 语法参考了 [Vue](https://github.com/vuejs/vue)，如果你熟悉 Vue，你会很快适应 Weex 语法（最新的 Weex framework 将会基于 [Vue 2.0](https://github.com/vuejs/vue) 开发，完全兼容 Vue，可参见我们的 [Roadmap](https://github.com/weexteam/weex-vue-framework/issues/9)），更好的是，我们拥抱规范，尽可能的按照 W3C 标准进行实现，因此，你大可不必担心 Weex 三端差异。
+
+你可以试着修改 [Hello World](http://dotwe.org/656345423a7ef46f4b897ff471fd2ab5) 的代码，再次点击预览即可生成新的二维码进行扫描。
+
+Weex 不止是个 Demo，在接下来的章节中，你还会看到更多 Weex 开发 native 应用并将其集成到你的 App 中的精彩教程。不要忘了随时在 [dotWe](http://dotwe.org) 中编写代码验证并通过 [Playground App](https://alibaba.github.io/weex/download.html) 预览。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/comm.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/comm.md b/_drafts/v1.0/guide/syntax/comm.md
new file mode 100644
index 0000000..7923ef7
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/comm.md
@@ -0,0 +1,134 @@
+---
+title: 组件通信
+type: guide
+order: 3.8
+version: 0.10
+---
+
+# 组件间通信
+
+## 自定义事件
+
+Weex 支持自定义事件，这里有两个相关的设计：1，监听自定义事件；2，创建自定义事件。
+
+## 监听自定义事件
+
+每个 Weex 的 ViewModel 都支持 `this.$on(type, handler)` 和 `this.$off(type[, handler])` 的 API。`type` 是监听的自定义事件类型，`handler` 是事件处理函数。
+
+当 `handler` 被触发时，会有一个事件对象 `event` 作为第一个参数被传入，事件对象的数据格式基于[事件机制](./events.html)中提到的事件描述对象。
+
+## 创建自定义事件
+
+每个 Weex 的 ViewModel 都支持 `this.$emit(type, detail)` 的 API，可以在当前 ViewModel 中产生一个自定义事件。`type` 是自定义事件的类型，`detail` 则是一个对该事件细节补充描述的 JSON 对象，会以 `event.detail` 的形式出现在处理此事件的函数中。
+
+## 从子组件向父组件通信
+
+首先父组件要监听特定类型的自定义事件，而子组件可以使用 `this._parent` 找到父组件，然后再调用 `this._parent.$emit(type, detail)` 方法，即可实现自下而上的通信。例如：
+
+```html
+<element name="foo">
+ <template>
+ <div>
+ <image src="{{imageUrl}}" class="thumb" onclick="test"></image>
+ <text>{{title}}</text>
+ </div>
+ </template>
+ <style>
+ .thumb { width: 200; height: 200; }
+ </style>
+ <script>
+ module.exports = {
+ data: {
+ title: '',
+ imageUrl: ''
+ },
+ methods: {
+ test: function () {
+ // Emit notify to parent
+ this._parent.$emit('notify', {a: 1})
+ }
+ }
+ }
+ </script>
+</element>
+
+<template>
+ <div>
+ <foo title="Hello" image-url="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></foo>
+ <text if="eventType">event: {{eventType}} - {{eventDetail}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ eventType: '',
+ eventDetail: {}
+ },
+ created: function () {
+ this.$on('notify', function(event) {
+ // When a notify comes, this handler will be run.
+ // `event.detail` will be `{a: 1}`
+ this.eventType = event.type
+ this.eventDetail = JSON.stringify(event.detail)
+ })
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/51e553ef43e5c744d05da1bb811903bf)
+
+## 从父组件向子组件通信
+
+同理，首先子组件要监听特定类型的自定义事件，而父组件可以使用 `this.$vm(id)` 找到父组件，然后再调用 `this.$vm(id).$emit(type, detail)` 方法，即可实现自上而下的通信。例如：
+
+```html
+<element name="foo">
+ <template>
+ <div>
+ <image if="imageUrl" src="{{imageUrl}}" class="thumb"></image>
+ <text>Foo</text>
+ </div>
+ </template>
+ <style>
+ .thumb { width: 200; height: 200; }
+ </style>
+ <script>
+ module.exports = {
+ data: {
+ imageUrl: ''
+ },
+ created: function() {
+ this.$on('changeImage', function (e) {
+ this.imageUrl = e.detail
+ }.bind(this))
+ }
+ }
+ </script>
+</element>
+
+<template>
+ <div>
+ <foo id="sub"></foo>
+ <text onclick="test">click to update foo</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ methods: {
+ test: function (e) {
+ this.$vm('sub').$emit(
+ 'changeImage',
+ 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
+ )
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/ea616d180620648e66554d42f57db82b)
+
+下一节：[页面整体配置](./config-n-data.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/composed-component.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/composed-component.md b/_drafts/v1.0/guide/syntax/composed-component.md
new file mode 100644
index 0000000..061eaf4
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/composed-component.md
@@ -0,0 +1,158 @@
+---
+title: 组件封装
+type: guide
+order: 3.6
+version: 0.10
+---
+
+# 组件封装
+
+经常我们会发现 Weex 的 `<template>` 中有很多可复用的部分，这时候我们可以将其封装成上层的自定义组件并重用。例如我们可以直接创建一个名为 `foo.we` 的文件，`<foo>` 就是自定义组件的组件名称：
+
+```html
+<!-- foo.we -->
+<template>
+ <div style="flex-direction: row;">
+ <image src="{{image}}"></image>
+ <text>{{title}}</text>
+ </div>
+</template>
+<script>
+ var env = 'foo'
+ module.exports = {
+ data: {
+ title: null,
+ image: null
+ }
+ }
+</script>
+```
+
+`foo.we` 的也包含 `<template>`，`<style>` 和 `<script>`，定义好了后，直接用 `<foo>` 标签即可将其引入到其它组件的 `<template>` 中，并且在 `<foo>` 标签上设置其 `data` 同名的特性会将这个值赋给 `<foo>` 的上下文：
+
+_注意事项：由于 HTML 语法中特性名是不区分大小写的，所以您无法直接用驼峰命名，我们提供了 hyphenated 语法，在解析之后这些名称会自动转换为驼峰命名 (比如在 `<template>` 的组件特性里用 `aaa-bbb-ccc` 表示其 `data` 或上下文里的 `aaaBbbCcc`)。_
+
+```html
+<!-- bar.we -->
+<template>
+ <foo title="..." image="..."></foo>
+</template>
+<script>
+ var env = 'bar'
+</script>
+```
+
+_注意事项：这里 `bar.we` 和 `foo.we` 必须在同目录下才能自动建立依赖关系。_
+
+_注意事项：`foo.we` 文件的 `<script>` 具有相对独立的作用域，不会和 `bar.we` 中的 `<script>` 产生干扰。同时 `<foo>` 对象具有相对独立的子组件上下文，即 `this`，也包括其定义的完全不同的数据和方法。_
+
+## 组件嵌套
+
+自定义组件也支持嵌套，如下：
+
+```html
+<!-- somepath/foo.we -->
+<template>
+ <div style="flex-direction: row;">
+ <image src="{{image}}"></image>
+ <text>{{title}}</text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ data: {
+ // These keys must be declared explicitly here
+ // or data-binding will not work from its parent.
+ title: null,
+ image: null
+ }
+ }
+</script>
+```
+
+```html
+<!-- samepath/foo.list.we -->
+<template>
+ <div>
+ <text>{{description}}</text>
+ <foo repeat="item in list" title="{{item.text}}" image="{{item.img}}"></foo>
+ </div>
+</template>
+<script>
+ module.exports = {
+ data: {
+ description: '',
+ // This key must be declared explicitly here
+ // or data-binding will not work from its parent.
+ list: []
+ }
+ }
+</script>
+```
+
+```html
+<!-- samepath/main.we -->
+<template>
+ <foo-list list="{{list}}"></foo-list>
+</template>
+<script>
+ module.exports = {
+ data: {
+ list: [
+ {text: '...', img: '...'},
+ {text: '...', img: '...'},
+ {text: '...', img: '...'},
+ ...
+ ]
+ }
+ }
+</script>
+```
+
+这里的 `main.we` 嵌套了 `<foo-list>`，`<foo-list>` 嵌套了 `<foo>`，同时组件可以正常的配合数据绑定、`repeat` 特性等使用。
+
+## 更多子组件的定义和书写方式
+
+除了在主文件同目录下创建和被封装组件同名的 `we` 文件之外，Weex 还支持另外几种子组件的书写方式：
+
+* 在 `<script>` 中通过 `require` 其它目录的 `we` 文件定义同名组件
+* 在主文件下新增 `<element name="xxx">` 标签，`name` 特性的值为新创建的组件名，其 `<element>` 内部的内容是定义该组件的代码
+
+比如：
+
+```html
+<!-- path-a/main.we -->
+<element name="foo">
+ <text>Foo</text>
+</element>
+
+<template>
+ <div>
+ <foo></foo>
+ <bar></bar>
+ </div>
+</template>
+
+<script>
+ require('path-b/bar.we')
+</script>
+```
+
+```html
+<!-- path-b/bar.we -->
+<template>
+ <text>Bar</text>
+</template>
+```
+
+这样的话，`path-a/main.we` 最终展示的结果是“Foo”和“Bar”两段文本。
+
+## 注意事项
+
+- 组件各自的 `<style>` 是相互独立的，不会担心不同组件中相同的 class name 相互干扰。
+- 如果自定义组件在父组件中有 `id` 特性，则可以在父组件上下文中通过 `this.$vm(id)` 接口来访问该自定义组件的上下文，也可以通过 `this.$el(id)` 来找到其背后真实的原生组件。更多详见[获取子组件信息](./id.html)
+- 自定义组件之间通信的问题可以参考[组件间通信](./comm.html)
+- 不论通过父组件把数据传递进来还是在当前组件内部对数据发起修改，只有在组件的 `data` 选项中明确写明的字段才会被正常的监听。
+- 任何组件目前均不支持自闭合标签的写法，请勿使用。
+
+下一节：[获取子组件信息](./id.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/config-n-data.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/config-n-data.md b/_drafts/v1.0/guide/syntax/config-n-data.md
new file mode 100644
index 0000000..cad39ab
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/config-n-data.md
@@ -0,0 +1,72 @@
+---
+title: 页面配置和页面数据
+type: guide
+order: 3.9
+version: 0.10
+---
+
+# 页面配置和页面数据
+
+在 Weex 中，你可以通过一些特殊的 `<script>` 进行页面整体配置。
+
+_注意事项：这些配置会代表页面整体，所以写在自定义子组件中是无效的，只有写在顶级 ViewModel 的 `<sctipt>` 中才会生效。_
+
+先举个例子：
+
+```html
+<!-- definition of sub components -->
+<element name="sub-component-a">...</element>
+<element name="sub-component-b">...</element>
+<element name="sub-component-c">...</element>
+
+<!-- definition of top-level component -->
+<template>...</template>
+<style></style>
+<script>
+ module.exports = {
+ data: { x: 1, y: 2 }
+ }
+</script>
+
+<!-- config and data -->
+<script type="config">
+ downgrade: {
+ ios: {
+ os: '9', // all of 9.x.x
+ app: '~5.3.2',
+ framework: '^1.3', // all of 1.3.x
+ deviceModel: ['AAAA', 'BBBB']
+ },
+ android: {
+ os: '*', // all of version
+ app: '^5',
+ framework: '',
+ deviceModel: ''
+ }
+ }
+</script>
+<script type="data">
+ { y: 200 }
+</script>
+```
+
+## `<script type="config">`
+
+开发者可以在顶级 ViewModel 中加入这样一段 `<script>`，以 JSON 格式描述页面整体的配置信息。
+
+目前支持的配置信息只有 `downgrade`：用来从平台、应用等维度描述页面的降级规则。这样设计对于产品迭代最大的帮助是可以在高版本中使用 Weex，而在低版本中使用之前已有的渲染方式，这部分控制降级的细节需要 native 接入的时候进行相应的识别和具体操作。
+
+未来这里会有更多的配置项出现在这里。
+
+## `<script type="data">`
+
+开发者可以在顶级 ViewModel 中加入这样一段 `<script>`，以 JSON 格式额外配置顶级 ViewModel 的数据，它会覆盖顶级 ViewModel 数据中相应的字段。比如上述例子中，最终的顶级 ViewModel 中的数据为 `{ x: 1, y: 200 }`。
+
+## 总结
+
+至此，Weex 基本的语法已经全部介绍过了。相信您对 Weex 的使用方式和开发方式有了更多的了解。
+
+接下来我们推荐您阅读：
+
+* [最佳实践](../how-to/index.html)
+* [Weex 手册](../../references/index.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/data-binding.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/data-binding.md b/_drafts/v1.0/guide/syntax/data-binding.md
new file mode 100644
index 0000000..bbefdd1
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/data-binding.md
@@ -0,0 +1,332 @@
+---
+title: 数据绑定
+type: guide
+order: 3.1
+version: 0.10
+---
+
+# 数据绑定
+
+Weex使用 _mustache_ 的语法 (`{% raw %}{{...}}{% endraw %}`) 来对 `<template>` 中的模板和 `<script>` 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。
+
+## 数据绑定路径
+
+```html
+<template>
+ <div>
+ <text style="font-size: {{size}}">{{title}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ size: 48,
+ title: 'Alibaba Weex Team'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/6d18c0e696d33705083e34ef387ac529)
+
+上面的代码会把 `title` 和 `size` 的数值绑定到模板内容上。
+
+我们也可以通过 `.` 符号来绑定数据结构中的字段。看一下下面的代码片段：
+
+```html
+<template>
+ <div>
+ <text style="font-size: {{title.size}}">{{title.value}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ title: {
+ size: 48,
+ value: 'Alibaba Weex Team'
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/e291bbe2d5c34fe04db92bc827697a4b)
+
+## 数据绑定表达式
+
+进行数据绑定时，Weex 支持一些简单的 JavaScript 表达式，例如：
+
+```html
+<template>
+ <div style="flex-direction: row;">
+ <text>{{firstName + ' ' + lastName}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ firstName: 'John',
+ lastName: 'Smith'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/aeef6c2ca9bd9b7c5d039ed84572e1ee)
+
+这些表达式会在当前的上下文中进行运算。
+
+## 计算属性 <sup>v0.5+</sup>
+
+数据绑定表达式已经非常方便了，但如果希望在模板里实现更复杂的逻辑判断，你也可以使用计算属性。例如：
+
+```html
+<template>
+ <div style="flex-direction: row;">
+ <text>{{fullName}}</text>
+ <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ firstName: 'John',
+ lastName: 'Smith'
+ },
+ computed: {
+ fullName: function() {
+ return this.firstName + ' ' + this.lastName
+ }
+ },
+ methods: {
+ changeName: function() {
+ this.firstName = 'Terry'
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/276e7c42a2d480d669868476e62b326e)
+
+同样能够达到相同的效果。这里我们引入了一个叫做 `fullName` 的计算属性，由 `firstName` 和 `lastName` 计算而成，在数据绑定的时候，如果 `firstName` 或 `lastName` 发生改变，`fullName` 都会自动重新计算并触发改变。
+
+另外计算属性还支持另外一种写法，就是同时定义一个计算属性的 getter 和 setter，这样的话当下面例子中的 `fullName` 被赋值时，`data` 里的 `firstName` 和 `lastName` 会被自动改变：
+
+```html
+<template>
+ <div style="flex-direction: row;">
+ <text>{{fullName}}</text>
+ <text onclick="changeName" style="margin-left: 10;">CHANGE NAME</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ firstName: 'John',
+ lastName: 'Smith'
+ },
+ computed: {
+ fullName: {
+ get: function() {
+ return this.firstName + ' ' + this.lastName
+ },
+
+ set: function(v) {
+ var s = v.split(' ')
+ this.firstName = s[0]
+ this.lastName = s[1]
+ }
+ }
+ },
+ methods: {
+ changeName: function() {
+ this.fullName = 'Terry King'
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/9f33809592391c566c886029c509c167)
+
+**注意事项：`data`、`methods`、`computed` 中的字段是不能相互重复的，因为它们都会通过组件实例的 `this` 访问到。**
+
+## 数据绑定在 `<template>` 中的特殊用法
+
+### 样式: `style` 或 `class`
+
+组件的样式能够通过 `style` 特性进行绑定：
+
+```html
+<template>
+ <div>
+ <text style="font-size: {{size}}; color: {{color}};">Hello World</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ size: 32,
+ color: '#ff0000'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/f53674fa7910d266e0a2d8a5c285d2b1)
+
+样式也能够通过 `class` 特性实现样式绑定，多个 class 名通过空格分隔：
+
+```html
+<template>
+ <div>
+ <text class="{{size}}">Hello</text>
+ <text class="title {{status}}">World</text>
+ </div>
+</template>
+
+<style>
+ .large { font-size: 64; }
+ .small { font-size: 32; }
+ .title { font-weight: bold; }
+ .success { color: #00ff00; }
+ .error { color: #ff0000; }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ size: 'large',
+ status: 'success'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/4260897c1526a685672dca95af271493)
+
+在上面的代码中如果 `{% raw %}{{size}}{% endraw %}` 和 `{% raw %}{{status}}{% endraw %}` 是空值, 就只有 `class="title"` 会被解析。
+
+延伸阅读：[style 和 class](./style-n-class.html)
+
+### 事件绑定：`on...`
+
+以 `on...` 开头的就是用于绑定事件的特性，特性名中 `on` 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如：
+
+```html
+<template>
+ <div>
+ <text onclick="toggle">Toggle: {{result}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ result: true
+ },
+ methods: {
+ toggle: function () {
+ this.result = !this.result
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
+
+除此之外 Weex 还支持更多的事件处理方式。
+
+延伸阅读：[事件处理](./events.html)
+
+### 展示逻辑控制 `if` & `repeat`
+
+`if` 特性能够通过特性值的真假来控制组建是否显示，_且 mustache 大括号可以省略_。例如：
+
+```html
+<template>
+ <div style="flex-direction: column;">
+ <text onclick="toggle">Toggle</text>
+ <image if="{{shown}}" src="{{imageUrl}}" class="logo"></image>
+ </div>
+</template>
+
+<style>
+ .logo { width: 512; height: 512; }
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ shown: true,
+ imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
+ },
+ methods: {
+ toggle: function () {
+ this.shown = !this.shown
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/3ec9347e4810f503b641849d214d8c15)
+
+`repeat` 特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。例如：
+
+```html
+<template>
+ <div>
+ <text repeat="(k,v) in list">{{k}} - {{v}}</text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ data: {
+ list: ['a', 'b', 'c']
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/db40d2341fdbf16d3d806f502189843d)
+
+延伸阅读：[展示逻辑控制](./display-logic.html)
+
+### 静态模板优化 `static` <sup>v0.9.2+</sup>
+
+`static` 特性可以一次性把数据设置到模板相应的位置上，但是今后不会随着数据的变化而更新。这样可以减少无谓的数据绑定，有效控制和优化长列表、纯静态页面在运行时的开销。不过你也要小心使用不要导致原本需要更新的视图没有触发更新。
+
+```html
+<template>
+ <div static>
+ <text>{{ word }}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ ready: function() {
+ this.word = 'Data changes' // UI won't be updated
+ },
+ data: {
+ word: 'Hello static'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/dbadfd66463a2c03e3e06d391b0ad8ec)
+
+如上所示，添加 `static` 关键字，渲染结果会是“Hello static”字样，相当于渲染一个静态的节点，`ready` 函数中对数据 `word` 的改变不会更新到视图。
+
+下一篇：[style 和 class](./style-n-class.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/display-logic.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/display-logic.md b/_drafts/v1.0/guide/syntax/display-logic.md
new file mode 100644
index 0000000..9498de2
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/display-logic.md
@@ -0,0 +1,252 @@
+---
+title: 展示逻辑控制
+type: guide
+order: 3.4
+version: 0.10
+---
+
+# 展示逻辑控制
+
+Weex 支持通过两种特殊的特性 `if` 和 `repeat` 确定组件的显示逻辑，这会使得整个界面的展示逻辑控制更加简单灵活。
+
+## `if`
+
+通过设置 `if` 特性值，你可以控制当前组件是否显示。如果值为真，则当前组件会被渲染出来，如果值为假则会被移除。例如：
+
+```html
+<template>
+ <div>
+ <text onclick="toggle">Toggle Image</text>
+ <image if="shown" src="{{imageUrl}}" style="width: 512; height: 512;"></image>
+ </div>
+</template>
+
+<script>
+module.exports = {
+ data: {
+ imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
+ shown: true
+ },
+ methods: {
+ toggle: function () {
+ this.shown = !this.shown
+ }
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/e0999a51fa404f48bbae177f1569cd0e)
+
+_注意事项：`if="condition"` 和 `if="{% raw %}{{condition}}{% endraw %}"` 都是可以的，两者等价使用。_
+
+_注意事项：`if` 不能用在 `<template>` 的根组件上，否则将无法被 Weex 正常的识别和处理。_
+
+### `if` 不会阻断子元素的数据更新
+
+下面这个例子在数据更新后 `item` 或 `item.image` 不存在的情况下会报错：
+
+```html
+<template>
+ <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
+ <image style="width: 100; height: 100;" src="{{item.image.url}}"></image>
+ </div>
+</template>
+```
+
+原因在于 Weex 本身的机制是数据更新在 DOM 更新之前，因此 `if` 数据更新之后，不支持阻断其子元素的数据更新，即 `if` 数据更新为 `false` 之后，内部的子元素仍然会触发自身的数据更新，找不到对应字段，导致报错，可参考这个 [issue](https://github.com/alibaba/weex/issues/1758)。
+
+因此，有两种解决方案：
+
+- 为 `img` 组件的 `src` 也增加容错方案：
+
+ ```html
+ <div if="{{(item && item.image)}}" style="width: 200; height: 200;">
+ <image style="width: 100; height: 100;" src="{{item && item.image && item.image.url}}"></image>
+ </div>
+ ```
+
+- 如果是在 `repeat` 的列表中，还可以使用 `track-by`强制不复用子元素解决。
+
+## `repeat`
+
+`repeat` 特性用于重复渲染一组相同的组件。它绑定的数据类型必须为数组，数组里的每一项数据可以体现在不同的组件特性、样式、事件绑定等。例如：
+
+``` html
+<template>
+ <div>
+ <div repeat="person in list" class="{{person.gender}}">
+ <text>{{person.nickname}}</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .male { background-color: #9999ff; }
+ .female { background-color: #ff9999; }
+</style>
+
+<script>
+module.exports = {
+ data: {
+ list: [
+ { gender: 'male', nickname: 'Li Lei' },
+ { gender: 'female', nickname: 'Han Meimei' },
+ { gender: 'male', nickname: 'Jim Green' }
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/8c87aac2820531090181c32fca41e913)
+
+此外，`repeat` 特性还支持绑定数组中数据项目的索引值。例如：
+
+``` html
+<template>
+ <div>
+ <div repeat="(index, person) in list" class="{{person.gender}}">
+ <text>{{index}} - {{person.nickname}}</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .male { background-color: #9999ff; }
+ .female { background-color: #ff9999; }
+</style>
+
+<script>
+module.exports = {
+ data: {
+ list: [
+ { gender: 'male', nickname: 'Li Lei' },
+ { gender: 'female', nickname: 'Han Meimei' },
+ { gender: 'male', nickname: 'Jim Green' }
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
+
+每一个昵称之前都有对应数组项目的索引值。
+
+_注意事项：同样的 `repeat="..."` 和 `repeat="{% raw %}{{...}}{% endraw %}"` 都是可以的，两者等价使用。_
+
+_注意事项：`if` 不能用在 `<template>` 的根组件上，否则将无法被 Weex 正常的识别和处理。_
+
+**注意事项: 当你修改 `repeat` 中的数组时，在写法上会受到一定的限制，具体如下：**
+
+**直接通过“角标”修改数组的某个项目 (如 `this.items[0] = ...`) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法：`this.items.$set(index, item)` 来完成相同的事情。**
+
+```javascript
+// 和 `this.items[0] = ...` 作用相同，但会自动触发视图更新
+this.items.$set(0, { childMsg: 'Changed!'})
+```
+
+**直接通过修改 `length` 来改变数组长度 (如 `this.items.length = 0`) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。**
+
+```javascript
+// 和 `this.items.length = 0` 作用相同，但会自动触发视图更新
+this.items = []
+```
+
+### `repeat` 特性中的 `$index` 形参
+
+在 `repeat` 特性值中，如果没有指定索引值的形参，则可以通过绑定形参 `$index` 来展示数组项目的索引值。例如：
+
+``` html
+<template>
+ <div>
+ <div repeat="person in list" class="{{person.gender}}">
+ <text>{{$index}} - {{person.nickname}}</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .male { background-color: #9999ff; }
+ .female { background-color: #ff9999; }
+</style>
+
+<script>
+module.exports = {
+ data: {
+ list: [
+ { gender: 'male', nickname: 'Li Lei' },
+ { gender: 'female', nickname: 'Han Meimei' },
+ { gender: 'male', nickname: 'Jim Green' }
+ ]
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/65d348256ab5c54aa996d3ee6b4ea115)
+
+渲染效果和上一个例子应该是相同的。
+
+### 在 `repeat` 中使用 `track-by` 特性追踪变化
+
+通常情况下，当更新 `repeat` 中绑定的数组时，所有数组项目关联的组件都会被重新渲染。如果其中部分索引值对应的数据未发生变更，那么最好是让这些组件在渲染层保持原样，仅更新数据有变化的节点。Weex 提供了 `track-by` 特性来辅助判断哪些数组项目发生了改变。
+
+首先 `track-by` 特性的值必须是在每一条数组项目中都有且值没有重复的一个字段名，用来区分和追踪每一条数据项增删与否或次序变化与否的关键依据。每当数组发生变化之后，新老数组数据会根据 `track-by` 特性值所代表的字段重新匹配，然后再决定渲染层应该新建或删除一个组件？还是移动一个组件？还是讲组件保持原来的位置。默认的 `track-by` 的值就是数组的索引值。例如：
+
+``` html
+<template>
+ <div>
+ <div repeat="person in list" class="{{person.gender}}">
+ <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
+ </div>
+ <text>----</text>
+ <div repeat="person in list" class="{{person.gender}}" track-by="id">
+ <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
+ </div>
+ <text>----</text>
+ <!-- something wrong here: duplicated track-by value -->
+ <div repeat="person in list" class="{{person.gender}}" track-by="nickname">
+ <text>{{$index}} - {{person.id}} - {{person.nickname}}</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .male { background-color: #9999ff; }
+ .female { background-color: #ff9999; }
+</style>
+
+<script>
+module.exports = {
+ data: {
+ list: [
+ { id: 11, gender: 'male', nickname: 'Li Lei' },
+ { id: 22, gender: 'female', nickname: 'Han Meimei' },
+ { id: 33, gender: 'male', nickname: 'Jim Green' }
+ ]
+ },
+ ready: function () {
+ this.list.unshift({ id: 44, gender: 'female', nickname: 'Han Meimei' })
+ }
+}
+</script>
+```
+
+[体验一下](http://dotwe.org/c124bfc21e6d92271356acbea232089b)
+
+这种情况下，第一个列表的更新策略是：
+
+1. 把第一个 `<text>` 赋值为 `Han Meimei`
+2. 第二个赋值为 `Li Lei`
+3. 第三个赋值为 `Han Meimei`
+4. 最后新建一个 `<text>` 并赋值为 `Jin Green`
+
+第二个列表的更新策略是：
+
+1. 在最前面新建一个 `<text>` 并赋值为 `Han Meimei`
+
+第三个列表的更新会遇到问题，因为有两个数组项目的 `nickname` 值都是 `Han Meimei` 所以造成意料之外的渲染结果 (只渲染了三个数组项目)。
+
+下一节：[渲染过程控制](./render-logic.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/events.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/events.md b/_drafts/v1.0/guide/syntax/events.md
new file mode 100644
index 0000000..4898219
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/events.md
@@ -0,0 +1,103 @@
+---
+title: 事件处理
+type: guide
+order: 3.3
+version: 0.10
+---
+
+# 事件处理
+
+Weex 允许对 `<template>` 中的元素绑定事件处理函数。
+
+## 基本语法
+
+以 `on...` 开头的就是用于绑定事件的特性，特性名中 `on` 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。_函数名外不需要添加 mustache 语法中的大括号_。例如：
+
+```html
+<template>
+ <div>
+ <text onclick="toggle">Toggle: {{result}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ result: true
+ },
+ methods: {
+ toggle: function () {
+ this.result = !this.result
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/2f9f910a60ffc1ed54c797390d6615e1)
+
+## 内联事件处理参数
+
+同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如：
+
+```html
+<template>
+ <div>
+ <text onclick="update(1, 2)">Result: {{result}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ result: '<empty>'
+ },
+ methods: {
+ update: function (x, y) {
+ this.result = x + y
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/777056d8985e73567464e2d66cbe73fc)
+
+## 特殊的内联事件处理参数
+
+额外的，在这种内联的事件绑定写法中，你可以使用一个特殊的参数 `$event`，代表事件描述对象，即默认事件处理函数的第一个参数。所以 `<template>` 中的 `onclick="foo"` 和 `onclick="foo($event)"` 是等价的，`$event` 的用法可以更多参考下面的例子
+
+```html
+<template>
+ <div>
+ <text onclick="update($event, 1, 2)">Result: {{result}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ result: '<empty>'
+ },
+ methods: {
+ update: function (e, x, y) {
+ this.result = e.type + (x + y)
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/5e1e7c22f036725e44c3ff492f173400)
+
+## 事件描述对象
+
+每当一次事件被触发的时候，都会产生一个事件描述对象，该对象会默认作为第一个参数传递给事件处理函数，或以 `$event` 形参的方式出现在内联事件处理函数中。
+
+每个事件描述对象至少包含以下几个特性：
+
+- `type` (`string`): 事件名称, 如: `click`
+- `target` (`Element`): 目标元素
+- `timestamp` (`number`): 事件触发时的时间戳数字
+
+下一节：[展示逻辑控制](./display-logic.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/id.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/id.md b/_drafts/v1.0/guide/syntax/id.md
new file mode 100644
index 0000000..0a204ad
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/id.md
@@ -0,0 +1,124 @@
+---
+title: 找节点
+type: guide
+order: 3.7
+version: 0.10
+---
+
+# 找节点
+
+在 Weex 中，您可以通过在特定的子组件上设置 `id` 特性，以此在该 `<template>` 内唯一标识这个组件。
+
+## 获取子组件
+
+您可以在父组件上下文中使用 `this.$el(id)` 来找到该组件，以运用 `scrollToElement()` 为例：
+
+```html
+<template>
+ <div>
+ <text id="goto-top">Top</text>
+ <div style="height: 10000; background-color: #999999;"></div>
+ <text onclick="back2Top">Back to Top</text>
+ </div>
+</template>
+<script>
+ var dom = require('@weex-module/dom')
+ module.exports = {
+ methods: {
+ back2Top: function () {
+ var el = this.$el('goto-top')
+ dom.scrollToElement(el, { offset: 10 })
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/ed07068ef6f038d6c39af6c971ad08a0)
+
+### `id` 和 `repeat` 特性配合使用
+
+`id` 也可以和 `repeat` 语法配合使用，关于 `repeat` 更多详见 [展示逻辑控制](./display-logic.html)，但是要确保循环的节点需要用不同的 `id`，比如：
+
+```html
+<template>
+ <div>
+ <image
+ repeat="image in images"
+ id="img-{{image.id}}"
+ src="{{image.url}}"
+ onclick="getImageId"></image>
+ </div>
+</template>
+<script>
+module.exports = {
+ data: {
+ images: [
+ {id: 1, url: '...'},
+ {id: 2, url: '...'},
+ {id: 3, url: '...'},
+ ...
+ ]
+ },
+ methods: {
+ getImageId: function(e) {
+ // get e.target.id
+ }
+ }
+}
+</script>
+```
+
+### 获取自定义子组件的上下文
+
+另外，我们还可以通过 `this.$vm(id)` 方法可以访问自定义子组件的上下文：
+
+```html
+<element name="foo">
+ <template>
+ <div style="flex-direction: row;">
+ <text>{{title}}</text>
+ </div>
+ </template>
+ <script>
+ module.exports = {
+ data: {
+ title: null
+ },
+ methods: {
+ setTitle: function (text) {
+ this.title = text
+ }
+ }
+ }
+ </script>
+</element>
+
+<template>
+ <div>
+ <foo id="sub" title="Hello"></foo>
+ <text onclick="update">Click Me to Update</text>
+ </div>
+</template>
+<script>
+ module.exports = {
+ methods: {
+ update: function (e) {
+ this.$vm('sub').setTitle('Updated')
+ }
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/1d332e6c238462e841743035c6bc697e)
+
+实际上，如上述的例子，我们找到子组件上下文之后，直接在这个上下文中调用子组件方法或修改子组件的数据并不是我们认为最好的方式，我们更倾向于通过一套确定的组件间通信机制来完成这一工作。
+
+### 获取父级组件或其上下文
+
+除了可以自上而下寻找组件或其上下文，Weex 也支持自下而上做相同的事情。当前上下文中的 `this._parent` 可以获取其父级上下文。除了父级上下文，对于父级组件本身，相关处理也可以基于先获取父级上下文，然后在父级组件内部完成更多更细致的处理。更多内容可以深入了解组件间通信的部分。
+
+_注意事项：在未来的版本中 `this._parent` 将改为 `this.$parent`。_
+
+下一篇： [组件间通信](./comm.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/index.md b/_drafts/v1.0/guide/syntax/index.md
new file mode 100644
index 0000000..df0c33a
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/index.md
@@ -0,0 +1,134 @@
+---
+title: 语法介绍
+type: guide
+order: 3
+has_chapter_content: true
+version: 0.10
+---
+
+# 语法综述
+
+Weex 代码由 `<template>`、`<style>`、`<script>` 三个部分构成。
+
+- `<template>`：_必须的_，使用 HTML 语法描述页面结构，内容由多个标签组成，不同的标签代表不同的组件。
+- `<style>`：_可选的_，使用 CSS 语法描述页面的具体展现形式。
+- `<script>`：_可选的_，使用 JavaScript 描述页面中的数据和页面的行为，Weex 中的数据定义也在 `<script>` 中进行。
+
+```html
+<template>
+ <!-- (required) the structure of page -->
+</template>
+
+<style>
+ /* (optional) stylesheet */
+</style>
+
+<script>
+ /* (optional) the definition of data, methods and life-circle */
+</script>
+```
+
+这是一个典型的 M-V-VM 架构：通过 ViewModel 把 Model 和 View 建立更直接有效的关系，ViewModel 的实现以 `<script>` 的内容为主。
+
+## `<template>` 模板
+
+`<template>` 中的标签组织类似如下代码：
+
+``` html
+<template>
+ <div>
+ <image style="width: 200; height: 200;" src="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
+ <text>Alibaba Weex Team</text>
+ </div>
+</template>
+```
+
+[体验一下](http://dotwe.org/5256e6e610ded330369f2e8010f7f0e6)
+
+`<div>` 标签是一个根节点，里面包含描述图片的 `<image>` 标签和描述文字的 `<text>` 标签。
+
+和 HTML 类似，不同标签代表的组件有各自的特性 (attribute)，部分组件可以拥有自己的子组件。
+
+延伸阅读：[内置组件列表](../../references/components/index.html)
+
+根节点：每个 Weex 页面最顶层的节点，我们称为根节点。下面是目前我们支持的三种根节点：
+
+- `<div>`：普通根节点，有确定的尺寸，不可滚动。
+- `<scroller>`：可滚动根节点，适用于需要全页滚动的场景。
+- `<list>`：列表根节点，适用于其中包含重复的子元素的列表场景。
+
+目前 Weex 仅支持以上三种根节点。
+
+_注意事项：`<template>` 只支持一个根节点，多个根节点将无法被 Weex 正常的识别和处理。_
+
+## `<style>` 样式
+
+我们可以把 Weex 中的样式语法理解为 CSS 的一个子集，两者有一些细微的区别
+
+第一种写法是，你能在标签上，直接通过内联 `style` 特性编写样式. 第二种写法，通过标签中的 `class` 特性与 `<style>` 标签中定义的样式建立对应关系，让 `<style>` 标签中定义的样式作用于特定标签之上。以下是例子：
+
+```html
+<template>
+ <div>
+ <text style="font-size: 64;">Alibaba</text>
+ <text class="large">Weex Team</text>
+ </div>
+</template>
+
+<style>
+ .large {font-size: 64;}
+</style>
+```
+
+[体验一下](http://dotwe.org/d8af9186bf045df74e7a538d91798db4)
+
+上面的两个 `<text>` 组件都被设置了同样的字体大小，但分别用了两种不同的方式。
+
+延伸阅读：[Weex 通用样式](../references/common-style.html)
+
+**注意**：Weex 遵循 [HTML 特性](https://en.wikipedia.org/wiki/HTML_attribute) 命名规范，所以特性命名时**请不要使用陀峰格式 (CamelCase)**，采用以“-”分割的 **long-name** 形式。
+
+## `<script>` 脚本
+
+`<script>` 描述页面中的数据和页面的行为，代码遵循 JavaScript (ES5) 语法 (目前 iOS 端和浏览器端取决于内置 JavaScript 引擎对 ES 版本的支持情况，安卓端能够完整支持 ES5，但不原生支持 ES6，需要用类似 [babel](http://babeljs.io) 的工具对源代码进行转换)。下面是一个例子：
+
+``` html
+<template>
+ <div>
+ <text>The time is {{datetime}}</text>
+ <text>{{title}}</text>
+ <text>{{getTitle()}}</text>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ title: 'Alibaba',
+ datetime: null
+ },
+ methods: {
+ getTitle: function () {
+ return 'Weex Team'
+ }
+ },
+ created: function() {
+ this.datetime = new Date().toLocaleString()
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/8095bed0d9db4299fb39975d4b35b13f)
+
+上面 `<script>` 标签中定义了被赋值给 `module.exports` 的对象，这个对象其实就是一个 ViewModel 选项，让三个 `<text>` 标签显示当前时间、“Alibaba”字样和“Weex Team”字样。
+
+选项中的 `data` 用于存储数据，这些数据可以通过[数据绑定](./data-binding.html)机制和 `<template>` 标签中的内容绑定起来。当这些数据变更时，被绑定的模板内容也会自动更新。这些数据在 `<script>` 中的各个方法中可以通过类似 `this.x` 的方式进行读写操作。
+
+而选项中的 `methods` 里则列出了当前上下文可执行的各种函数，比如 `getTitle()`。
+
+选项中最后的 `created` 是生命周期函数，会在数据初始化之后、界面被绑定数据并渲染之前执行。类似的生命周期函数还有 `init`、`ready` 等，在这个例子中，`datetime` 会在界面渲染之前被更新为当前的时间。
+
+延伸阅读：[ViewModel 选项](../../references/component-defs.html)
+
+接下来，我们来详细介绍[数据绑定](./data-binding.html)的相关知识。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/render-logic.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/render-logic.md b/_drafts/v1.0/guide/syntax/render-logic.md
new file mode 100644
index 0000000..f516733
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/render-logic.md
@@ -0,0 +1,44 @@
+---
+title: 渲染过程控制
+type: guide
+order: 3.5
+version: 0.10
+---
+
+# 渲染过程控制
+
+## `append`
+
+`append` 特性定义了当前组件的子组件：
+
+1. 以一整棵树的方式一次性添加到视图中 (`append="tree"`)，还是
+2. 每个子组件都产生一次单独的添加到视图的指令 (`append="node"`)
+
+``` html
+<template>
+ <div>
+ <div>
+ <text>Hello</text>
+ <text>Weex</text>
+ </div>
+ <div append="node">
+ <text>Hello</text>
+ <text>Weex</text>
+ </div>
+ <div append="tree">
+ <text>Hello</text>
+ <text>Weex</text>
+ </div>
+ </div>
+</template>
+```
+
+[体验一下](http://dotwe.org/417c75415efce66d8e22bf5942b380ee)
+
+在上面的代码中，第一组和第二组 `<div>` 的渲染过程相同，即先添加空的父级 `<div>`，然后插入第一个 `<text>` Hello，然后插入第二个 `<text>` Weex；第三组 `<div>` 则是连带两个 `<text>` 子组件一齐传给渲染层进行渲染的。
+
+渲染结果显而易见，前两组渲染方式会使首次绘制的响应速度比后者快些，但是总渲染时间可能比第三组 `append="tree"` 更长。开发者可以根据实际界面的情况自行选择合理的渲染过程。
+
+默认情况下，除了 `<cell>` 组件的默认渲染过程是 `tree` 模式，其它组件都默认按照 `node` 模式进行渲染。
+
+下一节：[自定义组件](./composed-component.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/guide/syntax/style-n-class.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/guide/syntax/style-n-class.md b/_drafts/v1.0/guide/syntax/style-n-class.md
new file mode 100644
index 0000000..afe2de1
--- /dev/null
+++ b/_drafts/v1.0/guide/syntax/style-n-class.md
@@ -0,0 +1,117 @@
+---
+title: CSS 样式和类
+type: guide
+order: 3.2
+version: 0.10
+---
+
+# CSS 样式和类
+
+## 基础语法
+
+CSS 样式可以理解为一系列的键值对，其中的每一对描述了一个特定的样式，例如组件的宽或者高。
+
+```css
+.div {
+ width: 400;
+ height: 50;
+}
+```
+
+键值对的形式是 `prop-name: prop-value;`。键名是 `prop-name`，键值是 `prop-value`。 一般情况下，键名按照连接符的方式进行命名，键和值之间由冒号 `:` 进行分隔，每对键值之间由分号 `;` 进行分隔。
+
+在 Weex 页面上样式有两种形式：
+
+- `<template>` 中的 `style` 特性
+- `<style>` 样式表
+
+### `<template>` 中的 `style` 特性
+
+在 `style` 特性中编写样式，例如：
+
+```html
+<template>
+ <div style="width: 400; height: 50;">
+ ...
+ </div>
+</template>
+```
+
+这段代码的意思是 `<div>` 组件的宽和高分别为 400 像素和 50 像素。
+
+### `<style>` 样式表
+
+例如:
+
+```html
+<style>
+ .wrapper { width: 600; }
+ .title { width: 400; height: 50; }
+ .highlight { color: #ff0000; }
+</style>
+```
+
+样式表包含了多个样式规则，每条规则有一个对应的类，以及由 `{...}` 包括的若干条样式。例如：
+
+```css
+.title { width: 400; height: 50; }
+```
+
+### `class` 特性
+
+`<template>` 标签中的 `class` 特性值用来匹配 `<style>` 样式表中的一个或多个 class 名，多个 class name 之间由空格分隔。例如：
+
+```html
+<template>
+ <div class="wrapper">
+ <text class="title">...</text>
+ <text class="title highlight">...</text>
+ </div>
+</template>
+<style>
+ .wrapper { width: 600; }
+ .title { width: 400; height: 50; }
+ .highlight { color: #ff0000; }
+</style>
+```
+
+[体验一下](http://dotwe.org/8487e2a33cd051c9adfa887d0bafbb44)
+
+这段代码的含义是 `<div>` 组件的宽度是 600 像素，两个 `<text>` 组件的尺寸为 400x50，其中第二个文本组件是红色字。
+
+**注意事项**
+
+- 为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
+- 标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。
+- 标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 `px` 单位可以忽略不写，直接使用对应的数值。更多详情请查看[通用样式](../references/common-style.html)。
+- 子元素的样式不会继承自父元素，这一点与标准 CSS 不同，比如 `color` 和 `font-size` 等样式作用在 `<text>` 上层的 `<div>` 上是无效的。
+- 标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 `font-size`、`color` 等其它样式。
+
+## 与数据绑定结合
+
+请查阅[数据绑定](./data-binding.html)中有关 `style` 和 `class` 特性的相关部分。这里简单举个例子：
+
+```html
+<template>
+ <div>
+ <text style="font-size: {{fontSize}};">Alibaba</text>
+ <text class="large {{textClass}}">Weex Team</text>
+ </div>
+</template>
+<style>
+ .large {font-size: 32;}
+ .highlight {color: #ff0000;}
+</style>
+<script>
+ module.exports = {
+ data: {
+ fontSize: 32,
+ textClass: 'highlight'
+ }
+ }
+</script>
+```
+
+[体验一下](http://dotwe.org/440d3318dc7b83e3bb0a110f3b3236ca)
+
+下一篇：[事件处理](./events.html)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/index.md b/_drafts/v1.0/index.md
new file mode 100644
index 0000000..9e59b8c
--- /dev/null
+++ b/_drafts/v1.0/index.md
@@ -0,0 +1,5 @@
+layout: index
+type: index
+subtitle: 快速、简洁且高效
+version: 0.10
+---
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/migration/difference.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/migration/difference.md b/_drafts/v1.0/migration/difference.md
new file mode 100644
index 0000000..b11c6c2
--- /dev/null
+++ b/_drafts/v1.0/migration/difference.md
@@ -0,0 +1,249 @@
+---
+title: Weex 和 Vue 2.x 的语法差异
+type: references
+order: 12.2
+version: 2.1
+---
+
+# Weex 和 Vue 2.x 的语法差异
+
+## Overview
+
+
+| | Weex | Vue |
+| ---- | ---- | --- |
+| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
+| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
+| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
+| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
+| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
+| 事件绑定 | `onclick="handler"` | `@click="handler"` |
+| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
+| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
+| 内容/槽 | `<content></content>` | `<slot></slot>` |
+| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
+| 标签 ID | `id="xxx"` | `ref="xxx"` |
+| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
+
+
+## Reference
+
+See the source code of `weex-vue-migration` for more details:
+
++ [template-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/template-rewriter/rewriter.js)
++ [script-rewriter](https://github.com/songsiqi/weex-vue-migration/blob/master/src/script-rewriter/rewriter.js)
+
+## LifeCycle Hooks 生命周期钩子
+| weex | vue | Description |
+| --------- | ------------- | ------------------------- |
+| init | beforeCreate | 组件实例刚刚被创建，组件属性如data计算之前 |
+| created | created | 组件实例创建完成，属性已绑定，但DOM还未生成 |
+| | beforeMount | 模板编译/挂载之前 |
+| ready | mounted | 模板编译/挂载之后 |
+| | beforeUpdate | 组件更新之前 |
+| | updated | 组件更新之后 |
+| | activated | for`keep-alive`, 组件被激活时调用 |
+| | deactivated | for`keep-alive`, 组件被移除时调用 |
+| | beforeDestroy | 组件被销毁前调用 |
+| destroyed | destroyed | 组件被销毁后调用 |
+
+# Data Binding 数据绑定
+
+在weex中，使用{% raw %}{{…}}{% endraw %}在`<template>`中绑定在`<script>`里定义的数据；在vue中，需要在要绑定的属性前加 `:` 。如以下示例。
+
+* 类名
+
+ - weex
+
+ ```html
+ <div class="btn btn-{{type}}"></div>
+ ```
+
+ - vue
+
+ ```html
+ <div :class="['btn', 'btn-' + type]"></div>
+ ```
+
+* 样式绑定
+
+ * weex
+
+ ```html
+ <div style="color:{{textColor}}"></div>
+ ```
+
+ * vue
+
+ ```html
+ <div :style="{color: textColor}"></div>
+ ```
+
+# if指令
+
+* weex
+
+ ```html
+ <image src="..." if="{{shown}}"></image>
+ ```
+
+ or
+
+ ```html
+ <image src="..." if="shown"></image>
+ ```
+
+* vue
+
+ ```html
+ <image src="..." v-if="shown"></image>
+ ```
+
+# 循环指令
+
+* weex: repeat
+ - `$index`为索引
+
+ ```html
+ <div repeat="{{list}}">
+ <text>No. {{$index + 1}}</text>
+ <div>
+ ```
+
+ or
+
+ ```html
+ <div repeat="{{v in list}}">
+ <text>No. {{$index + 1}}, {{v.nickname}}</text>
+ </div>
+ ```
+
+ - 对象参数的顺序
+
+ ```html
+ <div repeat="{{(key, value) in list}}">
+ <text>No. {{key + 1}}, {{value.nickname}}</text>
+ </div>
+ ```
+
+ - `track-by`
+
+ ```html
+ <div repeat="{{item in items}}" track-by="item.id" class="{{gender}}"></div>
+ ```
+
+* vue: v-for
+
+ - 移除`$index`索引
+
+ - 对象参数的改变：改为(value, key), 与通用的对象迭代器保持一致
+
+ ```html
+ <div repeat="{{(value, key) in list}}">
+ <text>No. {{key + 1}}, {{value.nickname}}</text>
+ </div>
+ ```
+
+ - `track-by` 替换为`v-bind`
+
+ ```html
+ <div v-for="item in items" v-bind:key="item.id">
+ ```
+
+# 初始化数据
+
+* weex
+
+ ```javascript
+ data: { value: 'x' }
+ ```
+
+* vue
+
+ ```javascript
+ props: { value: { default: 'x' } }
+ ```
+
+ 动态数据
+
+ ```javascript
+ data: function () { return { value: 'x' } }
+ ```
+
+
+# 围绕DOM的实例方法
+
+* 获取节点
+
+ - weex: `this.$el('xxx')`
+
+ ```html
+ <template>
+ <container>
+ <text id="top">Top</text>
+ </container>
+ </template>
+ <script>
+ module.exports = {
+ methods: {
+ toTop: function () {
+ var top = this.$el('top')
+ }
+ }
+ }
+ </script>
+ ```
+
+ - vue
+
+ ```javascript
+ this.$refs.xxx
+ ```
+
+
+
+# 事件
+* 事件绑定
+ - weex
+
+ ```html
+ <div onclick="handler"></div>
+ ```
+
+ - vue
+
+ ```html
+ <div @click="handler"></div>
+ ```
+
+* 事件触发
+ - weex: dispatch和broadcast
+
+ ```javascript
+ this.$dispatch()
+ ```
+
+ ```javascript
+ this.$broadcast()
+ ```
+
+ - vue: emit
+
+ ```javascript
+ this.$emit()
+ ```
+
+ > 注：Weex 的 `$dispatch` 与组件无关，在任意组件中都可以通过 `$on` 捕获到，Vue 的`$emit` 用于触发组件(标签)的自定义事件。
+
+* 原生事件
+ - weex
+
+ ```javascript
+ onclick="xxx"
+ ```
+
+ - vue
+
+ ```javascript
+ @click.native="xxx"
+ ```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/migration/index.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/migration/index.md b/_drafts/v1.0/migration/index.md
new file mode 100644
index 0000000..1238936
--- /dev/null
+++ b/_drafts/v1.0/migration/index.md
@@ -0,0 +1,11 @@
+---
+title: 迁移
+type: references
+order: 12
+version: 2.1
+---
+
+# 迁移
+
+- [如何将原有 Weex 项目改造成 Vue 版本](./migration-from-weex.html)
+- [Weex 和 Vue 2.x 的语法差异](./difference.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/migration/migration-from-weex.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/migration/migration-from-weex.md b/_drafts/v1.0/migration/migration-from-weex.md
new file mode 100644
index 0000000..34c3c6d
--- /dev/null
+++ b/_drafts/v1.0/migration/migration-from-weex.md
@@ -0,0 +1,116 @@
+---
+title: 如何将原有 Weex 项目改造成 Vue 版本
+type: references
+order: 12.1
+version: 2.1
+---
+
+# 如何将原有 Weex 项目改造成 Vue 版本
+
+Weex 本身有一套语法规则，和 Vue 本身很相似，现在 Weex 与 Vue 有了官方合作，支持将 Vue 2.x 作为内置的前端框架，我们也推荐大家使用 Vue 2.x 的语法开发原生应用。对于现存旧版的 `.we` 文件，建议大家将其改造成 Vue 版本。
+
+## 要解决的问题
+
+> 将内核切换成 Vue 之后，原先基于 Weex 语法开发的项目将如何过渡到 Vue ？
+
+首先需要明确一点：Weex 原有的前端框架也会继续存在于 WeexSDK 中，依然支持 `.we` 文件格式的写法。
+
+此外，由于 `.we` 和 `.vue` 文件的格式本身就比较接近，所以迁移成本比较小，建议大家将现有 `.we` 格式的文件都转换成 `.vue` 格式。我们也推出了相应的工具和方法辅助迁移，在内部也有大量的成功实践，下边将重点介绍一下将 `.we` 文件转成 `.vue` 文件的方法。
+
+## 第一步，借助工具实现语法转换
+
+首先介绍一个工具： **[weex-vue-migration](https://github.com/songsiqi/weex-vue-migration)** ，它可以自动将 `.we` 文件转为 `.vue` 文件，绝大多数的模板语法都能自动转换，语法差异如下：
+
+| | Weex | Vue |
+| ---- | ---- | --- |
+| 生命周期 | `ready: function() {}` | `mounted: function() {}` |
+| 条件指令 | `if="{% raw %}{{!foo}}{% endraw %}"` | `v-if="!foo"` |
+| 循环指令 | `repeat="{% raw %}{{item in list}}{% endraw %}"` | `v-for="item in list"` |
+| 样式类名 | `class="btn btn-{% raw %}{{type}}{% endraw %}"` | `:class="['btn', 'btn-' + type]"` |
+| 内联样式 | `style="color:{% raw %}{{textColor}}{% endraw %}"` | `:style="{ color: textColor }"` |
+| 事件绑定 | `onclick="handler"` | `@click="handler"` |
+| 原生事件 | `onclick="xxx"` | `@click.native="xxx"` |
+| 数据绑定 | `src="{% raw %}{{rightItemSrc}}{% endraw %}"` | `:src="rightItemSrc"` |
+| 内容/槽 | `<content></content>` | `<slot></slot>` |
+| 数据初始化 | `data: { value: 'x' }` | `data: function() { return { value: 'x' } }` |
+| 标签 ID | `id="xxx"` | `ref="xxx"` |
+| 获取节点 | `this.$el('xxx')` | `this.$refs.xxx` |
+
+想要了解更多语法差异的细节，可以参考这篇文章：[《Weex 和 Vue 2.x 的语法差异》](./difference.html) 。
+
+### 使用方法
+
+首先安装工具：
+
+```bash
+npm install weex-vue-migration -g
+```
+
+转换文件：
+
+```bash
+weex-vue-migrate demo.we
+```
+
+转换成功后，将会在当前目录下生成 `demo.vue` 文件，控制台将会有如下输出：
+
+```
+[Success]: Migrate demo.we => demo.vue in 33ms
+Migration finished in 0.035s
+```
+
+除了逐个转换 `.we` 文件以外，`weex-vue-migration` 还支持批量转换整个目录，参考其[说明文档](https://github.com/songsiqi/weex-vue-migration/blob/master/README.md)可以了解更详细的使用方法。
+
+### 注意事项
+
+转换工具将不再支持 Weex 中废弃的语法，如果代码中有如下写法，建议先手动修改再做转换。
+
+0. 忽略 `require('@weex-components')` 语句，可以通过 npm 包的方式引入外部组件。
+0. 无法转换 `repeat="list"` 写法，仅支持 `repeat="item in list"` 格式。
+0. 不支持转换 `<script type="config"></script>`，目前 Vue 中不支持原有的降级配置。
+
+## 第二步，手动调整代码细节
+
+模板和样式的转换都可以借助工具轻易转换过来，`<script>` 中基本的语法也可以转换；但是由于 javascript 的写法比较灵活，仅仅使用工具做转换，并不一定能完美过渡。工具只能处理语法但是理解不了代码中的逻辑，在 Weex 和 Vue 的框架特性存在一些差异，有些差异还是需要手动修改才可以生效。
+
+> 提示：在代码中使用的“黑科技”越多，项目就越难以转换。
+
+### 样式单位
+
+在 `.we` 文件写样式时，开发者通常都不写长度单位，默认会被视为 `px`。在新的 Vue 版本的 Web 渲染器中，`<style>` 中的样式将会直接转化成 CSS class，如果不写单位、浏览器将无法正确识别，会导致在 Web 端无法正常渲染。Native 环境中不受影响。
+
+尽管不影响 Native 页面的渲染，也建议给样式长度加上单位 `px`。
+
+### 旧框架中的内置属性
+
++ `vm._app`
+ + `vm._app.differ`
+ + `vm._app.doc`
+ + `vm._app.updateActions()`
+
+### 事件派发机制
+
++ `$dispatch` 、`$broadcast` 、`$call` 方法已经废弃。
++ `$emit` 行为不一致。
+
+可以使用 Vuex 管理数据状态。
+
+### 直接操作 Virtual-DOM
+
+Weex 和 Vue 中的 Virtual-DOM 格式并不相同，如果你使用了 `this.$el('id')` 获取了某个组件的 element 之后，又修改了其中的某些属性或者调用了某些方法，这些操作在 Vue 中很难找到直接的对应写法。
+
+从另一个角度讲，我们也非常不建议在 Weex 或 Vue 项目中直接操作 Virtual-DOM，这些写法都应该修改。
+
+## 调整开发环境和工具
+
+在文件转换完成后，还需要重新调整一下开发环境。
+
+### 文件的编译
+
+`weex-loader` 同时支持编译 `.we` 和 `.vue` 文件，如果你使用的是 `webpack` 来配置编译环境，将不需要做任何改变就能直接编译 `.vue` 文件。
+
+需要注意的是，Vue 本身就是一个独立的前端框架，使用 Vue 编写的项目在 Web 上完全可以不依赖 Weex 容器运行。在这种情况下，需要配置基于 `vue-loader` 的编译脚本生成适用于 Web 平台 js 文件；然后引入 Vue 格式的 Weex 组件库就可以在 Web 中。
+
+### 辅助工具
+
+Weex 提供了 [weex-toolkit](https://github.com/weexteam/weex-toolkit) 的脚手架工具来辅助开发和调试、[weex-pack](https://github.com/weexteam/weex-pack) 实现打包原生应用；同样在 Vue 中也有 [vue-cli](https://github.com/vuejs/vue-cli) 脚手架工具。Weex 和 Vue 的工具互相做了适配，建议在创建项目和开发 Vue 项目的时候使用 `vue-cli` ，在调试时使用 `weex-toolkit`，在打包原生应用时使用 `weex-pack` 。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/api.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/api.md b/_drafts/v1.0/references/api.md
new file mode 100644
index 0000000..e3e5e4b
--- /dev/null
+++ b/_drafts/v1.0/references/api.md
@@ -0,0 +1,67 @@
+---
+title: ViewModel APIs
+type: references
+order: 1.3
+version: 0.10
+---
+
+# 接口
+
+你可以在组件的方法中通过 `this` （Vm）上下文访问这些 API。
+
+例子：
+
+```html
+<script>
+module.exports = {
+ methods: {
+ somemethod: function() {
+ this.$vm('someId');
+ }
+ }
+}
+</script>
+```
+
+## $(id)
+
+**不建议使用**，请使用 `$vm` 代替。
+## $el(id)
+
+返回对应 id 的元素对象的引用。
+### Arguments
+- `id` _(string)_: 唯一标识符。
+### Returns
+- _(Element)_: 一个元素对象的引用。
+### Tips
+- id 只能保证是当前（页面）组件中是唯一的，如果你需要寻找父组件或子组件，你可以利用组件间的通信模式实现。
+- 延伸阅读： [id](../guide/syntax/id.md)，[Communicate Between Components](../guide/syntax/comm.md)
+## $vm(id)
+
+返回对应 id 的 vm 对象引用。
+### Arguments
+- `id` _(String)_: 唯一标识符。
+### Returns
+- `vm` _(Vm)_: 一个 Vm 对象引用。
+### Tips
+- id 只能保证是当前（页面）组件中是唯一的，如果你需要寻找父组件或子组件，你可以利用组件间的通信模式实现。
+- 延伸阅读： [id](../guide/syntax/id.md)，[Communicate Between Components](../guide/syntax/comm.md)
+## $getConfig()
+
+获取当前全局环境变量和配置信息。
+### Returns
+- `config` _(object)_: 配置对象；
+- `bundleUrl` _(string)_: bundle 的 url；
+- `debug` _(boolean)_: 是否是调试模式；
+- `env` _(object)_: 环境对象；
+ - `weexVersion` _(string)_: Weex sdk 版本；
+ - `appName` _(string)_: 应用名字；
+ - `appVersion` _(string)_: 应用版本；
+ - `platform` _(string)_: 平台信息，是 `iOS`、`Android` 还是 `Web`；
+ - `osVersion` _(string)_: 系统版本；
+ - `deviceModel` _(string)_: 设备型号 **（仅原生应用）**；
+ - `deviceWidth` _(number)_: 设备宽度，默认为 `750`；
+ - `deviceHeight` _(number)_: 设备高度。
+## $call(module, method, ...args)
+
+**不建议使用**，请使用 `require('@weex-module/module')[method](...args)` 代替。查看更多信息：[modules](./modules/main)。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/bubble.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/bubble.md b/_drafts/v1.0/references/bubble.md
new file mode 100644
index 0000000..74b7e98
--- /dev/null
+++ b/_drafts/v1.0/references/bubble.md
@@ -0,0 +1,150 @@
+---
+title: 事件冒泡
+type: references
+order: 1.3
+version: 0.10
+---
+
+# 事件冒泡 <span class="api-version">v0.13+</span>
+
+Weex 1.0 实现了 W3C 标准的事件冒泡机制。
+
+### 使用
+
+```html
+<template>
+ <div class="root" onclick="rootClick" bubble="true">
+ <div>
+ <text style="font-size: 40px;">{{rootText}}</text>
+ </div>
+ <div class="outer" onclick="parentClick">
+ <div>
+ <text style="font-size: 40px;">{{parentText}}</text>
+ </div>
+ <text class="inner" onclick="click">{{innerText}}</text>
+ </div>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ innerText: 'click me',
+ parentText: '',
+ rootText: ''
+ },
+ methods: {
+ click: function(e) {
+ this.innerText = 'inner bubble'
+ },
+ parentClick: function(e) {
+ this.parentText = 'parent bubble'
+ },
+ rootClick: function(e) {
+ this.rootText = 'root bubble'
+ }
+ }
+ }
+</script>
+
+<style>
+ .inner {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a9b1b;
+ padding: 40px;
+ }
+
+ .outer {
+ font-size: 40px;
+ text-align: center;
+ background-color: #9b7a1b;
+ padding: 120px;
+ }
+
+ .root {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a1b9b;
+ padding: 80px;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/weex/dbfeb926e003986e2eea88c8ccdadb92)
+
+运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播，依次触发。
+
+### 注意
+
+需要注意的是: ** 为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 `bubble="true"` 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同。 **
+
+### stopPropagation
+
+在事件处理函数中，可以使用 `e.stopPropagation()` 方法，来阻止本次事件向上的传递过程。注意，`e.stopPropagation()` 与 `bubble="true"` 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：
+
+```html
+<template>
+ <div class="root" onclick="rootClick" bubble="true">
+ <div>
+ <text style="font-size: 40px;">{{rootText}}</text>
+ </div>
+ <div class="outer" onclick="parentClick">
+ <div>
+ <text style="font-size: 40px;">{{parentText}}</text>
+ </div>
+ <text class="inner" onclick="click">{{innerText}}</text>
+ </div>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+ data: {
+ innerText: 'click me',
+ parentText: '',
+ rootText: ''
+ },
+ methods: {
+ click: function(e) {
+ this.innerText = 'inner bubble'
+ },
+ parentClick: function(e) {
+ this.parentText = 'parent bubble'
+ e.stopPropagation()
+ },
+ rootClick: function(e) {
+ this.rootText = 'root bubble'
+ // e.stopPropagation()
+ }
+ }
+ }
+</script>
+
+<style>
+ .inner {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a9b1b;
+ padding: 40px;
+ }
+
+ .outer {
+ font-size: 40px;
+ text-align: center;
+ background-color: #9b7a1b;
+ padding: 120px;
+ }
+
+ .root {
+ font-size: 40px;
+ text-align: center;
+ background-color: #7a1b9b;
+ padding: 80px;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/weex/0cab45a7c62e8bebedd2ffd83a8e1256)
+
+运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播到父元素被终止，不再继续往根元素传播。
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/cheatsheet.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/cheatsheet.md b/_drafts/v1.0/references/cheatsheet.md
new file mode 100644
index 0000000..777abf6
--- /dev/null
+++ b/_drafts/v1.0/references/cheatsheet.md
@@ -0,0 +1,114 @@
+---
+title: Weex 快查手册
+type: references
+order: 6
+version: 0.10
+---
+
+# Weex 备忘录
+
+## Native 组件
+<style>
+code {
+ word-break: break-all;
+}
+</style>
+
+| 组件 | 特性 | 样式 | 事件 | 特殊父组件 | 子组件 |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| `<div>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<text>` | `value` | **box model**<br>flex<br>`position`<br>`background-color`<br>`opacity`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-decoration`<br>`text-align`<br>`text-overflow`<br>`line-height` | `click`<br>`appear`<br>`disappear` | - | text only |
+| `<image>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`resize` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<scroller>` | `show-scrollbar`<br>`scroll-direction` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<list>` | `loadmoreoffset` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`loadmore`<br>`refresh`<br>`loading` | - | `<cell>`<br>`<header>`<br>`<refresh>`<br>`<loading>` |
+| `<cell>` | - | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | `<list>` | (any) |
+| `<slider>` | `auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`change` | - | (any)<br>`<indicator>` |
+| `<indicator>` | - | **box model**<br>**flexbox**<br>`position`<br>`item-color`<br>`item-selected-color`<br>`item-size` | `click`<br>`appear`<br>`disappear` | `<slider>` | (none) |
+| `<wxc-navpage>` | `height`<br>`background-color`<br>`title`<br>`title-color`<br>`left-item-title`<br>`left-item-color`<br>`right-item-title`<br>`right-item-color`<br>`left-item-src`<br>`right-item-src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`naviBar.leftItem.click`<br>`naviBar.rightItem.click` | - | (any) |
+| `<wxc-tabbar>` | `tab-items` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `tabBar.onClick` | - | (none) |
+| `<embed>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<web>` | `src` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`pagestart`<br>`pagefinish`<br>`error` | - | (none) |
+| `<video>` | `src`<br>`play-status`<br>`auto-play` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear`<br>`start`<br>`pause`<br>`finish`<br>`fail` | - | (none) |
+| `<a>` | `href` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `click`<br>`appear`<br>`disappear` | - | (any) |
+| `<input>` | `type`<br>`value`<br>`placeholder`<br>`disabled`<br>`autofocus` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity`<br>`placeholder-color`<br>`color`<br>`font-size`<br>`font-style`<br>`font-weight`<br>`text-align` | `click`<br>`appear`<br>`disappear` | - | (none) |
+| `<switch>` | `checked` | **box model**<br>**flexbox**<br>`position`<br>`background-color`<br>`opacity` | `appear`<br>`disappear`<br>`input`<br>`change`<br>`focus`<br>`blur` | - | (none) |
+
+## Native Modules
+
+| module | apis |
+| ---- | ---- |
+| `@weex-module/dom` | `scrollToElement(node, { offset })` |
+| `@weex-module/modal` | `toast({ message, duration })`<br>`alert({ message, okTitle }, callback)`<br>`confirm({ message, okTitle, cancelTitle }, callback(result))`<br>`prompt({ message, okTitle, cancelTitle }, callback(result, data))` |
+| `@weex-module/stream` | `fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))` |
+| `@weex-module/webview` | `goBack(ref)`<br>`goForward(ref)`<br>`reload(ref)` |
+| `@weex-module/navigator` | `push({ url, animated }, callback)`<br>`pop({ animated }, callback)` |
+| `@weex-module/animation` | `transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)` |
+
+## 特殊的模版语法
+
+* `<foo x="abc">`
+* `{% raw %}<foo x="{{expr}}">{% endraw %}`
+* `<foo style="name1: value1; name2: value2">`
+* `{% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}`
+* `<foo class="a b c">`
+* `{% raw %}<foo class="a {{expr}} c">{% endraw %}`
+* `<foo onclick="methodName">`
+* `<foo id="abc">`
+* `<foo if="expr">`
+* `<foo repeat="item in list">`
+* `<foo repeat="(key,item) in list">`
+* `<component type="foo">`
+* `{% raw %}<component type="{{expr}}">{% endraw %}`
+
+## ViewModel APIs
+
+* `this.$vm(el)`
+* `this.$el(el)`
+* `this.$getConfig()`
+* `this.$emit(type, data)`
+* `this.$dispatch(type, data)`
+* `this.$broadcast(type, data)`
+
+## ViewModel Options
+
+* `data`
+* `methods`
+* `computed`
+* `init`, `created`, `ready`
+* `events`
+
+**示例：**
+
+```javascript
+module.exports = {
+
+ data: function () {
+ return {
+ x: 1,
+ y: 2
+ }
+ }
+
+ methods: {
+ foo: function () {
+ console.log('foo')
+ }
+ },
+
+ computed: {
+ z: function () {
+ return this.x + this.y
+ }
+ },
+
+ events: {
+ custom: function (e) {
+ console.log(e)
+ }
+ },
+
+ init: function () {},
+ created: function () {},
+ ready: function () {}
+}
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/12e3a8bc/_drafts/v1.0/references/color-names.md
----------------------------------------------------------------------
diff --git a/_drafts/v1.0/references/color-names.md b/_drafts/v1.0/references/color-names.md
new file mode 100644
index 0000000..1b8a968
--- /dev/null
+++ b/_drafts/v1.0/references/color-names.md
@@ -0,0 +1,180 @@
+---
+title: 颜色名称列表
+type: references
+order: 1.8
+version: 0.10
+---
+
+# Weex 支持的所有颜色名称
+
+### 基础颜色关键词:
+
+| 颜色名 | 十六进制RGB值 |
+| --- | --- |
+| black(黑) | #000000 |
+| silver(银) | #C0C0C0 |
+| gray(灰) | #808080 |
+| white(白) | #FFFFFF |
+| maroon(褐紫红) | #800000 |
+| red(红) | #FF0000 |
+| purple(紫) | #800080 |
+| fuchsia(晚樱) | #FF00FF |
+| green(绿) | #008000 |
+| lime(石灰) | #00FF00 |
+| olive(橄榄) | #808000 |
+| yellow(黄) | #FFFF00 |
+| navy(海军蓝) | #000080 |
+| blue(蓝) | #0000FF |
+| teal(水鸭) | #008080 |
+| aqua(水蓝) | #00FFFF |
+### 扩展颜色关键词:
+
+| 颜色名 | 十六进制RGB值 |
+| --- | --- |
+| aliceblue | #F0F8FF |
+| antiquewhite | #FAEBD7 |
+| aqua | #00FFFF |
+| aquamarine | #7FFFD4 |
+| azure | #F0FFFF |
+| beige | #F5F5DC |
+| bisque | #FFE4C4 |
+| black | #000000 |
+| blanchedalmond | #FFEBCD |
+| blue | #0000FF |
+| blueviolet | #8A2BE2 |
+| brown | #A52A2A |
+| burlywood | #DEB887 |
+| cadetblue | #5F9EA0 |
+| chartreuse | #7FFF00 |
+| chocolate | #D2691E |
+| coral | #FF7F50 |
+| cornflowerblue | #6495ED |
+| cornsilk | #FFF8DC |
+| crimson | #DC143C |
+| cyan | #00FFFF |
+| darkblue | #00008B |
+| darkcyan | #008B8B |
+| darkgoldenrod | #B8860B |
+| darkgray | #A9A9A9 |
+| darkgreen | #006400 |
+| darkgrey | #A9A9A9 |
+| darkkhaki | #BDB76B |
+| darkmagenta | #8B008B |
+| darkolivegreen | #556B2F |
+| darkorange | #FF8C00 |
+| darkorchid | #9932CC |
+| darkred | #8B0000 |
+| darksalmon | #E9967A |
+| darkseagreen | #8FBC8F |
+| darkslateblue | #483D8B |
+| darkslategray | #2F4F4F |
+| darkslategrey | #2F4F4F |
+| darkturquoise | #00CED1 |
+| darkviolet | #9400D3 |
+| deeppink | #FF1493 |
+| deepskyblue | #00BFFF |
+| dimgray | #696969 |
+| dimgrey | #696969 |
+| dodgerblue | #1E90FF |
+| firebrick | #B22222 |
+| floralwhite | #FFFAF0 |
+| forestgreen | #228B22 |
+| fuchsia | #FF00FF |
+| gainsboro | #DCDCDC |
+| ghostwhite | #F8F8FF |
+| gold | #FFD700 |
+| goldenrod | #DAA520 |
+| gray | #808080 |
+| green | #008000 |
+| greenyellow | #ADFF2F |
+| grey | #808080 |
+| honeydew | #F0FFF0 |
+| hotpink | #FF69B4 |
+| indianred | #CD5C5C |
+| indigo | #4B0082 |
+| ivory | #FFFFF0 |
+| khaki | #F0E68C |
+| lavender | #E6E6FA |
+| lavenderblush | #FFF0F5 |
+| lawngreen | #7CFC00 |
+| lemonchiffon | #FFFACD |
+| lightblue | #ADD8E6 |
+| lightcoral | #F08080 |
+| lightcyan | #E0FFFF |
+| lightgoldenrodyellow | #FAFAD2 |
+| lightgray | #D3D3D3 |
+| lightgreen | #90EE90 |
+| lightgrey | #D3D3D3 |
+| lightpink | #FFB6C1 |
+| lightsalmon | #FFA07A |
+| lightseagreen | #20B2AA |
+| lightskyblue | #87CEFA |
+| lightslategray | #778899 |
+| lightslategrey | #778899 |
+| lightsteelblue | #B0C4DE |
+| lightyellow | #FFFFE0 |
+| lime | #00FF00 |
+| limegreen | #32CD32 |
+| linen | #FAF0E6 |
+| magenta | #FF00FF |
+| maroon | #800000 |
+| mediumaquamarine | #66CDAA |
+| mediumblue | #0000CD |
+| mediumorchid | #BA55D3 |
+| mediumpurple | #9370DB |
+| mediumseagreen | #3CB371 |
+| mediumslateblue | #7B68EE |
+| mediumspringgreen | #00FA9A |
+| mediumturquoise | #48D1CC |
+| mediumvioletred | #C71585 |
+| midnightblue | #191970 |
+| mintcream | #F5FFFA |
+| mistyrose | #FFE4E1 |
+| moccasin | #FFE4B5 |
+| navajowhite | #FFDEAD |
+| navy | #000080 |
+| oldlace | #FDF5E6 |
+| olive | #808000 |
+| olivedrab | #6B8E23 |
+| orange | #FFA500 |
+| orangered | #FF4500 |
+| orchid | #DA70D6 |
+| palegoldenrod | #EEE8AA |
+| palegreen | #98FB98 |
+| paleturquoise | #AFEEEE |
+| palevioletred | #DB7093 |
+| papayawhip | #FFEFD5 |
+| peachpuff | #FFDAB9 |
+| peru | #CD853F |
+| pink | #FFC0CB |
+| plum | #DDA0DD |
+| powderblue | #B0E0E6 |
+| purple | #800080 |
+| red | #FF0000 |
+| rosybrown | #BC8F8F |
+| royalblue | #4169E1 |
+| saddlebrown | #8B4513 |
+| salmon | #FA8072 |
+| sandybrown | #F4A460 |
+| seagreen | #2E8B57 |
+| seashell | #FFF5EE |
+| sienna | #A0522D |
+| silver | #C0C0C0 |
+| skyblue | #87CEEB |
+| slateblue | #6A5ACD |
+| slategray | #708090 |
+| slategrey | #708090 |
+| snow | #FFFAFA |
+| springgreen | #00FF7F |
+| steelblue | #4682B4 |
+| tan | #D2B48C |
+| teal | #008080 |
+| thistle | #D8BFD8 |
+| tomato | #FF6347 |
+| turquoise | #40E0D0 |
+| violet | #EE82EE |
+| wheat | #F5DEB3 |
+| white | #FFFFFF |
+| whitesmoke | #F5F5F5 |
+| yellow | #FFFF00 |
+| yellowgreen | #9ACD32 |