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/20 06:41:34 UTC
[45/50] [abbrv] incubator-weex git commit: * [doc] updated
guide/intro/using-vue
* [doc] updated guide/intro/using-vue
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/7737d9f4
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/7737d9f4
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/7737d9f4
Branch: refs/heads/master
Commit: 7737d9f445df7d011d18654abf56a5681527c5ac
Parents: 3ffffe3
Author: Jinjiang <zh...@me.com>
Authored: Fri Feb 17 13:19:23 2017 +0800
Committer: Jinjiang <zh...@me.com>
Committed: Fri Feb 17 13:19:23 2017 +0800
----------------------------------------------------------------------
doc/source/cn/guide/intro/using-vue.md | 79 ++++++++---------------------
doc/source/guide/intro/using-vue.md | 50 +++++++++++++++++-
2 files changed, 69 insertions(+), 60 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/7737d9f4/doc/source/cn/guide/intro/using-vue.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/intro/using-vue.md b/doc/source/cn/guide/intro/using-vue.md
index 1399a42..60fbd56 100644
--- a/doc/source/cn/guide/intro/using-vue.md
+++ b/doc/source/cn/guide/intro/using-vue.md
@@ -7,7 +7,7 @@ version: 2.1
# \u4f7f\u7528 Vue \u5f00\u53d1 Weex \u9875\u9762
-## Vue & Weex \u4ecb\u7ecd
+## Vue in Weex
[Vue.js](https://vuejs.org/) \u662f Evan You \u5f00\u53d1\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u5728\u6613\u7528\u6027\u3001\u7075\u6d3b\u6027\u548c\u6027\u80fd\u7b49\u65b9\u9762\u90fd\u975e\u5e38\u4f18\u79c0\u3002\u5f00\u53d1\u8005\u80fd\u591f\u901a\u8fc7\u64b0\u5199 `*.vue` \u6587\u4ef6\uff0c\u57fa\u4e8e `<template>`, `<style>`, `<script>` \u5feb\u901f\u6784\u5efa\u7ec4\u4ef6\u5316\u7684 web \u5e94\u7528\u3002
@@ -15,69 +15,16 @@ version: 2.1
Vue.js \u5728 2016 \u5e74 10 \u6708\u6b63\u5f0f\u53d1\u5e03\u4e86 2.0 \u7248\u672c\uff0c\u8be5\u7248\u672c\u52a0\u5165\u4e86 Virtual-DOM \u548c\u9884\u7f16\u8bd1\u5668\u7684\u8bbe\u8ba1\uff0c\u4f7f\u5f97\u8be5\u6846\u67b6\u5728\u8fd0\u884c\u65f6\u80fd\u591f\u8131\u79bb HTML \u548c CSS \u89e3\u6790\uff0c\u53ea\u4f9d\u8d56 JavaScript\uff1b\u540c\u65f6 Virtual-DOM \u4e5f\u4f7f\u5f97 Vue 2.x \u6e32\u67d3\u6210\u539f\u751f UI \u6210\u4e3a\u4e86\u53ef\u80fd\u3002
-[Weex](https://weex-project.io/) \u662f\u4e00\u5957\u7b80\u5355\u6613\u7528\u7684\u8de8\u5e73\u53f0\u5f00\u53d1\u65b9\u6848\uff0c\u80fd\u4ee5 Web \u7684\u5f00\u53d1\u4f53\u9a8c\u6784\u5efa\u9ad8\u6027\u80fd\u3001\u53ef\u6269\u5c55\u7684\u539f\u751f\u5e94\u7528\u3002 Weex \u4e0e Vue \u6709\u5b98\u65b9\u5408\u4f5c\uff0c\u652f\u6301\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0cVue \u4e5f\u501f\u6b64\u5177\u5907\u4e86\u5f00\u53d1\u539f\u751f\u5e94\u7528\u7684\u80fd\u529b\u3002
+\u76ee\u524d Weex \u4e0e Vue \u6b63\u5728\u5c55\u5f00\u5b98\u65b9\u5408\u4f5c\uff0c\u5e76\u5c06 Vue 2.x \u4f5c\u4e3a\u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0cVue \u4e5f\u56e0\u6b64\u5177\u5907\u4e86\u5f00\u53d1\u539f\u751f\u5e94\u7528\u7684\u80fd\u529b\u3002
-## \u5c1d\u9c9c\u4f53\u9a8c
+**\u76f8\u5173\u94fe\u63a5**
- > \u5f00\u59cb\u4e4b\u524d\uff0c\u5e0c\u671b\u4f60\u80fd\u5bf9 Weex \u548c Vue \u6709\u57fa\u672c\u7684\u4e86\u89e3\uff0c\u63a8\u8350\u9605\u8bfb [Weex Tutorial](../index.html) \u548c [Vue Introduction](https://vuejs.org/v2/guide/) \u4e86\u89e3\u66f4\u591a\u4fe1\u606f\u3002
-
-### \u5feb\u901f\u521b\u5efa\u9879\u76ee
-
-Weex \u5b98\u65b9\u63d0\u4f9b\u4e86 [weex-toolkit](https://github.com/weexteam/weex-toolkit) \u7684\u811a\u624b\u67b6\u5de5\u5177\u6765\u8f85\u52a9\u5f00\u53d1\u548c\u8c03\u8bd5\u3002
-
-\u9996\u5148\u5b89\u88c5 `weex-toolkit` \u5de5\u5177\uff1a
-
-```bash
-npm install weex-toolkit@beta -g
-```
-
-> \u6ce8\uff1a\u76ee\u524d weex-toolkit \u4ec5\u5728 beta \u7248\u4e2d\u624d\u652f\u6301\u521d\u59cb\u5316 Vue \u9879\u76ee\uff0c\u4f7f\u7528\u524d\u8bf7\u786e\u8ba4\u7248\u672c\u662f\u5426\u6b63\u786e\u3002
-
-\u7136\u540e\u521d\u59cb\u5316 Weex \u9879\u76ee\uff1a
-
-```bash
-weex init awesome-project
-```
-
-\u6267\u884c\u5b8c\u547d\u4ee4\u540e\uff0c\u5728 `awesome-project` \u76ee\u5f55\u4e2d\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u4f7f\u7528 Weex \u548c Vue \u7684\u6a21\u677f\u9879\u76ee\uff0c\u751f\u6210\u7684\u9879\u76ee\u529f\u80fd\u548c\u7528\u6cd5\u53ef\u4ee5\u53c2\u8003\u5176 package.json \u548c README \u3002
-
-## \u7f16\u5199\u4ee3\u7801
-
-\u5728\u521b\u5efa\u4e86\u9879\u76ee\u5e76\u4e14\u914d\u7f6e\u597d\u4e86\u5f00\u53d1\u73af\u5883\u4e4b\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5f00\u59cb\u5199\u4ee3\u7801\u4e86\u3002
-
-\u867d\u7136\u5f00\u53d1\u7684\u662f\u539f\u751f\u5e94\u7528\uff0c\u4f46\u662f\u4ee3\u7801\u5199\u8d77\u6765\u548c Web \u4e2d\u5e76\u6ca1\u4ec0\u4e48\u4e0d\u4e00\u6837\u3002\u4f60\u53ef\u4ee5\u9009\u62e9\u81ea\u5df1\u559c\u6b22\u7684\u524d\u7aef\u5f00\u53d1\u73af\u5883\u3001\u53ef\u4ee5\u5199 `.vue` \u6587\u4ef6\u3001\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5199 javascript \u6587\u4ef6\u3001\u53ef\u4ee5\u4f7f\u7528 ES6+ \u3001\u53ef\u4ee5\u4f7f\u7528\u53d1\u5e03\u5728 npm \u4e0a\u7684\u6a21\u5757\u3001\u53ef\u4ee5\u6269\u5c55 Weex \u7684\u7ec4\u4ef6\u6216\u8005\u6a21\u5757\u3002
-
-### \u6ce8\u610f\u4e8b\u9879
-
-Vue.js \u6700\u521d\u662f\u4e3a Web \u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u79fb\u52a8\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0cWeex \u6b63\u5728\u52aa\u529b\u7f29\u5c0f\u8fd9\u4e2a\u5dee\u5f02\u7684\u8303\u56f4\u3002
-
-\u53c2\u8003\u6587\u7ae0[\u300aVue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u300b](../../references/vue/index.html)\u4e86\u89e3\u5b58\u5728\u5dee\u5f02\u7684\u539f\u56e0\u548c\u7ec6\u8282\u3002
-
-### \u4f7f\u7528\u5176\u4ed6\u5de5\u5177\u5e93
-
-Vue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 [Vuex](https://github.com/vuejs/vuex) \u548c [vue-router](https://github.com/vuejs/vue-router) \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002
-
-\u5173\u4e8e Vuex \u548c vue-louter \u7684\u4f7f\u7528\u65b9\u6cd5\uff0c\u53ef\u4ee5\u53c2\u8003[\u300a\u5728 Weex \u9879\u76ee\u4e2d\u4f7f\u7528 Vuex \u548c vue-router\u300b](../../references/vue/difference-of-vuex.html)\u3002
-
-> \u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee [weex-hackernews](https://github.com/weexteam/weex-hackernews) \uff0c\u5f15\u5165\u4e86\u5305\u542b Vue 2.x \u7684 WeexSDK\uff0c\u521b\u5efa\u4e86\u4e09\u7aef\u7684\u9879\u76ee\u548c\u57fa\u672c\u7684\u7f16\u8bd1\u914d\u7f6e\u3002\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002
-
-### \u6269\u5c55 Weex
-
-Weex \u5185\u7f6e\u4e86\u4e00\u4e9b\u901a\u7528\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u53ef\u4ee5\u6ee1\u8db3\u57fa\u672c\u4e0a\u4f7f\u7528\u9700\u6c42\u3002\u4e3a\u4e86\u63a7\u5236 SDK \u7684\u4f53\u79ef\u548c\u4fdd\u6301\u6846\u67b6\u7684\u901a\u7528\u6027\uff0c\u6211\u4eec\u4f1a\u8c28\u614e\u5730\u9009\u62e9\u5185\u7f6e\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u5e76\u4e0d\u4f1a\u5305\u7f57\u4e07\u8c61\u5c06\u6240\u6709\u529f\u80fd\u90fd\u5c01\u88c5\u8fdb SDK\u3002\u4e0d\u8fc7\u6211\u4eec\u63d0\u4f9b\u4e86\u989d\u5916\u7684\u7ec4\u4ef6\u5e02\u573a\uff0c\u5728\u5176\u4e2d\u5c06\u80fd\u627e\u5230\u6ee1\u8db3\u4e0d\u540c\u9700\u6c42\u3001\u5404\u5f0f\u5404\u6837\u7684\u7ec4\u4ef6\u548c\u6a21\u5757\uff0c\u6b64\u5916 Weex \u4e5f\u5177\u5907\u6a2a\u5411\u6269\u5c55\u7684\u80fd\u529b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u884c\u5b9a\u5236\u548c\u6269\u5c55 Weex \u7ec4\u4ef6\u548c\u6a21\u5757\u3002
-
-Weex \u7684\u5e95\u5c42\u8bbe\u8ba1\u6bd4\u8f83\u7075\u6d3b\uff0c\u9664\u4e86\u7ec4\u4ef6\u548c\u6a21\u5757\u4ee5\u5916\uff0c\u5f00\u53d1\u8005\u751a\u81f3\u53ef\u4ee5\u5b9a\u5236 Weex \u5185\u7f6e\u7684\u524d\u7aef\u6846\u67b6\uff0cVue 2.x \u5c31\u662f\u4e00\u4e2a\u6210\u529f\u7684\u4f8b\u5b50\u3002
-
-\u53ef\u4ee5\u9605\u8bfb\u4ee5\u4e0b\u6587\u6863\u4e86\u89e3\u66f4\u591a\u4fe1\u606f\uff1a
-
-+ [\u300aiOS \u6269\u5c55\u300b](../../references/advanced/index.html)
-+ [\u300aAndroid \u6269\u5c55\u300b](../../references/advanced/extend-to-android.html)
-+ [\u300aHTML5 \u6269\u5c55\u300b](../../references/advanced/extend-to-html5.html)
-+ [\u300a\u5b9a\u5236\u81ea\u5df1\u7684 JS Framework\u300b](../../references/advanced/extend-to-jsfm.html)
+* [Weex \u5feb\u901f\u4e0a\u624b](../index.html)
+* [Vue \u4ecb\u7ecd](https://cn.vuejs.org/v2/guide/)
+* [Weex \u5de5\u4f5c\u539f\u7406](./index.html)
## Vue 2.x \u5728 Weex \u4e2d\u7684\u7279\u8272\u529f\u80fd
-\u6211\u60f3\uff0c\u4f60\u4e00\u5b9a\u5bf9 **Vue \u4e3a\u4ec0\u4e48\u80fd\u6e32\u67d3\u6210\u539f\u751f\u9875\u9762** \u3001**Weex \u4e3a\u4ec0\u4e48\u80fd\u5c06\u5185\u6838\u5207\u6362\u6210 Vue** \u5fc3\u5b58\u597d\u5947\u3002\u5982\u679c\u4f60\u5bf9\u8fd9\u4e9b\u7ec6\u8282\u611f\u5174\u8da3\uff0c\u53ef\u4ee5\u9605\u8bfb\u8fd9\u7bc7\u6587\u7ae0 [\u300ahow it works\u300b](./index.html)\u3002
-
### \u6d41\u5f0f\u6e32\u67d3
\u5728 Weex \u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 `<foo append="tree|node">` \u7684\u65b9\u5f0f\u5b9a\u4e49\u9875\u9762\u9996\u6b21\u6e32\u67d3\u65f6\u7684\u6e32\u67d3\u9897\u7c92\u5ea6\uff0c\u8fd9\u8ba9\u5f00\u53d1\u8005\u6709\u673a\u4f1a\u6839\u636e\u754c\u9762\u7684\u590d\u6742\u5ea6\u548c\u4e1a\u52a1\u9700\u6c42\u5bf9\u9996\u6b21\u6e32\u67d3\u8fc7\u7a0b\u8fdb\u884c\u5b9a\u5236\u3002`append="tree"` \u8868\u793a\u6574\u4e2a\u7ed3\u70b9\u5305\u62ec\u5176\u6240\u6709\u5b50\u7ed3\u70b9\u5168\u90e8\u751f\u6210\u5b8c\u6bd5\u4e4b\u540e\uff0c\u624d\u4f1a\u4e00\u6b21\u6027\u6e32\u67d3\u5230\u754c\u9762\u4e0a\uff1b\u800c `append="node"` \u5219\u8868\u793a\u8be5\u7ed3\u70b9\u4f1a\u5148\u6e32\u67d3\u5728\u754c\u9762\u4e0a\u4f5c\u4e3a\u4e00\u4e2a\u5bb9\u5668\uff0c\u5176\u5b50\u7ed3\u70b9\u4f1a\u7a0d\u540e\u505a\u8fdb\u4e00\u6b65\u6e32\u67d3\u3002
@@ -99,3 +46,17 @@ Weex \u7684\u5e95\u5c42\u8bbe\u8ba1\u6bd4\u8f83\u7075\u6d3b\uff0c\u9664\u4e86\u7ec4\u4ef6\u548c\u6a21\u5757\u4ee5\u5916\uff0c\u5f00\u53d1\u8005\u751a\u81f3
### `<transition>` \u8fc7\u6e21\u72b6\u6001
Weex \u652f\u6301\u4e86 Vue 2.x \u4e2d\u7ecf\u5178\u7684 `<transition>` \u5199\u6cd5\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7 `<transition>` \u8f7b\u677e\u5b9a\u4e49\u4e00\u4e2a\u754c\u9762\u5728\u4e24\u79cd\u72b6\u6001\u4e2d\u7684\u8fc7\u6e21\u65b9\u5f0f\u3002
+
+## \u6ce8\u610f\u4e8b\u9879
+
+Vue.js \u6700\u521d\u662f\u4e3a Web \u8bbe\u8ba1\u7684\uff0c\u867d\u7136\u53ef\u4ee5\u57fa\u4e8e Weex \u5f00\u53d1\u79fb\u52a8\u5e94\u7528\uff0c\u4f46\u662f Web \u5f00\u53d1\u548c\u539f\u751f\u5f00\u53d1\u6bd5\u7adf\u4e0d\u540c\uff0c\u5728\u529f\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u4e0a\u90fd\u6709\u4e00\u4e9b\u5dee\u5f02\uff0c\u8fd9\u4e9b\u5dee\u5f02\u4ece\u672c\u8d28\u4e0a\u8bb2\u662f\u539f\u751f\u5f00\u53d1\u5e73\u53f0\u548c Web \u5e73\u53f0\u4e4b\u95f4\u7684\u5dee\u5f02\uff0cWeex \u6b63\u5728\u52aa\u529b\u7f29\u5c0f\u8fd9\u4e2a\u5dee\u5f02\u7684\u8303\u56f4\u3002
+
+\u53c2\u8003\u6587\u7ae0[\u300aVue 2.x \u5728 Weex \u548c Web \u4e2d\u7684\u5dee\u5f02\u300b](../../references/vue/index.html)\u4e86\u89e3\u5b58\u5728\u5dee\u5f02\u7684\u539f\u56e0\u548c\u7ec6\u8282\u3002
+
+## \u4f7f\u7528\u5176\u4ed6 Vue \u7684\u5de5\u5177\u5e93
+
+Vue.js \u4e5f\u6709\u8f83\u591a\u5468\u8fb9\u6280\u672f\u4ea7\u54c1\uff0c\u5982 [Vuex](https://github.com/vuejs/vuex) \u548c [vue-router](https://github.com/vuejs/vue-router) \u7b49\uff0c\u8fd9\u4e9b\u5e93\u4e5f\u53ef\u4ee5\u5728 Weex \u4e2d\u5f88\u597d\u7684\u5de5\u4f5c\u3002
+
+\u5173\u4e8e Vuex \u548c vue-louter \u7684\u4f7f\u7528\u65b9\u6cd5\uff0c\u53ef\u4ee5\u53c2\u8003[\u300a\u5728 Weex \u9879\u76ee\u4e2d\u4f7f\u7528 Vuex \u548c vue-router\u300b](../../references/vue/difference-of-vuex.html)\u3002
+
+> \u6211\u4eec\u57fa\u4e8e Weex \u548c Vue \u5f00\u53d1\u4e86\u4e00\u4e2a\u7684\u5b8c\u6574\u9879\u76ee [weex-hackernews](https://github.com/weexteam/weex-hackernews) \uff0c\u5f15\u5165\u4e86\u5305\u542b Vue 2.x \u7684 WeexSDK\uff0c\u521b\u5efa\u4e86\u4e09\u7aef\u7684\u9879\u76ee\u548c\u57fa\u672c\u7684\u7f16\u8bd1\u914d\u7f6e\u3002\u5728\u9879\u76ee\u4e2d\u4f7f\u7528\u4e86 Vuex \u548c vue-router \uff0c\u80fd\u591f\u5b9e\u73b0\u540c\u4e00\u4efd\u4ee3\u7801\uff0c\u5728 iOS\u3001Android\u3001Web \u4e0b\u90fd\u80fd\u5b8c\u6574\u5730\u5de5\u4f5c\u3002
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/7737d9f4/doc/source/guide/intro/using-vue.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/intro/using-vue.md b/doc/source/guide/intro/using-vue.md
index 5e5b3cc..bc043ae 100644
--- a/doc/source/guide/intro/using-vue.md
+++ b/doc/source/guide/intro/using-vue.md
@@ -7,4 +7,52 @@ version: 2.1
# Using Vue
-Work in progress.
\ No newline at end of file
+## Vue in Weex
+
+[Vue.js](https://vuejs.org/) is an excellent progressive JavaScript framework written by [Evan You](https://twitter.com/youyuxi) which is very ease and flexible to use. Developers can write `*.vue` files with friendly `<template>`, `<style>`, `<script>` tags to build componentized web app.
+
+
+
+In Oct 2016 Vue.js has launched 2.0. It brings virtual-DOM and pre-compiler for HTML template. So it makes Vue.js possible to run in JS-only environment without HTML / CSS parser. And also the virtual-DOM layer makes Vue 2.x possible to render native UI through JavaScript.
+
+Now Weex and Vue has supported each other officially. Weex put Vue 2.x as its built-in JS Framework, and Vue has already been able to develop native mobile app.
+
+**Links**
+
+* [Weex tutorial](../index.html)
+* [Vue Introduction](https://vuejs.org/v2/guide/)
+* [How Weex works](./index.html)
+
+## New Features of Vue 2.x in Weex
+
+### Stream Rendering
+
+In Weex, developers can use `<foo append="tree|node">` to customize the rendering granularity to balance different UI complexity and business logic in order to get the best first-paint performance. `append=tree` means that the entire node, including all its child nodes, will be one-time rendered to native UI after all of the nodes generated completely. And `append=node` means just render the current node itself first and its child nodes will be futher rendered later.
+
+<!-- dotwe demo -->
+
+### Two-way Data Binding in Form Controls
+
+In Weex, we provide the same `v-model` directive as web dev exprience for both `<input>` and `<textarea>` components. Developers can write `<input v-model="message">` or `<textarea v-model="message">` to bind data `message` and show it on the text box automatically. When user modifies the text box, the value of data `message` will be automatically updated.
+
+<!-- dotwe demo -->
+
+### Isolate Each Page Contexts
+
+As described in [how Weex works](./index.html), all Weex's JS bundles share a JavaScript instance. So how can we make Vue 2.x used in multiple JS bundles completely isolated, and that one page which extends or rewrites Vue does not affect other pages becomes a problem. Through the collaboration between Weex and Vue. The problem has been solved.
+
+<!-- html5 apis -->
+
+### `<transition>`
+
+Weex supports the awesome `<transition>` syntax in Vue 2.x. Developers can easily define the transition of an interface in both states with `<transition>` tag.
+
+## Notice
+
+Web development and native development, after all, there are some differences in functionality and development experience, which are essentially the differences between the native development platform and the Web platform, and Weex is trying to narrow the scope of this difference. See [differences of Vue 2.x between Weex and web](../../references/vue/index.html)
+
+## Using Vue-related Libs
+
+Vue.js also has more cool related libs. For example [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router). They all work well in Weex. For using Vuex and vue-louter, see [Using Vuex and vue-router in Weex\u300b](../../references/vue/difference-of-vuex.html)\u3002
+
+> We developed a complete project based on Weex and Vue 2.x which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). It includes WeexSDK with Vue 2.x in iOS, Android and web. Also we use Vuex and vue-router. The whole project uses the same source code for three different platforms.