[Vue.js] 데이터 바인딩 / v-for / v-if / 이벤트 핸들러 / 모달창 / CSS 폰트 변경

데이터 바인딩

 

실시간 자동 렌더링 > 웹앱 구현 가능

{{데이터바인딩}}

 

😲HTML 속성도 데이터바인딩 가능

:속성 = "데이터이름"

    <p :style="스타일">{{price1}} 만원</p>

 

 

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>house 원룸</h4>
    <p :style="스타일">{{price1}} 만원</p>
  </div>
  <div>
    <h4>houseName2 원룸</h4>
    <p>{{price2}} 만원</p>
  </div>
</template>

<script>
    //document.getElementById().innerHTML = ?? //바닐라자바스크립트
    export default {
      name: 'App',
      data(){
        return {
          price1 : 60,
          price2 : 70,
          스타일 : 'color : red',
        }
      },
      components: {
      }
    }
</script>

---

v-for 반복문 사용

 

<태그 v-for="작명 in 몇 회" :key="작명">

* :key="" - 반복문 돌린 요소를 컴퓨터가 구분하기 위해서 필수적으로 써야함

 

* 변수 작명 2개까지 가능

- menu는 array내의 데이터

- i는 1씩 증가하는 정수(key 값으로 씀)

  <div v-for="(product, i) in products" :key="i">
    <h4> {{products[i]}} 원룸 </h4>
    <p>48 만원</p>
  </div>
  
<script>
    export default {
      name: 'App',
      data(){
        return {
          products : ['강서구', '마곡동', '송정역'],
        }
      },
      components: {
      }
    }
</script>

---

이벤트 핸들러 사용하기

 

버튼 클릭 시 신고 수 증가

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

 

😲😲😲놀랍도록 간단...

- cnt++ 대신 cnt += 1도 가능

- 다양한 이벤트 존재 : @mouseover, @drag, @input 등

 

 

script 단에서 function 활용 : methods : { }

- 괄호없이 함수명만 사용

<button v-on:click="increase">허위매물신고</button> <span>신고 수 : {{cnt}}</span>

- data() 뒤에 생성

- 함수 안에서 데이터 쓸 때 this.데이터명 

<script>
export default {
  name: 'App',
  data(){
    return {
      메뉴들 : ['Home', 'Shop', 'About'],
      products : ['강서구', '마곡동', '송정역'],
      cnt : 0,
    }
  },
  methods : {
    increase() {
      this.cnt++;
    },
  },
  components: {
  }
}
</script>

---

이미지 가져오기

 

- src에 있는거 가져올 때 경로는 ./ 부터 (웹팩 문법)

    <img src="./assets/room0.jpg">

 

모달창 만들기

 

*vue-router 설치하면 다른 페이지도 만드는 것 가능

<button v-on:click="modal=true">열려라</button>
<button v-on:click="modal=false">닫혀라</button>

<div v-if="modal === true" class="black-bg">
  <div class="white-bg">
    <h4>상세 페이지</h4>
    <p>상세 페이지 내용</p>
    <button v-on:click="modal = false">닫혀라</button>
  </div>
</div>

state

  data(){
    return {
      modal : false,
    }
  },

😲간단..!

 

---

Vue.js에 Font 바꾸기

 

기본폰트 못참는다..!

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
}

 

---

export/import로  js 파일에서 만든 변수나 자료를 다른 js 파일에서 사용하기

 

post.js

var apple = 10;
export default apple

- export default는 파일 맨마지막 한번만 사용 가능

 

 

App.vue

import apple from './post.js'

- apple 대신 다른 단어 사용 가능

- .js 생략 가능

 

---

post.js

var apple = 10;
var apple2 = 100;

export {apple, apple2}

- 변수 2개나 함수도 사용 가능 

 

App.vue

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

 

배열의 Object 값 반복문으로 불러오기

  <div v-for="(room, i) in rooms" :key="i">
    <img :src="room.image" class="room-img" v-on:click="modal=true">
    <h4>{{room.title}}</h4>
    <p>{{room.price}}원</p>
  </div>

---

기이이이이초 강의기라 그렇긴 하지만, 너무 쉬워서 충격 그 잡채.......

Vue.js 진짜 좋은 프레임워크구나..,,

강사님이 배열을 바인딩해보라고 했는데 Vue.js 자체를 쓴지 10분도 안된 상태였는데 구글링없이 바로 쉽게 구현했다..!

 

다음엔 스프링에 vue.js 연결하고 DB붙여봐야지. 컴포넌트 사용 관련해서도 공부해볼 것. 

 

 

 

[코딩애플]  Vue 로 만드는 직방 / 인스타그램 웹앱 영상을 기반으로 정리한 내용입니다.