2. Vue js - HTML 태그 안에 데이터 바인딩

ㅁApp.vue 프로젝트 생성시 기본구

---

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</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>

---

ㅁ 데이터 바인딩

1. 기본구

export default {

  name: 'App',  

  components: {

    HelloWorld

  }

}

2. 데이터 저장소 만들기

name: 'App',  

  data() {    // 데이터 저장소 추가

    return {   // 리터 안에   

      숫자 : 1,   // 오브젝트 형식 { key : value } 데이터 만듬

      한글 : '가나다라마바사', // 문자열 ' ' 따옴표 안에 문자열

      컬러 : 'color : blue',   // HTML 태그 안에 데이터 바인딩 <div :style="컬러">

      배열 : ['배열1번은0번', '배열2번은1번', '배열3번은2번'],      // 배열 데이터 바인딩

    }

  },

  components: {

    HelloWorld

  }

}

3. 데이터 저장소에 저장한 데이터 화면에 사용하기

<template>

<h1>

  <div>{{숫자}}</div>

  <div>{{한글}}</div>

 <div :style="컬러">HTML 속성 데이터 바인딩 테스트</div> <!-- :콜론 데이터  -->

 <div>{{배열[0]}}&nbsp;배열 데이터 바인딩 첫번째</div>

 <div>{{배열[1]}}&nbsp;배열 데이터 바인딩 두번째</div>

 <div>{{배열[2]}}&nbsp;배열 데이터 바인딩 세번째</div>

</template>

---

ㅁ 데이터 바인딩 사용이유?(Why)

 - 실시간 가변적인 데이터는 실제로 데이터 저장소에 넣는게 올바른 코딩 방식

 - Vue가 제공하는 실시간 자동 렌더링 기능을 사용하기 위해서 데이터 바인딩을 사용함

 - 실시간 자동 렌더링에 저장된 데이터의 값을 해당 데이터와 관련된 HTML에도 실시간으로 반영됨

 - Web-App에 사용에 적합함

 - ex) 현재 페이지에 가격 항목 5개가 있는 상태에서 할인 버튼 클릭 했을때 5개 항목 모두 할된 할인된 가격으로 표시할때 유용함

 - 즉 화면에 가격5개가 있는 현재 페이지가 새로고침 안되고 가격 5개 숫자만 부드럽게 가격변경됨

ㅁ 데이터 바인딩 사용하는 곳

 - 자주 변경되거나 중요한거 데이터는 data() 저장소에 넣고 데이터 바인딩 하기

---

ㅁ VSCode ctlr + shift + ` (cmd 모드로 변경)

 - VSCode는 기본적으로 파워쉘 되어있음 명령프롬프트(cmd) 변경

 - setting > Features > Terminal > Integrated › Automation Shell: Windows > Edit in settings.json 클릭

ㅁ 현재 소스 서버 실행

npm run serve

server nono server

ㅁ 접속주소

http://localhost:8080/

---