2. 데이터바인딩

2022. 4. 1. 22:54· Front-end/Vue

https://youtu.be/0BbF7UxKKvg

 

 

데이터바인딩은 데이터를 자바 오브젝트 형식으로 저장해두었다가 HTML template에 갖다 쓰는 것이다.

 

오브젝트 안의 변수에 할당된 값이 변하면 자동으로 렌더링을 다시 해준다.

 

(마치 react에서 state 변경을 감지해서 렌더링해주는 것이랑 같은 느낌이다.)

 

*요지는 자주 변하는 값들을 데이터바인딩 해두어야 한다는 것이다.

 

HTML 태그 사이에 값을 넣는 경우에는 {{ }} 형식으로 넣어주면 된다.

 

태그의 속성 또한 데이터바인딩이 가능한데 :속성="데이터이름" 형식으로 넣어주면 된다.

 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    원룸샵
    <h4 :style="스타일">XX 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      price1: 60,
      price2: 80,
      스타일: "color : blue",
    };
  },
  components: {},
};
</script>

이런식으로 작성하면 아래쪽의 스타일 때문에 위의 h4에 파란색이 적용되고 price1에 60이 들어가게 된다.

아래쪽의 데이터안의 값이 바뀌면 자동으로 렌더링해준다.

 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>{{ products[0] }}</h4>
    <p>{{ price[0] }} 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price[1] }} 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price[2] }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      price: [50, 100, 150],
    };
  },
  components: {},
};
</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;
}
</style>

이런식으로 배열에 값을 여러개 넣고 꺼내 쓸 수도 있다.

 

이런 화면이 나온다.

반복문을 쓰면 더 간단히 표현이 가능하겠다.

저작자표시 (새창열림)

'Front-end > Vue' 카테고리의 다른 글

6. 실제 데이터 import / export 하기  (0) 2022.04.02
5. 모달창 만들기  (0) 2022.04.02
4. 이벤트 핸들러와 함수 만들기  (0) 2022.04.02
3. 반복문  (0) 2022.04.02
1. Vue 설치와 세팅  (0) 2022.04.01
'Front-end/Vue' 카테고리의 다른 글
  • 5. 모달창 만들기
  • 4. 이벤트 핸들러와 함수 만들기
  • 3. 반복문
  • 1. Vue 설치와 세팅
Purewater
Purewater
프로그램 공부 일기장Purewater 님의 블로그입니다.
Purewater
프로그램 공부 일기장
Purewater
전체
오늘
어제
  • 분류 전체보기 (237)
    • Front-end (8)
      • Vue (8)
    • 포트폴리오 (3)
      • JSP SHOP (1)
      • Travelanner (1)
      • OAuth2 Blog (1)
    • 취업 준비 (70)
      • Spring boot (43)
      • JPA (1)
      • Spring security (14)
      • React (11)
      • 면접 기록 (1)
    • 국기훈련과정 (57)
      • JAVA 복습노트 (12)
      • Oracle SQL (9)
      • Web (15)
      • JSP (6)
      • Spring (10)
      • 프로젝트 (4)
      • Python (1)
    • 알고리즘 문제풀이 (17)
      • Python3 (13)
      • Kotlin (4)
    • 이것저것 지식 (9)
    • 클라우드 서버 (7)
      • Linux (7)
    • Backend (20)
      • node.js (9)
      • JAVA (6)
      • spring boot (5)
    • DB (1)
      • SQL (1)
    • 잡담 (1)
    • 강의 수강 (1)
    • CS 지식 (41)
      • 디자인패턴 (6)
      • 네트워크 (22)
      • 데이터베이스 (4)

블로그 메뉴

  • 대문
  • 태그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • Kotlin
  • Oracle
  • 노드
  • GUI
  • node.js
  • 디자인패턴
  • db
  • 자바스크립트
  • spring
  • git
  • gitignore
  • SQL
  • PostgreSQL
  • node
  • Postman
  • js
  • JPA
  • redis
  • 오라클
  • Java

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
Purewater
2. 데이터바인딩
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.