Vue - Vue 기초

Inyeong Kang·2023년 7월 18일

Vue 공부

코딩애플

데이터바인딩

기존 자바스크립트 데이터바인딩 방식
document.getElementById().innerHTML = ??

{{}} : JS 데이터를 HTML에 꽂아 넣기 가능
1. 데이터 보관함에 넣기

object 자료 형태로 데이터 저장 -> {자료이름 : 자료내용}
2. {{ 자료이름 }} 형태로 사용하기

데이터 바인딩 이유

HTML에 하드코딩한다면 가변 적인 데이터의 변경이 어려움.
Vue가 제공하는 실시간 자동 렌더링 기능을 사용하기 위함.
데이터의 변경사항이 HTML에 실시간으로 반영되기 떄문이다. -> 웹앱 개발 가능

클래스명, 스타일 등의 HTML 속성도 데이터바인딩 가능하다.

vue 반복문

var array = [10,20,30]
array[0]으로 10의 값을 사용할 수 있다.

상단 Nav 메뉴 만들기

태그 넣기
style 생성

v-for 사용

모든 HTML 태그에 넣어서 사용 가능.
Vue의 HTML 반복문 <태그 v-for="작명 in 반복횟수" :key="작명">

data() 활용

array/object 넣기 가능하며, 자료 안의 데이터 갯수만큼 반복하고 작명한 변수는 데이터 안의 자료가 된다.
key

반복문을 쓸 때에 꼭 사용해야 하며, 반복문 돌린 요소를 컴퓨터가 구분하기 위해서 사용한다. 변수 작명이 2개까지 가능한데 왼쪽 변수에는 array 내의 데이터가 들어가고 오른쪽 변수에는 1씩 증가하는 정수가 들어간다.

추가학습)

이벤트핸들러

HTML 클릭 시 코드 실행하는 방법

v-on:click="이름" (축약: @click="이름" )

버튼을 클릭했을 때 데이터 값이 증가하고 이러한 데이터 변화는 HTML에 바로 반영된다.
mouseover
버튼 위에 마우스를 올렸을 때

이벤트 후 처리, 함수로 작성 가능

function 어쩌구(){
	console.log("hello")
}

이벤트핸들러에 함수 이름을 넣어서 함수 내의 코드 실행 가능하다.

함수 안에서 데이터를 사용할 때는 this.데이터명 형식이어야 한다.

추가학습)
배열에 숫자를 넣고 해당 숫자에 접근해서 사용하는 것과 동일하다.

모달

동적 UI 만들기

UI의 현재 상태를 데이터로 저장해둔다.
데이터에 따라 UI가 어떻게 보일지 작성한다.

v-if

v-if="조건식"의 형태로 조건식이 참일 때만 HTML을 보여줄 수 있다.

버튼 생성해서 버튼 클릭 시 변수 값을 변경하여 모달을 닫는다.

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

  <div class="menu">
    <a v-for="홈 in 메뉴들" :key="홈">{{ 홈 }}</a>
  </div>
  <div>
    <img src="./assets/room0.jpg" class="room-img">
    <h4 @click="modalOpen = true">{{ products[0] }}</h4>
    <h4>{{ price1 }} 만원</h4>
    <button @click="cnt[0]++">허위매물신고</button> <span>신고수 : {{ cnt[0] }}</span>
  </div>
  <div>
    <img src="./assets/room1.jpg" class="room-img">
    <h4 class="red" :style="스타일">{{ products[1] }}</h4>
    <h4>{{ price1 }} 만원</h4>
    <button @click="cnt[1]++">허위매물신고</button> <span>신고수 : {{ cnt[1] }}</span>
  </div>
  <div>
    <img src="./assets/room2.jpg" class="room-img">
    <h4 class="red" :style="스타일">{{ products[2] }}</h4>
    <h4>{{ price1 }} 만원</h4>
    <button @click="cnt[2]++">허위매물신고</button> <span>신고수 : {{ cnt[2] }}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    //데이터 보관함
    return{
      modalOpen : false,
      cnt : [0,0,0],
      price1 : 60,
      price2 : 70,
      스타일 : 'color : blue',
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      메뉴들 : ['HOME', "SHOP", "ABOUT"]
    }
  },
  methods : {
    increase(){
      this.cnt += 1;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

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-radis: 8px; padding: 20px;
}
.room-img{
  width: 100%;
  margin-top: 40px;
}

.menu{
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>