Vue.js - 템플릿 문법
① 이번 포스팅에서는 Vue.js 템플릿 문법 자바스크립트 표현식을 차례대로 정리 하겠습니다.
② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다.
Vue.js 기초문법10 - 템플릿 문법 설명 및 예제
# JavaScript 표현식1 - 기본
<span>{{ number * 3 }}</span> | cs |
기본적으로 자바스크립트 일반 표현식 사용이 가능합니다. 쉽죠?
# JavaScript 표현식2 - 삼항연산자
<span v-once>{{ condition ? 'True' : 'False' }}</span> | cs |
주의 할 점은 데이터 바인딩 영역(이중중괄호) 안에서는 IF( true ) { ... } 조건문 등은 사용 불가합니다.
아울러, var = 'test' 같은 구문도 사용이 불가능하겠죠?
# JavaScript 표현식3 - 함수 사용
<span >{{ message.split('').reverse().join('') }}</span> | cs |
당연히 자바스크립트 객체.Prototype 에 정의되어 있는 함수들은 사용이 가능해요!
다만, 추후에 설명드리겠지만, 이렇게 사용하는 것은 좋은 코드는 아니예요!
# JavaScript 표현식4 - 속성 바인딩
<button v-bind:id="'list-'+ addId">{{ addId }}</button> | cs |
v-bind 태그의 속성 영역에도 표현식을 사용할 수 있습니다.
Key 값 으로 된 id, class 등 동적인 선택자 생성에도 유용하게 사용할 수 있겠죠?
전체 소스코드
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 | <!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>JavaScript 표현식1</h3> <span>{{ number * 3 }}</span> <br/> <br/> <br/> <h3>JavaScript 표현식2(삼항연산자)</h3> <span>{{ condition ? 'True' : 'False'}}</span> <br/> <br/> <br/> <h3>JavaScript 표현식3</h3> <span> {{ message.split('').reverse().join('') }}</span> <br/> <br/> <br/> <h3>JavaScript 표현식4(속성 바인딩)</h3> <span v-bind:id="'list-'+ addId"> {{ addId }}</span> </div> <script src="https://unpkg.com/vue"></script> <script> //인스턴스 생성 var app = new Vue({ el: '#app', data: { number: 15, condition: true, message: 'hello world', addId: 'first' } }) </script> </body> </html> | cs |
vue_basic7_example.zip 다음 포스팅에서는 Vue.js 디렉티브(Directive) 표현식에 대해 알아보겠습니다.
참고 : https://kr.vuejs.org/v2/guide/instance.html
참고 : https://kr.vuejs.org/v2/guide/instance.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(9) 강의 및 예제 소스 - 기초 문법 (0) | 2018.03.07 |
|---|---|
| Vue.js - 기초 문법 배우기(8) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.09 |
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}