Vue 기초 공부

1. 데이터바인딩

뷰에서 데이터를 가지고 다니기 위해서는 script 부분에 데이터 보관함을 먼저 만들어야 한다.

데이터는 오브젝트 형식으로 저장해야 한다. {자료이름 : 자료내용}

<script>
export default {
  name: 'App',
  data() { //data라는 데이터 보관함에 price1이라는 데이터를 만듬
    return {
      price1 : 60,
    }
  },
  components: {

  }
}
</script>

<div>
    <h4>XX 원룸</h4>
    <p>{{ price1 }} 만원</p> //중괄호 두개 안에다가 데이터의 변수명을 넣어줌
</div>

데이터바인딩을 하는 이유는 리액트와 같다. 웹앱 즉 실시간 데이터 반영을 하기위해.

HTML이 변경되면 새로고침을 해야 값이 변경되는데 데이터바인딩을통한 변경은 데이터가 바뀌면 재랜더링 즉

새로고침없이 값이 변하게 된다.

 

만약 HTML의 속성의 값을 데이터바인딩을 하고싶다면?

data() {
    return {
      price1 : 60,
      price2 : 70,
      스타일 : 'color : blue',
    }
    
<h4 class="red" :style="스타일">XX 원룸</h4>

속성값 앞에 :를 붙여주면 된다

 

2. v-for 반복문 

<a v-for="작명 in 3" :key="작명">Home</a>

모든 HTML 태그에 사용할 수 있고 오른쪽에 꼭 key를 작성해줘야한다.

data() {
    return {
      메뉴들 : ['Home', 'Shop', 'About'],
      products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸']
    }
  },
  
  <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>

이렇게 데이터를 Array로 만들어준 후 v-for문에 in Array를 넣어주면 Array의 값을 순서대로 내보내준다.

(개인적으로 파이썬의 for문과 비슷하게 생겼다고 생각한다.)

:key= 는 반복문으로 생성한 요소를 구분하기 위한 속성

<a v-for="(a,i) in 메뉴들" :key="i">{{ a }}</a>

또한 변수는 두개까지 동시에 만들 수 있다. 여기서 a는 배열의 값들을 하나씩 가져오고

i는 0, 1, 2 ... 처럼 1씩증가하는 값이 배정된다. 그리고 key에는 i값을 배정하는게 일반적이다. 

 

3. 이벤트 핸들러

버튼 눌렀을 때 자바스크립트 실행하려면 v-on:click="" 혹은 @click=""

<button @click="신고수++">허위 매물 신고</button> <span>신고수 : {{ 신고수 }}</span>

신고수 : 0,

data 안에 신고수라는 변수를 만들어주고 click을 이용해 새로고침하지 않아도 증가하게 가능하다. 

 

또한 함수로 추출이 가능하다.

 name: 'App',
  data() {
    return {
      신고수 : 0,
      메뉴들 : ['Home', 'Shop', 'About'],
      products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸']
    }
  },
  methods : {
    increase() {
      this.신고수 += 1;
    },
  },

data() 변수를 모아두는 공간이 끝나고 다음에 methods:{} 라는것을 만들고 안에 함수를 만들어주면 된다. 그 다 음

이 함수를

<button @click="increase">허위 매물 신고</button> <span>신고수 : {{ 신고수 }}</span>

다음과 같이 사용하면 된다.

 

4. UI 만들어보기

동적인 UI만드는법

0. HTML CSS로 디자인 해두기(기본)

1. UI의 현재 상태를 데이터로 저장해둠

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

 

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

0. 기본 디자인해두기. 이 모달창에는 if문을 달아 모달창열렸니가 true경우 보여준다.

모달창열렸니 : false,

1. 현재 상태를 데이터로 저장해둔다, false를 닫힌 상태로 가정

<div>
    <img src="./assets/room0.jpg" class="room-img">
    <h4 @click="모달창열렸니 = true">{{ products[0] }} 원룸</h4>
    <p>60 만원</p>
    <button @click="신고수[0]++">허위 매물 신고</button> <span>신고수 : {{ 신고수[0] }}</span>
  </div>

2. 글에 제목을 누르면 모달창열렸니가 true로 바뀌면서 모달창이 나오게 된다.