Vue.js 实战示例-优快云博客

一参考资料
二例子1
三例子2

一、参考资料

https://segmentfault.com/q/1010000004296954
官网：http://cn.vuejs.org/examples/commits.html
官网：http://cn.vuejs.org/guide/index.html
慕课网：http://www.imooc.com/article/2688

二、例子1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="zepto.js"></script>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="demo">
        <ul>
            <li v-for="company in companylist" id="{{company.id}}">
                公司名称：{{company.name}}
                <br />
                公司地址: {{company.addr}}
                <p></p>
            </li>
        </ul>
    </div>
<script>
     var demo = new Vue({
         el: '#demo',
         data: {
             companylist: null,
         },
         /*
         watch: {
             currentBranch: 'fetchData'
         },*/
         created: function () {
             this.fetchData();
         },
         methods: {
             fetchData: function () {
                 var self = this; //注意这个self！不能放进下面的post里
                 var url = "http://yjt.nnch.net/index.php/api/company/company_list";
                 $.post(url,
                     {region: '广东省'},
                      function (data) { //注意zepto返回的data已经是json对象，可以直接data.xx访问
                          self.companylist = data.company_list;
                          console.log(self.companylist[0].addr);
                      });
             }
         }
     })
</script>
</body>
</html>

三、例子2

结合分页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="zepto.js"></script>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="demo">
        <ul>
            <li v-for="goods in goodslist " id="{{goods.id}}">
                公司名称：{{goods.name}}
                <br />
                公司地址: {{goods.addr}}
                <p></p>
            </li>
        </ul>
    </div>

<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            goodslist : null,
        },
        created: function () { },
        methods: {}
    });
    mui.ajax(url,{
        data:data,
        dataType:'json',
        type:'POST',
        timeout:10000,
        success:function(data){
            for (var i in data.goods_list) {
                 var arr = new Array();
                 for (var item in data.goods_list[i]) {
                      arr[item] = data.goods_list[i][item];
                 }
                 /*正常填充渲染用下句*/
                 vm.goodslist = data.goods_list;
                 /*深拷贝即追加填充用下面这句*/
                 vm.goodslist.push(arr);
            }           
        },
        error: function(xhr, type, errerThrown) {
            mui.toast('网络异常,请稍候再试');
        }
    });
</script>
</body>
</html>