(一).最简单的列表渲染

开始Vue的学习啦！

直接上代码:

image.png

<div class="mui-content">
    <ul class="mui-table-view" v-show="listData.length > 0">
        <li class="mui-table-view-cell mui-media" v-for="value in listData" @click="clickItem(value.id)">
         <a href="javascript:;">
           <img class="mui-media-object mui-pull-left" v-bind:src="value.images[0]">
           <div class="mui-media-body">
                  {{value.id}}
             <p class="mui-ellipsis">{{value.title}}</p>
        </div>
      </a>
    </li>
  </ul>
</div>

<script type="text/javascript" src="js/Vue.js"></script> 
<script type="text/javascript" src="js/vue-resource.js"></script>
 <script src="js/mui.min.js"></script> 
<script type="text/javascript" src="js/tool.js"></script> 
<script type="text/javascript" src="js/DMTool.js"></script> 
<script type="text/javascript"> 
      mui.init(); 
    DMTool.requestData("https://news-at.zhihu.com/api/4/news/latest", null, 'get', 
        function(data) { 
            // alert("请求成功:" + JSON.stringify(data)); 
            var stories = data.stories; vm.listData = stories; 
       }, function(e) { 
          //alert("请求失败" + JSON.stringify(e)); 
     }); 
    var vm = new Vue({ 
                 el: ".mui-content", 
                data: { 
                     listData: [ 
                            // { id:9888888, 
                            //    title:"蛤蛤蛤蛤蛤蛤蛤" 
                            // }  
                      ]
                  },
                  methods: { 
                            clickItem: function(id) { 
                               mui.toast("点击了item" + id);
                              } 
                        }
 }) 
</script>

DMTool是我自己封装的请求，然后还有这个是基于MUI的哈，原理都是一样的。

;
var DMTool = {};
DMTool.requestData = requestData;
//网络请求封装:
   function requestData (url,data,type,success_fn,error_fn) {
                              mui.ajax(url,{
                              data:data,
                              dataType:"json",
                               type:type,
                               timeout:10000,
                                headers:{'Content-Type':'application/json'},
                                success:function (data){
                                    success_fn(data);
                                },
                            error:function (e) {
                                  error_fn(e);
                              }
          });
}

数据用的是知乎日报的API