Vue.js_Vuestargram_만들기_4

jiyunssu·2022년 11월 29일
0

practice/vue.js

목록 보기
9/9

탭 만들기 & 탭으로 사진 업로드 페이지 만들기

동적인 UI 만드는 방법

1. 탭의 기본틀을 짜준다.

버튼 0을 누르면 내용 0을 보여줌

2. UI 현재 상태를 데이터로 만들기

step이 0이면 내용 0을, 1일때는 내용 1일 보여줌

3. 상태에 따라 HTML이 어떻게 보일지

v-if사용

버튼 0을 누르면 step을 0으로 바꾸도록 @click 사용

이 방법을 이용해서 뷰스타그램 탭을 만들어 보쟈

( * 왜 탭을 사용하냐 : 뒤로가기 버튼이 잘 먹고 간단한 UI는 라우터로 만들기 귀차늠)

  1. 기본 틀 : 애플센세가 준 html, css 자료 사용
  2. UI를 담을 data에 tabs를 만들어줌!
    (중요한 건 다 App.vue에 보관하여라)
  3. tabs 숫자에 따라 어떤 페이지가 보일지 v-if 사용해서 만들어줌!
  4. tabs 데이터는 VuegramContainer에서 사용해야하니까 App.vue에서 props로 전송

    & props에 등록

오호라 너무 재밌다

0개의 댓글