뷰 데이터 바인딩(Vue Data Binding)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 템플릿 (Vue Template)

HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 의미합니다.

 

---

데이터 바인딩 (Data Binding)

HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다.

데이터 바인딩의 주요 문법으로 '{{ }}'와 속성인 'v-bind'가 있습니다.

• {{ }}: 뷰 인스턴스의 데이터를 HTML 태그(tag)에 연결
• v-bind: 뷰 인스턴스의 데이터를 HTML 속성(attributes)에 연결

 

{{ }}

뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식으로 템플릿 문법(Template Syntax) 중 하나입니다.

 

사용 예시

<template>
    <!-- 기본적인 경우 -->
    <div id="app">
        {{ message }}
    </div>
    <!-- 뷰 데이터 변경시에도 값 변경하고 싶지 않은 경우 -->
    <div id="app" v-once>
        {{ message }}
    </div>
</template>

<script>
new Vue(
    el: '#app',
    data: {
    	message: 'Hello World'
    }
});
</script>

...

 

참고 사항

• 데이터 바인딩 외에도 자바스크립트 표현식을 사용할 수 있습니다.
  • 예시: {{ message }} ||| {{ message.reverse() }}
  • 주의 사항: 선언문과 분기 구문은 사용이 불가하며, 복잡한 연산은 지양해야 합니다.

 

---

v-bind

아이디, 클래스, 스타일 등의 HTML 속성(attributes) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다.

 

사용 예시

<template>
    <div id="app>
        <p v-bind:id="idBinding">아이디 바인딩</p>
        <p v-bind:class="classBinding">클래스 바인딩</p>
        <p v-bind:style="styleBinding">스타일 바인딩</p>
    </div>
</template>

<script>
new Vue({
    el: '#app',
    data: {
        idBinding: 10,
        classBinding: 'container',
        styleBinding: 'color: blue'
    }
});
</script>

...

 

참고 사항

• 'v-bind:'을 ':'로 간소화하여 사용할 수 있습니다. 
  • 예시: 'v-bind:id' = ':id'

 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue