最近在學(xué)習(xí)Vue，然后做了一個輪播圖，然后想起之前用jQuery做的輪播圖越庇，就打算進行一個對比桑驱。
jQuery輪播圖的實現(xiàn)代碼和效果
Vue輪播圖的代碼實現(xiàn)步驟和效果
主要用到的技術(shù)
1.v-bind：屬性綁定
2.v-for：列表渲染
3.v-show：條件渲染
4.class的綁定切換
5.created鉤子
6.Vue過渡效果-
步驟和對比
1.寫好html和css
PS:這里和jQuery輪播圖有所不同押框，因為Vue使用了列表渲染，所以只需要一個簡單的結(jié)構(gòu)的可以了
Vue輪播圖html結(jié)構(gòu)
jQuery輪播圖html結(jié)構(gòu)
2.初始化一個Vue實例谴分，然后掛在父元素上去沙兰，并且設(shè)定數(shù)據(jù)為圖片的數(shù)組斋射，以及后面計數(shù)用的mark腹躁，mark的初始值為0（第一張圖片）
初始化Vue實例
3.分別在放置圖片的li元素和放置選擇標識的span元素中，使用v-for遍歷數(shù)據(jù)中的img屬性和它的長度榜掌，
PS：在這里要注意的是隙赁，使用v-for循環(huán)的時候最好加上:key=標識策菜，用以對后續(xù)對輪播圖進行選擇的標識
v-for列表渲染
bullet渲染
4.使用v-bind的對img標簽的src屬性進行綁定，可以使用所寫:屬性
使用v-bind綁定屬性
這時候輪播的效果和html結(jié)構(gòu)是這樣的河劝，他還不會動以及切換圖片，并且最后一張圖片在最上面（因為對li使用了position:absolute）
5.現(xiàn)在來編寫一下運行的邏輯
首先，①當(dāng)圖片顯示第幾張的時候碘菜，下面的bullet的第幾個就要標紅静尼，②并且點擊相應(yīng)的bullet可以切換到對應(yīng)的圖片;
①這個可以使用Vue的class綁定進行條件渲染普舆，當(dāng)標識index和圖片的標識mark相等時就標紅轧膘，②的話可以用Vue的事件綁定v-on（我這里采用的是縮寫@事件='執(zhí)行的函數(shù)'）對標識進行時間綁定
③在Vue實例中的methods中添加change方法仙蛉，change的實現(xiàn)很簡單篮绰，直接將實例中data屬性中的mark變?yōu)閕ndex的數(shù)字即可
change的實現(xiàn)
④使用v-show對li元素中顯示的圖片進行條件渲染困食，方法是當(dāng)圖片標識的index與Vue實例中的mark相等時就顯示該li元素
這時候的Vue輪播圖就已經(jīng)實現(xiàn)了點擊下面的bullet標識切換圖片的效果了，并且bullet標識也會有相應(yīng)的標紅
6.但是，這時候的圖片切換還沒有平滑過渡的效果剂跟，我們可以使用Vue類名過渡方式對圖片的切換添加過渡效果
vue的類名過渡
先要在需要過度的元素的父元素，也就是ul元素中添加一個name屬性撤卢，作為過渡效果類名的標記
然后在css中添加過渡效果的變化
最后將使用Vue中的過渡組件渡紫，將ul元素改為transition-group捣卤，然后添加tag屬性子姜，并且tag=ul（不添加的話ul元素名稱顯示為span元素）
這時候的Vue輪播圖已經(jīng)有平滑過渡的效果了
7.最后厚满，我們在methods中添加一個自動切換的函數(shù)府瞄，然后在created鉤子函數(shù)中執(zhí)行即可
與jQuery輪播圖對比
1.代碼量：明顯Vue代碼量更少
2.直觀性：Vue更直觀且實現(xiàn)更為簡單
