封装Vue轮播图

slot 
生命周期 操作dom在mounted 操作数据在created 操作数据也可以放在mounted
$nextTick 上面的执行 下面的才会更新
 
v-once 只渲染一次dom 加上datasorce.length>0 有内容才执行
 
Vue不考虑IE的兼容 只支持IE8以上
 
为什么不在index.html文件夹下写请求数据?
:引入的jquery的包比vue框架还要大的多 
    引入来只做一个ajax请求 并不合理 
体现不了jquery操作DOM的优势
vue中数据改变渲染到页面发送变化  不需要用到dom操作
因此用到一款vue插件
axios 专做ajax请求
 
 
安装axios
 
$npm install axios 

 

Get请求

//通过给定的ID来发送请求
 axios.get('/user?ID=12345')
 .then((response)=>{
 console.log(response); 
})
 .catch((err)=>{
 console.log(err); 
}); 
//以上请求也可以通过这种方式来发送 
axios.get('/user',
{
 params:{ ID:12345 }
 })
 .then((response)=>{ 
console.log(response);
 }) 
.catch((err)=>{ 
console.log(err); 
});

 

post请求

axios.post('/user',
{ 
firstName:'Fred', lastName:'Flintstone' 
})
 .then(function(res){
 console.log(res); 
})
.catch(function(err){ 
console.log(err); 
});

 


一次性发送多个

 

function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))

  

  

 

 

 

 

-------------------整理于yingxiang 20190218

转载于:https://www.cnblogs.com/522040-m/p/10396967.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue 的组件化思想来封装一个轮播图。首先,需要创建一个 Carousel 组件,然后在该组件中使用 Vue 的生命周期函数来实现轮播图的自动播放和手动切换。具体实现可以参考以下代码: <template> <div class="carousel"> <div class="carousel-inner"> <div v-for="(item, index) in items" :key="index" :class="{ active: index === currentIndex }"> <img :src="item.src" alt=""> </div> </div> <a class="carousel-control-prev" href="#" role="button" @click="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#" role="button" @click="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </template> <script> export default { name: 'Carousel', props: { items: { type: Array, required: true } }, data() { return { currentIndex: 0, timer: null } }, mounted() { this.start() }, methods: { start() { this.timer = setInterval(() => { this.next() }, 3000) }, stop() { clearInterval(this.timer) this.timer = null }, prev() { this.currentIndex-- if (this.currentIndex < 0) { this.currentIndex = this.items.length - 1 } }, next() { this.currentIndex++ if (this.currentIndex >= this.items.length) { this.currentIndex = 0 } } }, watch: { currentIndex() { this.stop() this.start() } } } </script> <style> .carousel { position: relative; width: 100%; height: 300px; overflow: hidden; } .carousel-inner { position: absolute; width: 100%; height: 100%; display: flex; transition: transform 0.5s ease-in-out; } .carousel-inner > div { flex: 1; display: flex; justify-content: center; align-items: center; } .carousel-inner > div > img { max-width: 100%; max-height: 100%; } .carousel-inner > .active { transform: translateX(0); } .carousel-inner > .prev { transform: translateX(-100%); } .carousel-inner > .next { transform: translateX(100%); } .carousel-control-prev, .carousel-control-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; transition: background-color 0.2s ease-in-out; } .carousel-control-prev:hover, .carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.8); } .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; fill: #fff; } .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M6.5 0l-3 3 3 3v-2h1v-2h-1v-2z'/%3E%3C/svg%3E"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l3 3-3 3v-2h-1v-2h1v-2z'/%3E%3C/svg%3E"); } </style> 在父组件中,可以通过以下方式来使用 Carousel 组件: <template> <div class="app"> <carousel :items="items"></carousel> </div> </template> <script> import Carousel from './Carousel.vue' export default { name: 'App', components: { Carousel }, data() { return { items: [ { src: 'https://picsum.photos/800/300?random=1' }, { src: 'https://picsum.photos/800/300?random=2' }, { src: 'https://picsum.photos/800/300?random=3' }, { src: 'https://picsum.photos/800/300?random=4' }, { src: 'https://picsum.photos/800/300?random=5' } ] } } } </script> <style> .app { max-width: 800px; margin: 0 auto; } </style> 这样就可以在页面上展示一个轮播图了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值