1. 程式人生 > >封裝Vue輪播圖

封裝Vue輪播圖

ssi pread turn ams dex sta 分享圖片 lin res

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

封裝Vue輪播圖