這篇文章主要介紹了vue2.0移除或更改了什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的做網(wǎng)站、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有相山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

雖然說(shuō)現(xiàn)在很多文章說(shuō)他們的代碼是vue2.0版本的，但是有一些仔細(xì)一看，發(fā)現(xiàn)并不全是2.0版本，有些語(yǔ)法還是1.0的版本，比如這個(gè)$index,$key，這兩個(gè)壓根就不是2.0的寫(xiě)法，2.0早就把這兩個(gè)給刪除了，我們先來(lái)看看之前的列表渲染是怎么寫(xiě)的

<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>

這種寫(xiě)法在2.0的環(huán)境下雖然可以運(yùn)行

但是在控制臺(tái)卻出錯(cuò)了

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

在vue2.0中，這種寫(xiě)法改為了

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

得到的頁(yè)面效果如下

當(dāng)然，這個(gè)問(wèn)題有很多人寫(xiě)博客提到過(guò)，我這里就匯總一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els獲取元素的時(shí)候，出現(xiàn)了一些問(wèn)題，當(dāng)然可能不止是2.8.2版本，其他的版本我還沒(méi)試過(guò)，如果有跟我相同的問(wèn)題的話(huà)可以試試看這種方法。我們先來(lái)使用$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用橫杠寫(xiě)法，在用$els的時(shí)候用駝峰寫(xiě)法，我在2.8.2版本的vue環(huán)境下是獲取不了的

我們?cè)賮?lái)使用$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>

這種方法是可以獲取到的

接下來(lái)我們?cè)囋嚳催@種寫(xiě)法

<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í)間的重要說(shuō)明: 因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪(fǎng)問(wèn)它們 - 它們還不存在！$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緩慢消失。有一種寫(xiě)法是這樣的

<template>
 <div class="hello">
 <button @click="show">開(kāi)啟</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>

這種寫(xiě)法在有些版本運(yùn)行是有效果的，但是在2.8.0版本下卻沒(méi)有效果，點(diǎn)擊開(kāi)啟按鈕之后只出現(xiàn)一個(gè)關(guān)閉按鈕，現(xiàn)在我們更改一下寫(xiě)法

<template>
 <div class="hello">
 <button @click="show">開(kāi)啟</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>

這種寫(xiě)法就有效果了，這是根據(jù)官方文檔寫(xiě)的，實(shí)現(xiàn)之后效果是這樣的

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue2.0移除或更改了什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：vue2.0移除或更改了什么-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://chinadenli.net/article24/dgcsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、微信公眾號(hào)、響應(yīng)式網(wǎng)站、建站公司、網(wǎng)站內(nèi)鏈、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)