閑話不提，直接上側(cè)面導(dǎo)航欄代碼

 <ul>
                <li v-for="(item,index) in MenuItem" :key="index" @click="JumpTo(item.location)">
                    <img :src=(item.img) />{{item.text}}
                </li>
</ul>

以及MenuItem構(gòu)成

data(){
  return{
     MenuItem:[
                {text:'首頁',img:require('../assets/home.png'),location:'homepage'},
                {text:'關(guān)于我',img:require('../assets/user.png'),location:'about'},
            ],
  }
}

為什么沒有用到key也要綁定一個(gè)？我的理解是給循環(huán)的每個(gè)item加一個(gè)‘唯一標(biāo)記’，這樣使得vue在數(shù)據(jù)更新后渲染列表新加項(xiàng)的時(shí)候 不必重新全部渲染，而是找出與上次渲染時(shí)發(fā)生變化的key項(xiàng)進(jìn)行渲染。
這里貌似講的更詳細(xì)，奈何沒太看懂。 總之記住v-for循環(huán)出的內(nèi)容要保證唯一性就對了

再說一下MenuItem中的img項(xiàng)，此處記住Vue中對img進(jìn)行綁定路徑操作時(shí)，要用require包裹路徑

img:src('....')//不能正確獲取路徑
img:src=require('....')//可以正確獲取路徑

循環(huán)切換圖片，本來是打算用swiper，但是很顯然 犯懶了（下次一定不懶）。 于是用setInterval()函數(shù)寫了一個(gè)循環(huán)，每過一個(gè)固定時(shí)間就重新給img路徑重新賦值，以達(dá)到循環(huán)切換圖片的效果:

//將要循環(huán)的<img>標(biāo)簽的路徑![giphy.gif](https://upload-images.jianshu.io/upload_images/23625846-14acdcfac75cd102.gif?imageMogr2/auto-orient/strip)
與函數(shù)內(nèi)的值綁定
 <img :src="img" >
//在data()下
//事先定義要切換圖片的路徑
imgList:[
                {
                    src:require('../assets/img1.jpg')
                },![giphy.gif](https://upload-images.jianshu.io/upload_images/23625846-3464cc9c75c252ee.gif?imageMogr2/auto-orient/strip)

                {
                    src:require('../assets/img2.jpg')
                },
                {
                    src:require('../assets/img3.jpg')
                }
            ],
            img:' ', //用于綁定路徑
            id:0 //用于判定列表循環(huán)


//在methods內(nèi)創(chuàng)建循環(huán)函數(shù)
  imgLoop(){
            this.img=this.imgList[this.id].src
            setInterval(()=>{
                //如果id與數(shù)組長度-1(最后一個(gè)元素的位置）相等，說明已經(jīng)循環(huán)到最后一個(gè)元素
                if(this.id===this.imgList.length-1){
                  //重置id計(jì)數(shù)
                    this.id=0
                 //將數(shù)組內(nèi)第一位的內(nèi)容重新賦予img
                    this.img=this.imgList[0].src
                }
                else{
                //繼續(xù)到數(shù)組內(nèi)下一項(xiàng)
                    this.id+=1;
              //將當(dāng)前項(xiàng)的值賦予img
                    this.img=this.imgList[this.id].src
                }
           },8000 //8000ms)
        }

//oncreate()時(shí) 調(diào)用此函數(shù)
 created(){
        this.imgLoop()
    },

最后說下<li>里的@click綁定的是錨點(diǎn)跳轉(zhuǎn)，此處使用了Element.scrollIntoView() 方法，把要跳轉(zhuǎn)位置的id與location綁定即可:

//渲染好的網(wǎng)頁內(nèi)容
<div id="homepage" class="layout-header">//id和上方綁定的location值一致
//method()內(nèi)容
 JumpTo:function(location){
            var whereTo=document.getElementById(location);
            whereTo.scrollIntoView({behavior: "smooth"});
        },