H5 使用vue.js + axios 请求数据以及渲染页面

5 篇文章 0 订阅
1 篇文章 0 订阅

一、引入vue.js 建议把js 下载下来存放在本地。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

二、引入axios 建议把js下载下来存在本地

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、上代码,这里其实有一个问题就是跨域问题,自行解决,博主采用nginx代理。如有不会,请联系博主:微信 / QQ 【xljx_888888 / 275300091】

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#banner',
        data: {
            sites: [

            ]
        },
        created:function(){
            this.show();
        },
        mounted:function(){

        },
        methods:{
            show:function(){
                axios.get('/接口地址').then(function (response) {
                    this.sites = response.data.data;
					console.log(this.sites);
                }.bind(this)).catch(function (error) {
                    console.log(error);
                });
            }
    }
    })

</script>

大功告成!! 注意  .bind(this)

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值