오늘은 Vue.JS step 4. 데이터 바인딩(data binding)에 대해 포스팅하려고 합니다.
데이터 바인딩(data binding)은 HTML 태그 안에 vue 인스턴스에서 속성들을 정의한 data를 연결하여
화면에 표시하는 방법으로 {{ }} 콧수염 괄호 형태의 템플릿 엔진 Mustache 또는 v-bind 속성을 사용합니다.
아래 예제 소스코드를 통해 확인해 보도록 하겠습니다.
data-binding.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
vue 인스턴스를 생성하고 엘리먼트(el)에 html의 div id가 app인 태그를 연결합니다.
data에 key - value 형태의 데이터를 만들고 v-bind 또는 {{ }} Mustache형태로
app 태그 안에 정의한 데이터를 표현할 수 있습니다.
<!-- data-binding.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:id="dataId">{{message}}</p>
<p v-bind:class="dataClass" v-text="message2"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'bono915.tistory.com',
message2:'블로그 환영합니다.',
dataId:'one',
dataClass:'two'
}
})
</script>
</body>
</html>
Visual Studio Code에서 data-binding.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
브라우저에서 html app에 binding 된 data들이 연결되어 출력되는 것을 확인할 수 있고,
개발자 도구(F12)를 통해 Vue tab, Elements tab을 확인해보면
인스턴스에 정의된 data 내용과 id, class에 정의한 값들도 확인할 수 있습니다.
또한 데이터 바인딩 이외에도 v-once, v-text, v-on 등등 Vue.JS에서 제공하는 HTML 영역의 템플릿 문법들이 있는데,
아래 Vue.JS 공식문서를 참고하시면 좋을 것 같습니다.
https://kr.vuejs.org/v2/guide/syntax.html
템플릿 문법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
지금까지 Vue.JS step 4. 데이터 바인딩(data binding)에 대한 포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 6. watch vs computed 비교 (0) | 2022.05.11 |
|---|---|
| [Vue.JS] step 5. 메서드(methods) (0) | 2022.05.10 |
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
| [Vue.JS] step 2. 인스턴스(instance) (0) | 2022.04.30 |
| [Vue.JS] step 1. 시작하기 - 환경설정 (0) | 2022.04.28 |
