[VUE] 데이터 바인딩 & v-for 반복문 & 이벤트 핸들러

React 원툴이였지만 러닝커브가 낮고 쉽다는 얘기에 vue 공부를 시작해 봤는데 

뜨든😹 너무 쉽자나,, 간단해 ,, 이게 뭐람 ,, 왜 이제 안 거지 ,, 

 

물론 리액트만큼 깊게 파고든건 아니지만 공부하는 내내 재미있었다 ㅎ_ㅎ!

 

코딩애플님 강의 중 무료강의 부분만 보고 조금 공부해 봤다.

 

 

 

🔆 데이터 바인딩 { {  } }

:  1. script 태그 내에 data( ){ return { } } 데이터저장소를 만들어 두고 object자료 형식으로 작성 후 { { 데이터이름 } }
   2. HTML태그 속성도 데이터바인딩가능 -> 속성 앞에 : 붙여주면 됨 ex) :속성="데이터이름"

 

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false,
      menuName: ["HOME", "SHOP", "CONTACT"],
      product: ["역삼동 원룸","마포구 원룸","천호동 원룸"], 📌
    };
  },
  methods: {},
  components: {},
};
</script>

<template>
  <div class="product">
    <h3>{{ products[0] }}</h3> 📌
    <h4>70만원</h4>
  </div>
  
  <div class="product">
    <h3>{{ products[1] }}</h3>
    <h4>50만원</h4>
  </div>
  
    <div class="product">
    <h3>{{ products[2] }}</h3>
    <h4>100만원</h4>
  </div>
  
</template>

 

🔆 v-for 반복문

: 1. <태그 v-for=" name in 반복 횟수" :key="name">

  2. <태그 v-for=" name in array/object " :key="name">

 

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false,
      menuName: ["HOME", "SHOP", "CONTACT"], 📌
    };
  },
  methods: {},
  components: {},
};
</script>

<template>

  <div class="menu">
    <a v-for="x in menuName" :key="x">{{ x }}</a> 📌
  </div>
  
</template>

 

🔆 이벤트 핸들러

: v-on:click="" / @click=""

 

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false, 📌
      menuName: ["HOME", "SHOP", "CONTACT"],
      products: posts,
    };
  },
  methods: {},
  components: {},
};
</script>

<template>
  <div class="black-bg" v-if="modal === true">
    <div class="white-bg">
      <h3>상세페이지</h3>
      <h4>상세페이지 내용 ! ! !</h4>
      <button @click="modal = false">닫기</button> 📌
    </div>
  </div>

  <div v-for="(a, i) in posts" :key="i">
    <img :src="posts[i].image" class="image-size" @click="modal = true" /> 📌
    <h3>{{ a.title }}</h3>
    <h4>{{ a.content }}</h4>
    <h4>{{ a.price }}원</h4>
  </div>
  
</template>

 

🔆 Vue에서 동적 UI 만들 때 

: 1. UI 디자인 만들어 두기 (ex. Modal 등등 )

  2. UI의 현재 상태를 데이터로 만들기 (ex. 모달이 현재 열려있는지 아닌지 등등)

  3. 데이터에 따라 UI가 어떻게 보일지 작성 (ex. v-if="조건문" 등등)

 

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false, 📌
    };
  },
  methods: {},
  components: {},
};
</script>

<template>
  <div class="black-bg" v-if="modal === true"> 📌
    <div class="white-bg">
      <h3>상세페이지</h3>
      <h4>상세페이지 내용 ! ! !</h4>
      <button @click="modal = false">닫기</button>
    </div>
  </div>
</template>

 

🔆 Vue에서 함수 만들때

: 1. <script></script> 내에 methods:{ 함수명(){} }

  2. 함수 안에서 데이터 사용할 때 this.데이터명 

 

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false, 
    };
  },
  methods: {}, 📌
  components: {},
};
</script>

 

🔆 이렇게 하면 GIF 같은 직방.. 비스무리한 거 만들 수 있다!

 

<script setup>
import posts from "./datas/post";
</script>

<template>
  <div class="black-bg" v-if="modal === true">
    <div class="white-bg">
      <h3>상세페이지</h3>
      <h4>상세페이지 내용 ! ! !</h4>
      <button @click="modal = false">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="x in menuName" :key="x">{{ x }}</a>
  </div>

  <div v-for="(a, i) in posts" :key="i">
    <img :src="posts[i].image" class="image-size" @click="modal = true" />
    <h3>{{ a.title }}</h3>
    <h4>{{ a.content }}</h4>
    <h4>{{ a.price }}원</h4>
  </div>
  
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      modal: false,
      menuName: ["HOME", "SHOP", "CONTACT"],
      products: posts,
    };
  },
  methods: {},
  components: {},
};
</script>

<style scoped>
body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.black-bg {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

.image-size {
  width: 100%;
  height: 30%;
}
.product {
  margin: 20px;
}

.menu {
  background-color: lightgray;
  padding: 10px;
  margin-bottom: 30px;
  border-radius: 5px;
  text-align: center;
}

.menu a {
  font-weight: bold;
  color: black;
  padding: 20px;
}

button {
  margin-right: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
}
</style>

// post.js

export default [
  {
    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,
  },
];

 

✅ 데이터를 받아와서 적용할 때에도 같은 방식으로 하면 된다.

<script></script> 내에 data( ) { } 안에 받아온 데이터를 저장해 두고, 

map( ) 실행하듯이 해주면 된다 ! !

 

 

❤️ 도움주신분 :

https://www.youtube.com/playlist?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-