v-bind, data()

<template>

  <div id="wrap">

   

<h1 v-bind:style="styleColor">{{ count }}</h1>

  </div>

</template>

<script>

  export default{

 

    data() {

      return {

        count : 0,

        styleColor: {

          fontSize : '50px',

          color : 'red'

        }

      }

    },

  }

</script>

<style>

</style>

v-bind는 html의 속성인 id,class, style등에 값을 연결할 수 있다.

 

또 그것들 뿐 아니라, script 파트에서 props:{} 안에 정의해 둔 속성(필드)들에게 또한 값을 할당할 수 있다.

또,

<h1 :style="styleColor">{{ count }}</h1>

이렇게 줄일 수 있다. 그냥 :속성=값

하면 된다.

 

아래 data()는, 저기다가 변수를 정의하는 거라고 생각하면 된다.

 

data(){

    return {

        키:값

    }

}

형태로 해 두면 된다.

보면 style도 저 v-bind를 통해서 값으로 줬는데, 

 

객체로 정의해서 줬다.

자바스크립트도 저런 식으로 스타일을 지정해 줄 때는 카멜 표기법을 썼는데, 이것도 그러하니 알아서 읽어 주는 듯 하다.