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

开始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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,624评论 25 708
  • 第七章 透视一本书 第八章 找出与作者共同的词意 第九章 判断作者的主旨 由于这三章是连贯的,在按顺序讲分析阅读的...
    一只Dora阅读 422评论 0 0
  • 起床先往阳台上跑,唉,又下起雨来了。刚吃了早饭就接到了快递电话,原来是给小妞买的衣服到了。赶紧下楼去拿。在楼下碰到...
    卜悠悠阅读 231评论 2 2
  • 2018年,崭新的一年,欣喜而充满希望…… 每年都在新的一年里要写计划,回望2017年有惊喜,有忙碌,重要的是有收...
    我叫在水一方阅读 503评论 2 3
  • set集合继承了collection类,他是无序的不重复的。与collection的相似程度最高,其衍生的hash...
    可爱傻妞是我的爱阅读 190评论 0 0