新增vue组件文档

docs/component/_sidebar.md

-* [组件概述](component/)
+* [组件概述](component/)
+* [vue组件](component/vue-component.md)
 * 视图容器
   * [view](component/view.md)
   * [scroll-view](component/scroll-view.md)

docs/component/vue-component.md

+### component
+
+渲染一个“元组件”为动态组件。依 `is` 的值，来决定哪个组件被渲染。[详见](https://cn.vuejs.org/v2/api/#component)
+
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|√	|√	|x			|x				|x			|x				|x			|x		|x			|
+
+
+
+
+
+### template
+
+`uni-app` 支持在 `template` 模板中嵌套 `<template/>` 和 `<block/>`，用来进行 [列表渲染](https://uniapp.dcloud.io/vue-basics?id=listrendering) 和 [条件渲染](https://uniapp.dcloud.io/vue-basics?id=condition)。
+
+`<template/>` 和 `<block/>` 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
+
+`<block/>` 在不同的平台表现存在一定差异，推荐统一使用 `<template/>`。
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|√	|√	|√			|√				|√			|√				|√			|√		|√			|
+
+
+**代码示例**
+
+
+```html
+<template>
+    <view>
+        <template v-if="test">
+            <view>test 为 true 时显示</view>
+        </template>
+        <template v-else>
+            <view>test 为 false 时显示</view>
+        </template>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+				test:true
+            }
+        }
+    }
+```
+
+
+```html
+<template>
+    <view>
+        <block v-for="(item,index) in list" :key="index">
+            <view>{{item}} - {{index}}</view>
+        </block>
+    </view>
+</template>
+```
+
+
+
+### transition
+
+`<transition>` 元素作为单个元素/组件的过渡效果。`<transition>` 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。[详见](https://cn.vuejs.org/v2/api/#transition)
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|x	|√	|x			|x				|x			|x				|x			|x		|x			|
+
+
+
+### transition-group
+
+
+`<transition-group>` 元素作为多个元素/组件的过渡效果。`<transition-group>` 渲染一个真实的 DOM 元素。默认渲染 `<span>`，可以通过 tag attribute 配置哪个元素应该被渲染。[详见](https://cn.vuejs.org/v2/api/#transition-group)
+
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|x	|√	|x			|x				|x			|x				|x			|x		|x			|
+
+
+
+### keep-alive
+
+
+`<keep-alive>` 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 `<transition>` 相似，`<keep-alive>` 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。[详见](https://cn.vuejs.org/v2/api/#keep-alive)
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|x	|√	|x			|x				|x			|x				|x			|x		|x			|
+
+
+
+### slot
+
+
+`<slot>` 元素作为组件模板之中的内容分发插槽。`<slot>` 元素自身将被替换。[插槽](https://uniapp.dcloud.io/vue-components?id=%e6%8f%92%e6%a7%bd)。
+
+详细用法，请参考下面教程的链接。[通过插槽分发内容](https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9)
+
+
+**平台差异说明**
+
+|App|H5	|微信小程序	|支付宝小程序	|百度小程序	|字节跳动小程序	|QQ小程序	|快应用	|360小程序	|
+|:-:|:-:|:-:		|:-:			|:-:		|:-:			|:-:		|:-:	|:-:		|
+|√	|√	|√			|√				|√			|√				|√			|√		|√			|
+
+
+
+
+

docs/vue-basics.md

@@ -272,22 +272,22 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
 ```html
 <template>
     <view>
-        <view>{{ number + 1 }}</view>
-	<view>{{ ok ? 'YES' : 'NO' }}</view>
-        <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
-	<view>{{ message.split('').reverse().join('') }}</view>
+      <view>{{ number + 1 }}</view>
+      <view>{{ ok ? 'YES' : 'NO' }}</view>
+      <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
+      <view>{{ message.split('').reverse().join('') }}</view>
     </view>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                number:1,
-		ok:true,
-		message: 'Hello Vue!'
-            }
-        }
+  export default {
+    data() {
+      return {
+        number:1,
+        ok:true,
+        message: 'Hello Vue!'
+      }
     }
+  }
 </script>
 ```
 
@@ -295,27 +295,27 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
 
 ```html
 <template>
-    <view>
-	<view v-for="(item,index) in 10">
-		<!-- 通过%运算符求余数，实现隔行换色的效果 -->
-		<view :class="'list-' + index%2">{{index%2}}</view>
-	</view>
+  <view>
+      <view v-for="(item,index) in 10">
+      <!-- 通过%运算符求余数，实现隔行换色的效果 -->
+      <view :class="'list-' + index%2">{{index%2}}</view>
     </view>
+  </view>
 </template>
 <script>
-    export default {
-        data() {
-            return { }
-        }
+  export default {
+    data() {
+      return { }
     }
+  }
 </script>
 <style>
-    .list-0{
-	background-color: #aaaaff;
-    }
-    .list-1{
-	background-color: #ffaa7f;
-    }
+  .list-0{
+    background-color: #aaaaff;
+  }
+  .list-1{
+    background-color: #ffaa7f;
+  }
 </style>
 ```
 
@@ -325,22 +325,22 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
 
 ```html
 <template>
-    <view>
-	<!-- 这是语句，不是表达式 -->
-	<view>{{ var a = 1 }}</view>
-	<!-- 流控制也不会生效，请使用三元表达式 -->
-	<view>{{ if (ok) { return message } }}</view>
-    </view>
+  <view>
+    <!-- 这是语句，不是表达式 -->
+    <view>{{ var a = 1 }}</view>
+    <!-- 流控制也不会生效，请使用三元表达式 -->
+    <view>{{ if (ok) { return message } }}</view>
+  </view>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-		ok:true,
-		message: 'Hello Vue!'
-            }
-        }
+  export default {
+    data() {
+      return {
+        ok:true,
+        message: 'Hello Vue!'
+      }
     }
+  }
 </script>
 ```
 
@@ -375,11 +375,6 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
 
 
 
-
-
-
-
-
 ### 指令