一、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.vTconsole.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.vtconsole.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> 這種寫法就有效果了，這是根據官方文檔寫的，實現之后效果是這樣的

四、結語

這是我最近學習遇到的一些小問題，有時候看視頻，別人寫的代碼照著敲，我們敲完之后可能都還運行不了，這時候有可能是版本問題，框架更新了，語法不一樣了等等。現在一些框架更新太快了，對我們這些碼農來說確實挺考驗的。


更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue2.0移除或更改的一些东西的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。