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

一、引入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)

猜你喜欢

转载自blog.csdn.net/xljx_1/article/details/104818938