为什么要使用return来返回数据：
    因为不使用return包裹的数据会在项目的全局可见，会造成变量污染
    使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
    基础数据绑定
    变量赋值：

    1. <script>
    2. export default {
    3.  data: {
    4.      return{
    5.     title: 'Hello',
    6.       name : 'hcoder'
    7.    }
    8.  }, .....
    9. </script>

    在视图中使用 {{}} 调用变量：

    1. <template>
    2.  <view class="content">
    3.   <text class="title">{{title}}</text>
    4.   <view>
    5.    hi....{{name}}
    6.   </view>
    7.  </view>
    8. </template>

    数组形式的数据绑定:

    1. data: {
    2.  return {
    3.       students : [
    4.    {name : "张三", age : 18},
    5.    {name : "李四", age : 20}
    6.   ]
    7.  }
    8.  }, 
    9. //调用
    10. <view>
    11. {{students[0]['name']}}
    12. {{students[0].name}}
    13. </view>

    列表渲染：
    for循环与小程序类似：item是默认变量名，index是默认下标。

    1. <template>
    2.  <view>
    3.   <view v-for="(item, index) in students">
    4.    <view class="persons">{{index}} - {{item.name}}</view>
    5.   </view>
    6.  </view>
    7. </template>
    8. <script>
    9. export default {
    10.  data: {
    11.       return {
    12.         students : [
    13.        {name : "张三", age : 18},
    14.        {name : "李四", age : 20}
    15.       ]
    16.     }
    17.  },
    18.  onLoad:function(options){
    19.   console.log("onLoad");
    20.  },
    21.  onHide:function(){
    22.   console.log("onHide");
    23.  },
    24.  onShow:function(){
    25.   console.log("onShow");
    26.  }
    27. }
    28. </script>
    29. <style>
    30. .persons{width:750px; line-height:2.2em;}
    31. </style>
    32. //说明：
    33. 正常展示效果需要删除 app.vue 内的全局样式（原因见视频教程）

    条件渲染：

    1. <template>
    2.  <view>
    3.   <view v-for="(item, index) in students">
    4.    <view class="persons">{{index}} - {{item.name}}</view>
    5.   </view>
    6.   <view v-if="show">
    7.    这里是条件展示的内容....
    8.   </view>
    9.  </view>
    10. </template>
    11. <script>
    12. export default {
    13.  data: {
    14.   students : [
    15.        return{
    16.         {name : "张三", age : 18},
    17.            {name : "李四", age : 20}
    18.     }
    19.   ],
    20.   show:false
    21.  },

    使用 hidden

    1. <template>
    2.  <view>
    3.   <view v-for="(item, index) in students">
    4.    <view class="persons">{{index}} - {{item.name}}</view>
    5.   </view>
    6.   <view v-hidden="show">
    7.    这里是条件展示的内容....
    8.   </view>
    9.  </view>
    10. </template>
    11. <script>
    12. export default {
    13.  data: {
    14.   return{
    15.       students : [
    16.        {name : "张三", age : 18},
    17.        {name : "李四", age : 20}
    18.       ],
    19.       show:true
    20.   }
    21.  },

    **if 与 hiddenif会根据条件决定是否渲染，hidden 会渲染但根据条件决定是否展示。