vue2.0移除或更改的一些東西(移除index key)
一、vue2.0移除了$index和$key
雖然說現(xiàn)在很多文章說他們的代碼是vue2.0版本的,但是有一些仔細(xì)一看,發(fā)現(xiàn)并不全是2.0版本,有些語法還是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:['姓名','性別','年齡','語文','數(shù)學(xué)','英語','總分'] } } } </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.vT console.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.vt console.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é)語
這是我最近學(xué)習(xí)遇到的一些小問題,有時(shí)候看視頻,別人寫的代碼照著敲,我們敲完之后可能都還運(yùn)行不了,這時(shí)候有可能是版本問題,框架更新了,語法不一樣了等等?,F(xiàn)在一些框架更新太快了,對(duì)我們這些碼農(nóng)來說確實(shí)挺考驗(yàn)的。
相關(guān)文章
Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享
在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享內(nèi)容,需要的朋友們可以參考下。2020-02-02vue獲取v-for異步數(shù)據(jù)dom的解決問題
這篇文章主要介紹了vue獲取v-for異步數(shù)據(jù)dom的解決問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個(gè)函數(shù)來返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下2022-09-09