[vue.js] 데이터 바인딩 (JS데이터를 HTML에 넣기)

 

 

[vue의 데이터 바인딩 문법]

 

1. 데이터 보관 : script 태그안에 data(){return { 데이터이름 : 데이터 }}

(vue에서 데이터 보관하는 곳은 object형식으로 되어 있음! 변수를 보관하는 곳이라고 생각하면 된다)

 

2. {{데이터}} 이런 콧수염 문법으로 HTML 중간중간에 데이터 넣기

<template>
	<div>{{ name1 }}</div>
	<div>{{ name2 }}</div>
</template>

<script>
export default {
	name: 'App',
    data(){
    	return{
        	name1 : "김철수",
        	name2 : "신짱구"
        }
    },
    components: {
    }
}
</script>

💡데이터 바인딩 : 자바스크립트 데이터(변수나 오브젝트같은거)를 HTML에 넣는것

 

HTML 속성도 데이터 바인딩 가능하다

예를들어 style 속성이라면 원하는 데이터를 보관한후 태그안에 :style="변수" 이렇게 넣어주면 된다

<template>
	<div :style="스타일">{{ name1 }}</div>
</template>

<script>
export default {
	name: 'App',
    data(){
    	return{
        	name1 : "김철수",
        	스타일 : 'color:red'
        }
    },
    components: {
    }
}
</script>