[CodingApple] Vue 로 만드는 웹앱 3

Coding Apple 강의 4일차.

심심해서 만들어보는 Vue JS 강의 수강 1

 

Vue로 간단한 웹앱 만들어보기.

  1. 준비물

     > nodejs 설치

     > vs code 설치

     > vetur 설치 (vscode 확장 프로그램, vue 2 버전)

     > voloar 설치 (vscode 확장 프로그램, vue 3 버전)

     > HTML Css Surpport (vscode 확장 프로그램)

     > vue 3 snippets (vscode 확장 프로그램)

     > vue.js 설치

 

   2. App.vue (데이터 export, import를 통해 상품 리스트 구현)

<template>
  <!-- 
    * 동적인 UI 만드는법
    1. UI의 현재 상테를 데이터로 저장해둠
    2. 데이터에 따라 UI가 어떻게 보일지 작성
    v-if: 해당 HTML 을 보여줄지말지 결정
   -->
  <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>상세페이지임</h4>
      <p>상세페이지 내용임</p>
      <button @click="모달창열렸니 = false">닫기</button>
    </div>
  </div>
  <div class="menu">
    <!-- Vue의 HTML 반복문 => <태그 v-for="변수명 in (몇회 혹은 Object)" :key="유니크값(보통 인덱스 사용)">-->
    <a v-for="(변수명, i) in 메뉴들" :key="i">{{ 변수명 }}</a>
  </div>
  <div v-for="(원룸, i) in 원룸들" :key="i">
    <img :src="원룸.image" class="room-img" />
    <h4>{{ 원룸.title }}</h4>
    <p>{{ 원룸.content }}</p>
    <p>{{ 원룸.price }}</p>
  </div>
</template>

<script>
//oneroom.js에서 export한 데이터 가져오기 export 하는 방법에 따라 {}로 감싸거나 단일 변수를 사용하면 된다
import 원룸데이터 from "./assets/oneroom.js"; //export default 로 했을 때 가져오는 방법
// import { a, b, ... } from "./assets/oneroom.js";  //export {a, b, ... }로 했을 때 가져오는 방법

export default {
  name: "App",
  data() {
    //데이터 보관함
    return {
      원룸들: 원룸데이터,
      모달창열렸니: false,
      신고수: [0, 0, 0],
      //변수 선언 영역 (Object 자료형으로 저장해야함)
      메뉴들: ["Home", "Shop", "About"],
      스타일: "color: blue",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      prices: ["50만원", "70만원", "80만원"],
      이미지경로: ["assets/room0.jpg", "assets/room1.jpg", "assets/room2.jpg"],
      이미지파일명: ["room0.jpg", "room1.jpg", "room2.jpg"],
    };
  },
  //Vue 에서 함수를 만들고 싶으면 methods:{} 안에 선언하면 됨
  methods: {
    increase(i) {
      this.신고수[i] += 1;
    },
  },
  components: {},
};
</script>

<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%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.room-img {
  width: 100%;
  margin-top: 40px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}
</style>

 

    3. oneroom.js (외부 데이터)

const data = [
  {
    id: 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000,
  },
  {
    id: 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000,
  },
  {
    id: 2,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000,
  },
  {
    id: 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000,
  },
  {
    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,
  },
];

// var apple = 10;

export default data; //data 변수 export
// export { data, apple }; //2개 이상의 변수 혹은 함수 export