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.csdn.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”替换