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