今天沒有事做，所以無聊玩一玩VUE
思路：
寫http請求:
獲取數(shù)據(jù) ：通過QQ音樂移動版，得到數(shù)據(jù)
數(shù)據(jù)傳入data: 會更新視圖層，但是swiper他的樣式只顯示一種，所以才會有最后一步
在update時候創(chuàng)建實例：new swiper

<pre><code>
return new Promise((resolve, reject) => {
        let requestObj;
        if (window.XMLHttpRequest) {
            requestObj = new XMLHttpRequest();
        } else {
            requestObj = new ActiveXObject;
        }
        let sendData = '';
        if (type == 'POST') {
            sendData = JSON.stringify(data);
        }
        requestObj.open(type, url, true);
        requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        requestObj.send(sendData);
        requestObj.onreadystatechange = () => {
            if (requestObj.readyState == 4) {
                if (requestObj.status == 200) {
                    let obj = requestObj.response
                    if (typeof obj !== 'object') {
                        obj = JSON.parse(obj);
                    }
                    resolve(obj)
                } else {
                    reject(requestObj)
                }
            }
        }
    })
</code></pre>

vue代碼

<template>
<div v-if="recommends.length">
  <div class="swiper-container">
    <div class="swiper-wrapper" >
      <div class="swiper-slide" v-bind:key="item.id" v-for="item in recommends">
       <a :href="item.linkUrl">
                ![](item.picUrl)
              </a>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import httpxml from '../../common/js/httpxml'
export default {
  data() {
    return {
      recommends: [],
    }
  },
  created() {
      this._getRecommend()
  },
  updated(){
    this.createSwiper();
  },
  methods: {
    createSwiper() {
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        speed: 600,
        autoplay: 4000,
        onTouchEnd: function() {
          swiper.startAutoplay()
        }
      });
  },
    _getRecommend() {
      httpxml('/v2/view', { a: "b" }, 'post').then((res) => {
        this.recommends = res.data.slider;
      })
    },
  }
}
</script>