Vue.js - 템플릿 문법
① 이번 포스팅부터 Vue.js 기본 문법을 차례대로 정리 하겠습니다.
② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다.
Vue.js 기초문법9 - 템플릿 문법 설명 및 예제
# 문자열
<span>{{ message }}</span> | cs |
기본적으로 데이터 바인딩은 이중 중괄호를 사용합니다.
바인딩 이후에는 데이터의 message 속성이 변경될 때마다 자동으로 값이 변경(갱신)됩니다.
# v-once 디렉티브
<span v-once>{{ message_once }}</span> | cs |
v-once 디렉티브(Directive)는 일회성 바인딩을 의미합니다. (값이 변경되지 않습니다.)
단, 같은 노드의 바인딩에도 영향을 끼치므로, 주의해서 사용합시다.
디렉티브(Directive)에 대해서는 나중에 다루겠습니다.
# v-html 디렉티브
<span v-html="message_html"></span> | cs |
v-html 디렉티브(Directive)는 텍스트문자를 HTML로 해석해서 바인딩 합니다.
아래 예제 소스코드를 살펴보세요. 단, XSS 취약점 공격에 주의해야 되요!
# 속성
<button v-bind:disabled="isButtonDisabled">Button</button> | cs |
v-bind 디렉티브(Directive)는 태그의 속성을 제어 할 수 있습니다.
위에 예제에서는 Button 태그의 disabled 속성 값(True or False)을 isButtonDisabled 변수에 바인딩 했어요.
이해가 되시나요? 아래 예제를 살펴보세요!
전체 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue.js</title> </head> <body> <div id="app"> <h3>데이터 바인딩1(기본)</h3> <span>{{ message }}</span> <br/> <br/> <br/> <h3>데이터 바인딩2(v-once)</h3> <span v-once>{{ message_once }}</span> <br/> <br/> <br/> <h3>데이터 바인딩3(원시)</h3> <span>{{ message_not_html }}</span> <br/> <br/> <br/> <h3>데이터 바인딩4(HTML)</h3> <span v-html="message_html"></span> <br/> <h3>데이터 바인딩5(속성)</h3> <button v-bind:disabled="isButtonDisabled">Button</button> </div> <script src="https://unpkg.com/vue"></script> <script> // vue.js 템플릿 문법 기초 var app = new Vue({ el: '#app', data: { message: '바인딩 테스트1', message_once: '바인딩 테스트2', message_not_html: '<h5>Tag 출력(X)</h5>', message_html: '<h5 style="color:#ff0000">Tag 출력(O)</h5>', isButtonDisabled: true } }) </script> </body> </html> | cs |
vue_basic6_example.zip 다음 포스팅에서는 Vue.js Javascript 표현식에 대해 알아보겠습니다.
참고 : https://kr.vuejs.org/v2/guide/instance.html
참고 : https://kr.vuejs.org/v2/guide/instance.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(8) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.09 |
|---|---|
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}