vue 学习中 版本、问题集锦

看学习视频，因为年份比较早了，其实vue早已迭代到vue2.0了，遇到一些问题：

v-for遍历数组，获取索引

注意：在2.0版是1~10中，$index已废除，索引 (item,index)。

如下为vue1.0的写法，$index浏览器会报错

 <ul v-if="seller.supports" class="supports">
    <li class="support-item" v-for="item in seller.supports">
       <span class="icon" :class="classMap[seller.supports[$index].type]"></span>
        <span class="text">{{seller.supports[$index].description}}</span>
     </li>
</ul>

更新为vue2.0后，这样写才对

 <ul v-if="seller.supports" class="supports">
   <li class="support-item" v-for="(item,index) in seller.supports">
     <span class="icon" :class="classMap[seller.supports[index].type]"></span>
     <span class="text">{{seller.supports[index].description}}</span>
   </li>
 </ul>

更多详解，请看http://blog.****.net/Lucky_LXG/article/details/57075914

过渡transition

过渡transition，vue2.0之后，transition过渡不再是属性的形式，而是提出来做了一个标签，包裹住需要动画效果的div，name是唯一标识，主要用来控制样式。

     <transition name="fold">
     <div class="shopcart-list" v-show="listShow">
       <div class="list-header">
         <h1 class="title">购物车</h1>
         <span class="empty">清空</span>
       </div>
       <div class="list-content" ref="listConent">
         <ul>
           <li class="food" v-for="food in selectFoods">
             <span class="name">{{food.name}}</span>
             <div class="price">
               <span>￥{{food.price*food.count}}</span>
             </div>
             <div class="cartcontrol-wrapper">
               <cartcontrol :food="food"></cartcontrol>
             </div>
           </li>
         </ul>
       </div>
     </div>
     </transition>

     .fold-enter-active, .fold-leave-active
       position: absolute
       left: 0
       z-index: -1
       width: 100%
       transition: all 0.5s
       transform: translate3d(0,-100%,0)
     .fold-enter, .fold-leave-to
       position: absolute
       top: 0
       left: 0
       z-index: -1
       width: 100%
       transform: translate3d(0,0,0)

对应的样式也变成了，.name-enter-active, .name-leave-active   进入离开的位置、动画过渡的时间，.name-enter,.name-leave-to进入后，离开时的位置。

指令

vue2.0后，很多指令都可以用 ref 替换，相应的获得元素的时候，用 this.$refs.food 获取指令dom

v-el:food指令   用ref=“food”替换