一、用axios拿数据
在需要渲染数据的组件中引入axios
找到对应的网站--->开发者工具---->Network/js/需要的接口/Request UR----->复制
在created(){}中用axios.get拿数据----->粘贴路径后删掉callback----->在config文件夹下的index.js中设置跨域------>将axios.get()中的路径做一下修改
page/index.vue
import axios from 'axios'
export default{
created(){
axios.get("/wz/api/v3/get?_=1543633838772").then((res)=>{
console.log(res)
})
}
}
config/index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
"/wz":{
target:"http://cre.mix.sina.com.cn",
changeOrigin:true,
pathRewrite:{
"^/wz":"/"
}
}
},
二、用vue-jsonp拿数据
在文件路径下的CMD中安装vue-jsonp cnpm i vue-jsonp --save
在main.js中引入 import VueJsonp from ‘vue-jsonp’
Vue.use（VueJsonp）
在page/index.vue中用this.$jsonp引入接口
http://temp.163.com/special/00804KV1/post1603_api_all.js?callback=callback&callback=callback&_=1543659415162 //原始网址，引用的时候去掉红色部分
page/index.vue
import axios from 'axios'
export default{
this.$jsonp("http://temp.163.com/special/00804KV1/post1603_api_all.js?_=1543633838771",{ //去掉callback
callbackName:'callback'
}).then((res)=>{
console.log(res)
})
}
}
三、swiper的使用
this.$nextTick(callback) 和 setTimeout(callback,0) //延迟回调函数的执行，直到dom加载完毕
安装 cnpm i swiper --save
在node_modules中找到swiper/dist/css/swiper.css------->引入
import Swiper from 'swiper' //引入swiper插件
import '.. /../../node_modules/swiper/dist/css/swiper.css' //引入文件 放在watch中动态监
在swiper官网中---->中文教程 swpier.x4------>将 html内容复制到需要的页面
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div> <!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div> </div>
在swiper官网中---->中文教程 swpier.x4------>将script内容复制到需要的页面 用于初始化Swiper 控数据变化 如果需要其他功能可以将代码粘在这里面，然后设置需要的css样式
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: { nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: { el: '.swiper-scrollbar',
},
})
取数据 + swiper的使用
page/index.vue
<template>
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in news"> <!--循环遍历news中的数据-->
<img v-bind:src="item.thumb"/> <!--从news的数据中取出图片-->
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import '../../../node_modules/swiper/dist/css/swiper.css'
import Swiper from 'swiper'
export default{
data(){
return{
news:[] //2)拿到数据放在news里
}
},
created(){
axios.get("/wz/api/v3/get?_=1543633838772").then((res)=>{ //1)取数据 这是第一种取数据的方法 这里去掉callback是因为then（）就是一个回调函数
console.log(res)
this.news=res.data.data.filter((item,index)=>{
return index<5
})
})
this.$jsonp("http://temp.163.com/special/00804KV1/post1603_api_all.js?_=1543633838771",{
callbackName:'callback' //这是第二种取数据的方法
}).then((res)=>{
console.log(res)
})
},
watch:{ //3)监听数据
news(){
this.$nextTick(()=>{ // 在这里面进行实例化 4)等待dom跟新完成
var mySwiper = new Swiper ('.swiper-container', { //5)实例化
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction:false, //false 用户操作后还能自动播放 true 用户操作之后就不动了
},
})
})
}
}
}
</script>
<style lang='scss'>
$sc:25;
.swiper-container img{
100%;
height: 175/$sc+rem;
}
</style>