vue 学习中版本、问题集锦

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

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

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

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

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

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

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

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

过渡transition

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

 1     <transition name="fold">
 2     <div class="shopcart-list" v-show="listShow">
 3       <div class="list-header">
 4         <h1 class="title">购物车</h1>
 5         <span class="empty">清空</span>
 6       </div>
 7       <div class="list-content" ref="listConent">
 8         <ul>
 9           <li class="food" v-for="food in selectFoods">
10             <span class="name">{{food.name}}</span>
11             <div class="price">
12               <span>￥{{food.price*food.count}}</span>
13             </div>
14             <div class="cartcontrol-wrapper">
15               <cartcontrol :food="food"></cartcontrol>
16             </div>
17           </li>
18         </ul>
19       </div>
20     </div>
21     </transition>

 1     .fold-enter-active, .fold-leave-active
 2       position: absolute
 3       left: 0
 4       z-index: -1
 5       width: 100%
 6       transition: all 0.5s
 7       transform: translate3d(0,-100%,0)
 8     .fold-enter, .fold-leave-to
 9       position: absolute
10       top: 0
11       left: 0
12       z-index: -1
13       width: 100%
14       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”替换