Vue04 모달창 만들기

오늘 배울 내용: 모달창 만들기 (UI 만드는 법칙)

Vue 개발 tip: 데이터 중심으로 사고하기. 데이터를 어떻게 만들지 먼저 생각ㄱ.

데이터를 어떻게 만들어놔야 내가 편할까부터 생각하면 됨.

<img>넣는법

1. 절대경로는 그냥 넣기 (https://~)
2. 상대경로: 같은 폴더에 있는 경로 - 이미지를 먼저 준비하기
   • src - assets 폴더에 관습적으로 넣는 것
   • src에 있는거 가져올때는 경로는 ./ 부터
   • <img src="./assets/room0.jpg" alt="">

이미지 사이즈를 조정하고 싶으면 class 명을 넣으면 되겠죠.

class=“ ” 줘서 css 조정하기 or /하고 사이즈 적기?

모달창 만들기

상세페이지 대용으로 쓸 법한 모달창 만들기 이미지나 글씨를 누르면 모달창을 띄우는 코드를 만들기

모든 UI 만드는 법 - 모달창, 탭, 햄버거메뉴, 서브메뉴, 툴팁, 이미지슬라이드 등 등 / 뭐 누르면 등장하는 것들

무에서 유가 창조되는 게 아니야. 내가 미리 만들어놓고 평소에 숨겨놓는거야. 모달창 UI가 미리 필요해요. 디자인해보겠어.

동적인 UI 만드는 법: 2step

0. HTML CSS로 디자인해두기(기본)
1. UI의 현재 상태를 데이터로 저장해두기
2. 데이터에 따라 UI가 어떻게 보일지 작성

1. UI의 현재 상태를 데이터로 저장해두기 “그 UI가 지금 어떻게 보여야함?” 데이터 만드는 법 모달창은 닫힌 상태와 열린 상태 2가지로 존재하죠. 닫힌상태 열린상태로 표현할 데이터 2개를 아무거나로 저장하기. (예, 0은 닫혔다, 1은 열렸다 or true 열렸다, false 닫혔다) 모달창의 상태를 기록하라.

2. 데이터에 따라 UI가 어떻게 보일지 작성 위에 template 부분에 작성을 해주기

밑에 있는 모달창열렸니 data 가 true면 이거 (template - div class=“black-bg”) 보여줄거임.

v-if=“조건식”

v-if는 안에 있는 조건식이 참일때만 HTML 보여줌

v-if="모달창열렸니 == true"


<h4 @click="모달창열렸니 = true">

이 데이터 저장 공간을 react 에서는 state 라고도 부른다.

UI의 상태를 저장하는 공간이라서 state(상태) 라고 부르기도 한다.