欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0移除或更改的一些東西(移除index key)

 更新時間:2017年08月28日 14:18:44   作者:fyk曩昔  
這篇文章主要介紹了vue2.0移除或更改的一些東西,vue2.0 移除了index和key,具體內(nèi)容詳情大家參考下本文

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

雖然說現(xiàn)在很多文章說他們的代碼是vue2.0版本的,但是有一些仔細一看,發(fā)現(xiàn)并不全是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:['姓名','性別','年齡','語文','數(shù)學','英語','總分']
 }
 }
}
</script>

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

但是在控制臺卻出錯了

$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獲取元素的時候,出現(xiàn)了一些問題,當然可能不止是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環(huán)境下是獲取不了的

我們再來使用$refs獲取元素節(jié)點,我們先用這種方法試試看

<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的元素

關(guān)于ref注冊時間的重要說明: 因為ref本身是作為渲染結(jié)果被創(chuàng)建的,在初始渲染的時候你不能訪問它們 - 它們還不存在!$refs 也不是響應(yīng)式的,因此你不應(yīng)該試圖用它在模版中做數(shù)據(jù)綁定。----引用自vue.js官方文檔

三、transition

Vue 提供了 transition 的封裝組件,比如我們現(xiàn)在要實現(xiàn)一種效果:點擊一個按鈕之后,緩慢出現(xiàn)一個有背景顏色的div,點擊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>

這種寫法在有些版本運行是有效果的,但是在2.8.0版本下卻沒有效果,點擊開啟按鈕之后只出現(xiàn)一個關(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ù)官方文檔寫的,實現(xiàn)之后效果是這樣的

四、結(jié)語

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

相關(guān)文章

  • 基于vue的驗證碼組件的示例代碼

    基于vue的驗證碼組件的示例代碼

    這篇文章主要介紹了基于vue的驗證碼組件的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue實現(xiàn)打包添加二級目錄

    vue實現(xiàn)打包添加二級目錄

    這篇文章主要介紹了vue實現(xiàn)打包添加二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題

    Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題

    這篇文章主要介紹了Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue props 單項數(shù)據(jù)流實例分享

    vue props 單項數(shù)據(jù)流實例分享

    在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項數(shù)據(jù)流實例分享內(nèi)容,需要的朋友們可以參考下。
    2020-02-02
  • vue中使用@change的方法

    vue中使用@change的方法

    @change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當前的參數(shù)呢?本文給大家詳細講解,感興趣的朋友一起看看吧
    2023-11-11
  • vue獲取v-for異步數(shù)據(jù)dom的解決問題

    vue獲取v-for異步數(shù)據(jù)dom的解決問題

    這篇文章主要介紹了vue獲取v-for異步數(shù)據(jù)dom的解決問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Bpmn.js?自定義描述文件使用說明

    Bpmn.js?自定義描述文件使用說明

    這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • Vue3組合式API之getCurrentInstance詳解

    Vue3組合式API之getCurrentInstance詳解

    我們可以通過?getCurrentInstance這個函數(shù)來返回當前組件的實例對象,也就是當前vue這個實例對象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • vue模塊拖拽實現(xiàn)示例代碼

    vue模塊拖拽實現(xiàn)示例代碼

    這篇文章主要介紹了vue模塊拖拽實現(xiàn)示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • Vue自定義部分頁面顯示導(dǎo)航欄功能

    Vue自定義部分頁面顯示導(dǎo)航欄功能

    這篇文章主要介紹了Vue自定義部分頁面顯示導(dǎo)航欄,在設(shè)計導(dǎo)航欄的時候,考慮到登錄之前不能瀏覽該網(wǎng)站,所以需要在登錄頁和注冊頁不能出現(xiàn)導(dǎo)航欄,登錄后的頁面才能出現(xiàn)導(dǎo)航欄,本文給大家解決這個問題,感興趣的朋友跟隨小編一起看看吧
    2022-10-10

最新評論