[Vue.js] 데이터 바인딩 (태그 속성 값 바인딩 포함)

[Vue.js] 데이터 바인딩 data bind 

 

⭐️  데이터 바인딩 ?

데이터 값의 변경시 페이지 전환 없이

변경된 데이터가 바로 랜더링이 된다

(Single Page Application)

 

⭐️  샘플 예제

React 의 State와 같이 Vue에서는 data(){return} 내의 값을 통해 

데이터를 바인딩 할수 있다

 

또한 Html 태그 내 속성의 값 또한 바인딩이 가능하다

태그내 속성을 바인딩 하기 위해서는 속성명 앞에 : 를 붙여준다

<template>
<!--태그 속성값 또한 데이터 바인딩이 가능하다-->
<!--속성 값 앞에 : 추가 -->
  <h1 :style="color">{{title}}</h1>
<!--하단에서 선언해준 데이터는 {{변수명}} 을 통해 사용-->
  <p>{{desc}}</p>
</template>

<script>

export default {
  name: 'App',
  //바뀔 만한 데이터는 하단의 return 되는 객체 내 
  //키:값 형식으로 선언해주면 된다
  data(){
    return {
      //키 : 값
      title : '메모를 메모하다',
      desc : '뷰 데이터 바인딩',
      color : 'color:blue;'
    }
  }
}
</script>

<!--아래 style태그 내 CSS 코드 추가-->
<style>
</style>

 

⭐️  출력 결과