[Vue] 데이터바인딩

null·2023년 3월 27일
0

Vue

목록 보기
2/7

{{데이터바인딩}}

<template>
  <div>
 	** <p>{{age}}</p>** // {{데이터이름}}
  </div>
</template>

<script>
export default {
  name: 'App',
  **data() { // object형태로 저장
    return{
     ** age : 30** // 이곳에 데이터를 둔다
    }**
  },
}
</script>
  • 데이터는 object자료로 저장 : {자료이름 : 자료내용}

  • script에있는 data를 HTML에 데이터 넣기 : {{데이터이름}}

{{데이터바인딩}}을 하는 이유

  • HTML에 하드코딩해놓으면 나중에 변경 어려움

  • Vue의 실시간 자동 렌더링 쓰려면 해야한다
    : data를 변경하면 data와 관련된 HTML에도 실시간으로 반영


data() {
   return {
	스타일 : 'color : blue'
   }
 }
 
 --------------
 <h4 class="red" **:style="스타일"**>data 스타일적용</h4>
  • HTML속성도 데이터바인딩 가능 : :(콜론)속성="데이터이름"

0개의 댓글