4、vue.js的使用

最新推荐文章于 2023-12-28 21:44:04 发布

草中玉

最新推荐文章于 2023-12-28 21:44:04 发布

阅读量756

点赞数

分类专栏：技术文章标签： vue-js

技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一参考资料
二例子1列表页
三例子2列表页
四例子3详情页
- html代码
- js
五ifelse

一、参考资料

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>

四、例子3（详情页）

1. html代码

<div  id="goods_brief">
    <div id="{{goods_id}}">
        <div class="logo">
            <img src="{{goodspic}}"/>
        </div>
        <h4 class="goods_name">{{goods_name}}</h4>
        <p>{{goods_introduct}}</p>
    </div>

</div>

2.js

var vm = new Vue({
    el: '#goods_brief',
     data: {
        goods_id:null,
        goods_introduct: null,
        goodspic:null,
        goods_name:null,
     }
});
mui.ajax(url1,{
    data:{
        id: id,
        uid:uid
    },
    dataType:'json',
    type:'POST',
    timeout:10000,
    success:function(data){
        vm.goods_id = data.goods_introduct.id;//商品id
        vm.goods_name = data.goods_introduct.name;//商品名称
        vm.goods_introduct = data.goods_introduct.brief;//商品简介
        picStr=JSON.stringify(data.goods_introduct.goodspic);
        picStr=picStr.replace(/\"/g, "");
        vm.goodspic = app.baseurl+picStr;
    },
    error: function(xhr, type, errerThrown) {
        mui.toast('网络异常,请稍候再试');
    }
});

五、if/else

<div  id="goods_brief"> 
    <div class="collect_div">
        <div class="company" id="{{company_id}}">
            <span class="mui-icon glyphicon glyphicon-gift glyphicon_company"></span>
            <span class="company_txt">厂商</span>
        </div>
        <input type="hidden" value="{{ifcollect}}"  id="ifcollect"/>
        <div id="ss">
            <div v-if="(ifcollect == '0')" class="collect" id="{{goods_id}}">
                <span class="mui-icon glyphicon glyphicon-star glyphicon_collect"></span>
                <span class="collect_txt">收藏</span>
            </div>
            <div v-else class="uncollect" id="{{goods_id}}">
                <span class="mui-icon glyphicon glyphicon-star glyphicon_uncollect"></span>
                <span class="collect_txt">已收藏</span>
            </div>
        </div>

    </div>
</div>