[Udemy Vue 완벽가이드 Section3] 48. 섹션 요약

이번 섹션에서는 조건부 컨텐츠와 목록을 배웠다.

 

1/ Conditional Content(조건부 컨텐츠)

•  v-if(and v-show) allows you to render content only if a certain condition is met.
  • 특정 조건 만족시에만 컨텐츠를 렌더링되게 할 수 있다.

 

v-if

• v-if can be combined with v-else and v-else-if(only on direct sibiling elements!)
  • v-if는 v-else나 v-else-if와 결합해서 직계 형제 요소에만 한정된다. v-else와 v-else-if를 요소에 사용할 때는 v-if 내부가 아니라 v-if에 바로 뒤이어 사용해야한다.
• 요소를 실제로 DOM에 추가하거나 DOM에서 제거할 수 있다.

2023.07.25 - [Vue.js] - [Udemy Vue 완벽가이드 Section3] 41. 콘텐츠 조건부 렌더링

2023.07.26 - [Vue.js] - [Udemy Vue 완벽가이드 Section3] 42. v-if, v-else 및 v-else-if

 

 

 

v-show

• CSS로 보이거나 숨기기만 한다.

2023.07.26 - [Vue.js] - [Udemy Vue 완벽가이드 Section3] 43. v-if 대신 v-show 사용하기

 

2/ Lists

List와 데이터 lists를 출력하는 방법을 배웠다.

• v-for can be used to render multiple elements dynamically
  • v-for 디렉티브를 사용하면 여러 요소를 동적으로 렌더링 할 수 있다.
• v-for can be used with arrays, objects and ranges(numbers).
  • v-for는 배열, 객체, 숫자 범위에 사용할 수 있다.

3/ v-for Variations

• v-for에 든 객체를 다루는 경우, value, value + index, key + index를 추출할 수 있다.
• If you need v-for and v-if, DON't use them on the same element. Use a wrapper with v-if instead.
  • v-for와 v-if를 함께 사용해야 하는 경우, 동일하 요소에 두 directive를 쓰지 않고, v-if로 wrapper를 사용해라.
  • ex: template, div, ul 요소 등 필요한 부분 어디에든 써도 되지만, 동일한 요소에 겹쳐 쓰지 마라.

<ul v-if="taskListIsVisible">
  <li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>

2023.07.26 - [Vue.js] - [Udemy Vue 완벽가이드 Section3] 45. v-for 자세히 알아보기

 

 

4/ keys

• Vue re-uses DOM elements to optimize performance. → This can lead to bugs if elements contain state.
  • key가 없다면, 만일 list 항목요소에 content와 함께 이동되어야 하는 state가 있으면 재사용시 오류 발생가능.
• Bind the key attribute to a unique value to help Vue identify elements that belong to list content.
  • 따라서, key를 사용하고, key를 고유한 값에 바인딩하면 Vue가 고유한 값을 갖는 모든 요소를 분명하게 식별할 수 있다.

2023.07.26 - [Vue.js] - [Udemy Vue 완벽가이드 Section3] 47. 목록 및 키 (key속성)

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다