데이터 바인딩

npm run serve 시 나오는 화면

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>

{{데이터 바인딩}}

이렇게 데이터를 바인딩해서 사용할 수 있다.

 

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

 

문법을 언제, 왜 쓰는지 알아야 한다
데이터 바인딩의 이유
html에 하드코딩을 하면 나중에 변경이 어렵다.
vue의 실시간 자동 렌더링을 이용하기 위해서
뷰는 js의 데이터에 변경이 일어나면 변경 사항이 html에 자동으로 반영된다.
데이터를 변경하면 데이터와 관련된 html에도 실시간으로 반영된다.
{{}}
웹앱을 만들 수 있다.
자주 변할 것 같은 데이터들은 js에 데이터로 보관하고 html에 {{}}를 꽂아넣어라

Q 쇼핑몰 이름도 데이터 바인딩 할까?
바뀔 가능성이 거의 없는 데이터는 안해도 된다.
html 속성도 데이터바인딩 가능
:속성="데이터이름"
class, style 속성에도 데이터 바인딩을 할 수 있다.
:class, :style과 같이 콜론만 앞에 붙여주면 된다.

 

export default {
  name: 'App',
  data() {
    return {
      name : 'TEST'
    }
  },
  components: {
  }
}

 

 

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

 

*참조

https://velog.io/@gimminjae/2%EA%B0%95-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9