一、vue2.0移除了$index和$key

雖然說現在很多文章說他們的代碼是vue2.0版本的，但是有一些仔細一看，發現並不全是2.0版本，有些語法還是1.0的版本，比如這個$index,$key，這兩個壓根就不是2.0的寫法，2.0早就把這兩個給刪除了，我們先來看看之前的列表渲染是怎麼寫的

<template>
  <div class="hello">
    <ul>
      <li v-for="item in list">{{$index}}--{{$key}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:['姓名','性別','年齡','語文','數學','英語','總分']
    }
  }
}
</script>

這種寫法在2.0的環境下雖然可以運行

但是在控制檯卻出錯了

$index和$key沒有定義，而且在頁面上也沒有渲染出這兩個東西的效果，$index是索引，$key是鍵值

在vue2.0中，這種寫法改爲了

<template>
  <div class="hello">
    <ul>
      <li v-for="(index,item) in list">{{index}}--{{item}}</li>
    </ul>
  </div>
</template>

得到的頁面效果如下

當然，這個問題有很多人寫博客提到過，我這裏就彙總一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els獲取元素的時候，出現了一些問題，當然可能不止是2.8.2版本，其他的版本我還沒試過，如果有跟我相同的問題的話可以試試看這種方法

我們先來使用$els

<template>
  <div class="hello">
    <div class="v-t" v-el:v-t>
      <button @click="getElement">測試</button>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    getElement(){
      let element=this.$els.vT
      console.log(element)
    }
  }
}
</script>

v-el用橫槓寫法，在用$els的時候用駝峯寫法，我在2.8.2版本的vue環境下是獲取不了的

我們再來使用$refs獲取元素節點，我們先用這種方法試試看

<template>
  <div class="hello">
    <div class="v-t" ref="vt">
      <button @click="getElement">測試</button>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    getElement(){
      let element=this.$refs.vt
      console.log(element)
    }
  }
}
</script>

這種方法是可以獲取到的

接下來我們試試看這種寫法

<template>
  <div class="hello">
    <div class="v-t" ref="v-t">
      <button @click="getElement">測試</button>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    getElement(){
      let element=this.$refs['v-t']
      console.log(element)
    }
  }
}
</script>

也是可以獲取得到class爲v-t的元素

關於ref註冊時間的重要說明: 因爲ref本身是作爲渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模版中做數據綁定。----引用自vue.js官方文檔

三、transition

Vue 提供了 transition 的封裝組件，比如我們現在要實現一種效果：點擊一個按鈕之後，緩慢出現一個有背景顏色的div，點擊div裏面的關閉按鈕之後，div緩慢消失。有一種寫法是這樣的

<template>
  <div class="hello">
    <button @click="show">開啓</button>
    <div class="box" v-show="this.tf" transition="fade">
      <button @click="hide">關閉</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tf:false
    }  
  },
  methods:{
    show(){
      this.tf=true
    },
    hide(){
      this.tf=false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
  width:177px;
  height:177px;
  transition:all 0.5s
}
.fade-transition{
  opacity:1;
  background:rgba(7,17,27,0.8);
}
.fade-enter,.fade-leave{
  opacity:0;
  background:rgba(7,17,27,0);
}
</style>

這種寫法在有些版本運行是有效果的，但是在2.8.0版本下卻沒有效果，點擊開啓按鈕之後只出現一個關閉按鈕，現在我們更改一下寫法

<template>
  <div class="hello">
    <button @click="show">開啓</button>
    <transition>
      <div class="box" v-show="this.tf">
        <button @click="hide">關閉</button>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tf:false
    }  
  },
  methods:{
    show(){
      this.tf=true
    },
    hide(){
      this.tf=false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
  width:177px;
  height:177px;
  background:rgba(7,17,27,0.8);
}
.v-enter-active,.v-leave-active{
  transition: opacity 0.5s
}  
.v-enter,.v-leave-to{
  opacity: 0
}
</style>

這種寫法就有效果了，這是根據官方文檔寫的，實現之後效果是這樣的