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

雖然說現(xiàn)在很多文章說他們的代碼是vue2.0版本的，但是有一些仔細(xì)一看，發(fā)現(xiàn)并不全是2.0版本，有些語(yǔ)法還是1.0的版本，比如這個(gè)$index,$key，這兩個(gè)壓根就不是2.0的寫法，2.0早就把這兩個(gè)給刪除了，我們先來看看之前的列表渲染是怎么寫的 <template><div class="hello"><ul><li v-for="item in list">{{$index}}--{{$key}}</li></ul></div> </template><script> export default {data(){return{list:['姓名','性別','年齡','語(yǔ)文','數(shù)學(xué)','英語(yǔ)','總分']}} } </script> 這種寫法在2.0的環(huán)境下雖然可以運(yùn)行
但是在控制臺(tái)卻出錯(cuò)了 $index和$key沒有定義，而且在頁(yè)面上也沒有渲染出這兩個(gè)東西的效果，$index是索引，$key是鍵值 在vue2.0中，這種寫法改為了 <template><div class="hello"><ul><li v-for="(index,item) in list">{{index}}--{{item}}</li></ul></div> </template> 得到的頁(yè)面效果如下 當(dāng)然，這個(gè)問題有很多人寫博客提到過，我這里就匯總一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els獲取元素的時(shí)候，出現(xiàn)了一些問題，當(dāng)然可能不止是2.8.2版本，其他的版本我還沒試過，如果有跟我相同的問題的話可以試試看這種方法。我們先來使用$els <template><div class="hello"><div class="v-t" v-el:v-t><button @click="getElement">測(cè)試</button></div></div> </template><script> export default {methods:{getElement(){let element=this.$els.vTconsole.log(element)}} } </script> v-el用橫杠寫法，在用$els的時(shí)候用駝峰寫法，我在2.8.2版本的vue環(huán)境下是獲取不了的 我們?cè)賮硎褂?refs獲取元素節(jié)點(diǎn)，我們先用這種方法試試看 <template><div class="hello"><div class="v-t" ref="vt"><button @click="getElement">測(cè)試</button></div></div> </template><script> export default {methods:{getElement(){let element=this.$refs.vtconsole.log(element)}} } </script> 這種方法是可以獲取到的 接下來我們?cè)囋嚳催@種寫法 <template><div class="hello"><div class="v-t" ref="v-t"><button @click="getElement">測(cè)試</button></div></div> </template><script> export default {methods:{getElement(){let element=this.$refs['v-t']console.log(element)}} } </script> 也是可以獲取得到class為v-t的元素
關(guān)于ref注冊(cè)時(shí)間的重要說明: 因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模版中做數(shù)據(jù)綁定。----引用自vue.js官方文檔

三、transition

Vue 提供了 transition 的封裝組件，比如我們現(xiàn)在要實(shí)現(xiàn)一種效果：點(diǎn)擊一個(gè)按鈕之后，緩慢出現(xiàn)一個(gè)有背景顏色的div，點(diǎn)擊div里面的關(guān)閉按鈕之后，div緩慢消失。有一種寫法是這樣的 <template><div class="hello"><button @click="show">開啟</button><div class="box" v-show="this.tf" transition="fade"><button @click="hide">關(guān)閉</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> 這種寫法在有些版本運(yùn)行是有效果的，但是在2.8.0版本下卻沒有效果，點(diǎn)擊開啟按鈕之后只出現(xiàn)一個(gè)關(guān)閉按鈕，現(xiàn)在我們更改一下寫法 <template><div class="hello"><button @click="show">開啟</button><transition><div class="box" v-show="this.tf"><button @click="hide">關(guān)閉</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> 這種寫法就有效果了，這是根據(jù)官方文檔寫的，實(shí)現(xiàn)之后效果是這樣的

四、結(jié)語(yǔ)

這是我最近學(xué)習(xí)遇到的一些小問題，有時(shí)候看視頻，別人寫的代碼照著敲，我們敲完之后可能都還運(yùn)行不了，這時(shí)候有可能是版本問題，框架更新了，語(yǔ)法不一樣了等等。現(xiàn)在一些框架更新太快了，對(duì)我們這些碼農(nóng)來說確實(shí)挺考驗(yàn)的。


更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。