화면 깔끔하게 정리

• 처음 html 코드

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

• 깔끔하게 정리

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

<script>

export default {
  name: 'App',
  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>

{{데이터 바인딩}}

js에 있는 데이터를 html에 꽂아넣는 문법

순수 자바스크립트

document.getElementById().innerHTML = ??

Vue(뷰)

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  {{name}}
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      name : '아무개'
    }
  },
  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>

• 데이터 보관함
  안에 데이터 선언 및 리턴 후 template 태그 안에 {{data}} 해주면 됨.
  데이터는 object 자료형으로 저장한다.
• object 자료형
  { 자료이름 : 자료내용 }
  작명 : 값

문법을 언제, 왜 쓰는지 알아야 한다

데이터 바인딩의 이유

1. html에 하드코딩을 하면 나중에 변경이 어렵다.
2. vue의 실시간 자동 렌더링을 이용하기 위해서
3. 뷰는 js의 데이터에 변경이 일어나면 변경 사항이 html에 자동으로 반영된다.
4. 데이터를 변경하면 데이터와 관련된 html에도 실시간으로 반영된다.
   {{}}
5. 웹앱을 만들 수 있다.

자주 변할 것 같은 데이터들은 js에 데이터로 보관하고 html에 {{}}를 꽂아넣어라

Q 쇼핑몰 이름도 데이터 바인딩 할까?

• 바뀔 가능성이 거의 없는 데이터는 안해도 된다.

html 속성도 데이터바인딩 가능

• :속성="데이터이름"
• class, style 속성에도 데이터 바인딩을 할 수 있다.
• :class, :style과 같이 콜론만 앞에 붙여주면 된다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1 :style="style">파란색</h1>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      style: "color: blue;"
    }
  },
  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>