[vue] 모달창, 세부모달창 만들기

📝 동적인 UI 만드는 법

1. UI의 현재 상태를 데이터로 저장해둠 ("그 UI가 지금 어떻게 보여야하니?"

   data(){
   	return{
       모달창열렸니 : false,
       //이렇게 현재상태를 저장
       신고수: [0, 0, 0],
       메뉴들 : ['home','shop','about'],}
   }
   

2. 데이터에 따라 ui가 어떻게 보일지 작성

   v-if="조건식"
   조건식이 참일 때만 HTML 보여줌

 <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>상세페이지임</h4>
      <p>상세페이지 내용임</p>
    </div>
  </div>

 <h4 @click="모달창열렸니=true"> {{products[0]}}</h4>

그리고 import/ export 관련하여 data값이 너무나 많을 경우 따로 assets 폴더 내에 js파일을 생성하여 data를 따로 작성할 수 있다.

1. export default[{데이터들 쭉 나열}]
   예시는 아래와 같다.

export default[{
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000
    },
    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }]

2. 그리고 app.vue에서 import 할 것

import data from './assets/oneroom.js';

data() {
    return {
      원룸들: data,
    }
  },

import하고 data에서 변수지정하여 가져온 아이를 데이터에 넣어줘야한다.

3. 그리고 실제 코드에서 사용

<div v-for="(방들, i) in 원룸들" :key="i">
    <img **:src="원룸들[i].image"**>
    <p>**{{원룸들[i].title}}**</p>
    <p>{{원룸들[i].price}}</p>
    <p>{{원룸들[i].content}}</p>

  </div>
  
  또는
  
  <h4> {{원룸들[0].title}}</h4>
  <p> {{원룸들[0].price}}원 </p>

위와 같이 데이터값이 방대할 경우는 저렇게 쓸 수 있다.
(리액트로 치면 useState와 같은 상태관리)

📍 중요중요

HTML 태그 안의 속성 데이터바인딩은 : 로 작성하고
HTML 태그 안의 내용 데이터바인딩은 {{ }} 로 작성한다.

위에 코드를 보았을 때 img : src = "데이터" 는 속성 바인딩이고,
p태그 안의 내용으로 적히는 데이터값은 {{ 데이터 }} 로 적어야한다.

📝 쉬운 예시

> data.js

var apple = 10;
var apple2 = 100;

export { apple , apple2 }

변수를 두개 넣어서 export 하는 것도 가능하다.
그리고 vue 파일에서 import할때 하면된다.

import { apple , apple2 } from './assets/data.js'

---

📝 세부 모달창 만들기

<div class="black-bg" v-if="모달창열렸니 == true" >
    <div class="white-bg">
      <h4>{{ 원룸들[사용자가누른상품번호].title }}</h4>
      <p>상세페이지  내용임</p>
      <button @click= "모달창열렸니 =! true"> 닫기 </button>
    </div>
  </div>

순서
1. UI 상태 저장해둘 데이터 만들기

script 내에 

export default {
  name: 'App',
  data(){
    return {
      누른거 : 0,// 사용자가 누른 번호이고, 초기값을 0으로 설정
      원룸들 : data,
      모달창열렸니: false,
      products:['역삼동원룸','천호동원룸','마포구원룸']
    }

2. 데이터가 변하면 데이터에 따라서 HTML 어떻게 보일지?

//템플릿

  <div class="black-bg" v-if="모달창열렸니 == true" >
    <div class="white-bg">
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>상세페이지  내용임</p>
      <button @click= "모달창열렸니 =!true"> 닫기 </button>
    </div>
  </div>

3. UI 조작하는 버튼 만들기 (@Click 등으로)

//템플릿

  <div v-for="(room, i) in 원룸들" :key="i">
    <img :src="room.image" class="room-img">
    <h4 @click="모달창열렸니 = true; 누른거 = i"> 집이름: {{room.title}}</h4>
    <p> 가격 : {{room.price}}원 </p>
    <p> 특징 : {{room.content}}</p>
  </div>

제목을 눌렀을 때, 모달창도 열리고 누른거를 i라고 변수를 지정해뒀다. 그러면 i번째제목의 타이틀이 세부모달창에 뜨는 것.