[Vue3 Opt] 부동산 홈페이지 생성 4 - 모달창

• 이미지 넣기
• 모달창 띄우기
• v-if

 

(코딩애플님 vue강의 5강)

src\assets 에 복사 붙여넣기

 

● <img> 이미지 넣기

 

src 폴더 안에 있는 이미지를 불러올 때는 상대경로 이용 (절대경로는 http://주소)

 

*상대경로 사용 시 ./ 로 시작해야 한다. 

./ 는 현재 경로

<img src="./assets/homeimg1.jpg">

 

그리고 각각 <img>태그에 class를 준 뒤 <style> 에서 크기 조정을 하면

이런식으로 쭉 출력된다.

 

 

● 모달창

 

클릭 시 새 창이 뜨게 할 건데, vue-router 를 사용하면 다른 페이지로 나누는 것도 가능하다고 한다.

 

**중요한 개념

버튼을 누른다고 무에서 유가 되는 것이 아니라

미리 만들어 놓고 안보이게 해두었다가 버튼을 누르면 보이게 하는 것이다.

 

모달창 style

body {
    margin : 0
}
div {
    box-sizing: border-box;
}
.black-bg {
    width:100%; height: 100;
    background: rgba(0,0,0,0.5);
    position: fixed; padding: 20px;
}
.white-bg {
    width: 100%; height: 100%;
    background: white;
    border-radius: 8px;
    padding: 20px;
}

 

---

2. 기능개발 추가할 경우

 

동적인 UI 만드는 방법

1) UI 현재 상태를 data 저장소에 저장해둔다. 

2) 이 데이터에 의해 어떻게 모달창에 보일지 정해준다.

 

 

1)

모달창 열렸을 때의 상태를 저장해준다.

modalopen = true, 이렇게 true, false로 줘도 되고 0이나 1 등으로 줘도 된다.

 

2)

● v-if="조건식"

 

 

어떤 걸 클릭했을 때 모달창이 뜰지 정한다.

>> {{products[0]}} 클릭할 경우 modalOpen = true 가 되도록 이벤트를 등록

<h3 @click="modalOpen = true">{{ products[0] }}</h3>

 

그리고 모달창에 조건식을 준다.

    <div class="black-bg" v-if="modalOpen == true">
        <div class="white-bg">
            <h4>상세 페이지</h4>
        </div>
    </div>

 

 

"역삼동" 글자 클릭 시 상세페이지가 뜬다.

 

그리고 이 data 저장소 부분을 react에서는 state 라고 부른다.

 

오늘의 과제 닫기버튼 만들기

 

닫기 버튼만드는 건 쉬운데.. 처음엔 modalClose를 만들어야하나? 했다.

근데 v-if 쓸 것도 없이 그냥 닫기 버튼에 클릭 이벤트로 modalOpen=false 하면 된다.

<button @click="modalOpen=false">닫기</button>

 

 

잘 닫힙니다.~ ^^a