記錄一次vue練習的填坑記錄

時間 2019-12-06

標籤記錄一次 vue 練習简体版

原文原文鏈接

前段時間練習了vue，寫了個簡單的demo，是模仿網易音樂h5頁面效果，內容比較簡單隻實現了基本的功能，使用了vue腳手架、vue-router、vuex以及vant ui庫。在此簡單記錄下遇到的坑以及簡單的填坑記錄。css

一、動態路由

一般咱們寫的路由都是靜態路由，就是寫死路由的名字，可是有時候咱們的路由不能寫死，好比涉及到文章詳情，獲取不一樣的文章內容，此時咱們就須要用動態路由，也就是路由的path屬性不能寫死。舉個栗子~html

//頁面路由
<route-link :to="'/detail/' + id"></route-link>
//路由配置頁面
new Router({
  routes: [
    path: "/detail/:id",
    components: Details
  ]
})複製代碼

二、路由組件懶加載

普通單頁應用中，路由組件是一次性加載的，會對性能有所影響。所以能夠經過路由組件懶加載技術實現按需加載功能。這裏只簡單寫下兩個基本的方案：vue

1、require.ensure()
   const Home = r => {require.ensure([], ()=>{r(require('./home.vue')), 'home'})}
   {
     path: '/home',
     components: Home
   }

2、import webpackChunksName
   const Home = () => import(/*webpackChunkName: 'Home'*/ './home')
   {複製代碼

path: '/home',
     components: Home
   }
   同時在webpack裏添加
   output: {
    chunkFilename: '[name].js'
  }複製代碼

三、網絡請求相關

首先就是關於跨域代理的問題，由於用的vue腳手架，能夠直接設置proxyTable，網上教程也不少，很少介紹；webpack

其次就是請求添加loading效果。請求數據使用的是axios，能夠再請求前和相應後添加攔截器，統一添加loading效果。ios

//請求攔截器
Axios.interceptors.request.use((config)=>{
    //請求前須要作的事情
    return config
}, (err)=>{
    return Promise.reject(err)
})

//響應攔截器
Axios.interceptors.response.use((response)=>{
    //請求響應作的事情
    return response
}, (err)=>{
    return Promise.reject(err)
})複製代碼

四、全局過濾器

一般咱們再用vue的時候會涉及到一些數據的處理，好比將較大的數字轉換成「xxx萬」格式，時間日期的格式化等等，這時候咱們可使用過濾器轉化，可是若是不少組件都用到一個過濾器，咱們每一個組件都寫一遍過濾器就不太好了，此時能夠添加一個全局過濾器，在須要使用的時候直接調用便可。git

//定義一個filters.js文件
const myFilters = {
    changeNums: (nums)=>{
        //對數值進行處理
    }
}

//在index.js裏引入過濾器，對其進行遍歷，綁定每一個過濾器
import myFilter from './filters.js'
for(let item in myFilter){
    Vue.filter(item, myFilter[key])
}

這樣在須要使用過濾器的地方直接調用相對應的過濾器就能夠了，好比：<i>{{item.song.album.publishTime | timeFilter}}</i>複製代碼

五、vue-router的keep-alive

關於這個我在以前文章裏已經寫過基本的使用，能夠點擊連接直接查看github

vue keep-alive組件的使用web

六、css模糊圖片效果

原圖是清晰的圖片，咱們須要用css進行模糊處理，須要用到樣式的filter:blur()屬性。vue-router

//html
<div class="box">
  <div class="box-img">
    <img src="a.jpg" />
  </div>
  <div class="box-bg"></div>
</div>

//css
.box{
  width: 100%;
  height: 200px;
  position: relative;
}
.box-img{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}
.box-bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  backgroung: #333;
  opacity: .5;
}複製代碼

七、關於audio音頻時長獲取

這個內容對於沒有處理過音視頻的夥伴來講是比較陌生的了，我也是第一次遇到。使用的場景是，在點擊歌曲的時候會出現一個簡單的播放器，包括開始/暫停，下一曲以及歌曲播放進度條。前兩個功能都比較簡單，播放進度條須要獲取播放進度及總時長，直接放代碼：vuex

//音頻播放器
<audio ref="audioMusic" :src="songNowGet" @timeupdate="updateTime" @canplay="durationTime" autoplay></audio>
//播放進度條
<div class="audioLine"> 
  <span ref="line" :style="{width: lineWidth}"></span>
</div>
//獲取播放時間
updateTime(){  
  this.musicCurrentTime = this.$refs.audioMusic.currentTime
}
//獲取音頻總時長
durationTime(){  
  this.musicDurationTime = this.$refs.audioMusic.duration
}
//對於音頻播放，時間是時刻變化的，咱們須要經過watch進行監控
watch: {  
//監聽音樂播放時間的變化，更新寬度值並賦值給進度條    'musicCurrentTime': function(newVal){    
    let winWidth = document.documentElement.clientWidth;    
    if(newVal){      
      this.lineWidth = parseInt((newVal * winWidth)/this.musicDurationTime)      
      this.$refs.line.style.width = this.lineWidth/50 + 'rem'    
     }  
    }
 }複製代碼