vue 2.0 제거 또는 변 경 된 것들(index key 제거)

1.vue 2.0 은$index 와$key 를 제외 합 니 다.
현재 많은 글 에서 그들의 코드 가 vue 2.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 는 키 입 니 다.

vue 2.0 에서 이러한 표기 법 은

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

얻 은 페이지 효 과 는 다음 과 같 습 니 다.

물론 이 문 제 는 많은 사람들 이 블 로 그 를 써 서 언급 한 적 이 있 으 니,나 는 여기 서 모 아 보 겠 다.
2.$refs 와$els
vue 2.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.vT
  console.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.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 로 가 져 올 수 있 는 요소 이기 도 합 니 다.

ref 등록 시간 에 대한 중요 한 설명:ref 자체 가 렌 더 링 결과 로 만 들 어 졌 기 때문에 초기 렌 더 링 을 할 때 접근 할 수 없습니다.-존재 하지 않 습 니 다!$refs 도 응답 식 이 아니 므 로 모드 에서 데이터 바 인 딩 을 시도 해 서 는 안 됩 니 다.vue.js 공식 문서 참조
3.전이
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>

이런 표기 법 은 효과 가 있다.이것 은 공식 문서 에 근거 하여 쓴 것 이 고 실현 한 후에 효 과 는 이렇다.

결어
이것 은 제 가 최근 에 배 운 작은 문제 입 니 다.가끔 은 동 영상 을 보고 다른 사람 이 쓴 코드 를 그대로 두 드 립 니 다.우 리 는 두 드 린 후에 도 실행 하지 못 할 수도 있 습 니 다.이 럴 때 버 전 문제 일 수도 있 고 프레임 워 크 가 업데이트 되 었 으 며 문법 이 다 릅 니 다.현재 일부 프레임 워 크 의 갱신 이 너무 빨 라 서 우리 같은 야드 농 들 에 게 는 확실히 매우 시험 적 이다.