看学习视频，因为年份比较早了，其实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 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 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”替换