vue插件

// 轮播图：https://github.com/zwhGithub/vue-swiper

安装组件：

cnpm i vue-swiper-component --save  //国内镜像

使用：

template：

<Swiper v-if="list.length > 0">
    <Slide v-for="(item,index) in list" :key="index">
        <img :src="item.url" class="carousel">
    </Slide>
</Swiper>

JS：

import { Swiper, Slide } from 'vue-swiper-component';
export default {
    name: 'Index',
    components: { 
        Swiper,
        Slide
    },
    data () {
        return {
            msg: 'Index界面',
            list:[
            { url:'static/images/banner/banner.png'},
            { url:'http://cdn.smartcommunity.windyet.com/o_1ceqfsu7n1bb76u818ue7og1317a.jpeg'},
            { url:'http://cdn.smartcommunity.windyet.com/o_1ceqfsu7n1bb76u818ue7og1317a.jpeg'},
            ]
        }
    },
}

 

 

axios：https://www.kancloud.cn/yunye/axios/234845

安装：

npm install axios --save

使用方法一：直接在组件中引入并使用：

//引入
import axios from 'axios' 

// 使用
axios.get('http://test.com/')
    .then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

使用方法二：在main.js中引入，并设置全局变量，可全局使用：

// 在main.js中引入并设置为全局变量
import axios from 'axios'
Vue.prototype.axios = axios

// 在组件中的使用
this.axios.get('http://test.com/')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

 ————Vue.prototype.xxx用于设置全局变量，在组件中使用this.xxx即可调用。

通用方法：

this.axios.get('http://test.com/',{
    params:{
        a:'xxx',
        b:'yyy',
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

 

——更多参数可以参考官方

 

//关于请求回来的数据无法使用this赋值的问题：

使用then后，无法使用this给data赋值，这是因为then的内部this未被绑定。解决方法有两个

1、在外部先写好self = this，然后then内部调用

mounted(){
    self = this;
    this.axios.get('http://test.com/',{
        params:{

        }
    })
    .then ( function(response) {
        console.log(response);
        self.test.b = response.data.b;
    });
},

 

2、使用箭头函数，可以与父级共享this

mounted(){
    this.axios.get('http://test.com/',{
        params:{

        }
    })
    .then ((response) => {
        console.log(response);
        // console.log(response.data.b);
        this.test.b = 111;
    });
},

 

 

 

 

 

 

 

 

 

 

 

————占位符