1. [ 데이터바인딩이란 ? ]
JS 데이터를 HTML에 꽂아 넣는 문법이라고 생각하면 편하다. → 표기법 : {{데이터 이름}}
2. [ 데이터 바인딩 문법 ]
데이터 바인딩 문법은 아래에 예시를 확인하자. JS데이터를 가지고와야하므로 script에서 작성한다.
•
코드작성 위치는 script부분이며 data() { return {}} 이라고 추가해줘야한다.
•
필요한 data는 return {} 안에다가 Object형식으로 입력해주면된다 { 자료이름 : 자료내용 }
2-1 [ Sample Code ]
<!-- template안에는 HTML 코드 짜면된다.-->
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- {{데이터 바인딩}} -js 데이터를 HTML에 꽂아 넣는 문법-->
<div>
원룸샵
<!-- HTML 속성도 데이터 바인딩 가능 표현할 때는 :속성="데이터이름"-->
<h4 class='red' :style="스타일">{{products[0]}}</h4>
<!-- 밑에 있는 데이터 HTML 데이터HTML에 꽂아넣고싶으면 {{데이터 이름}} -->
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>{{products[1]}}</h4>
<p>{{ price2 }} 만원</p>
</div>
<div>
<h4>{{products[2]}}</h4>
<p>{{ price3 }} 만원</p>
</div>
</template>
<!-- script안에는 JS 코드 짜면된다.-->
<script>
//문법만 달랑 배우면 혼자서 코드를 못짬, 이 문법 언제쓰는지 왜쓰는지 용도를 알아야됨
/** App Vue가 처음에 다 끌고와서 뿌려주는거임(대빵)*/
export default {
name: 'App',
//vue는 data를 여기다가 저장한다 data보관통
//{{데이터 바인딩}} 하는이유
// 1. HTML에 하드코딩 해놓으면 나중에 변경 어려움 (가변성있을때는 data바인딩하는게좋다)
// 2. Vue의 실시간 자동 렌더링 쓸때 -> Vue는 신기해서 Data를 변경하면 data와 관련된 HTML에도 실시간으로 반영됨
// {{}} 이거 써야 실시간 자동렌더링 됨
data() {
return {
//여기에 데이터보관하자
//데이터는 object 자료로 저장해주셈 {자료이름 : 자료내용}
//충격 HTML 속성도 데이터 바인딩 가능
price1 : 60,
price2 : 70,
price3 : 80,
스타일 : 'color : blue',
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
components: {
}
}
</script>
<!-- style안에는 CSS 코드 짜면된다.-->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
JavaScript
복사
2. [ 데이터바인딩은 왜 쓰며 어쩔때 쓰일까? ]
문법만 배우면 혼자서 코드를 짜기는 어렵다, 그래서 항상 문법이 언제쓰이고 왜 쓰는지 용도를 알아야하는게 중요하다.
3-1 [ Vue에서 데이터바인딩 하는 이유 ]
1.
HTML 하드코딩 해놓으면 나중에 변경이 어려우며 data중에 가변성이 있는 data들만 데이터 바인당하는게 좋다.
2.
Vue의 실시간 자동 렌더링을 쓸 때 활용한다
a.
자동렌더링이란 ? → Vue는 신기해서 Data를 변경하면 Data와 관련된 HTML에도 실시간으로 반영됨 → 이걸 반영하기위해서 {{ }} 기호를 써줘야한다
3.
Vue는 HTML 속성도 데이터 바인딩이 가능하다.
a.
어떻게할까 ? → <!-- HTML 속성도 데이터 바인딩 가능 표현할 때는 :속성="데이터이름"-->
<h4 class='red' :style="스타일">
