[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화 시킵니다. 구현 내용 News/Ask/Jobs 각 페이지를 ListItem.vue에서 컴포넌트를 시킨 후 각각의 페이지에서 ListItem.vue를 import 시킵니다. 리팩토링 before vue > NewsView.vue {{ item.points }} {{ item.title }} {{ item.time_ago }}.. [vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점) vue.js에서 v-if를 이용한 조건부 렌더링을 알아보겠습니다. v-if v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가 비어있습니다. True False //결과: True v-else v-else는 v-if 와 함께 이용할 수 있습니다. 앞의 조건이 성립하지 않는다면 else 조건이 동작합니다. 예제) button을 이용하여 form을 조건부 렌더링 · add item 버튼 클릭 시 form 출력 · cancel 버튼 클릭시 form 사라짐 {{ header.toLocaleUpperCase() }} add item cancel add {{ item.subject }} var app.. 이전 1 다음 반응형
