Vue - Mustache(콧수염) 템플릿

 Mustache 템플릿 문법

Mustache는 제어 구조를 갖춘 것 중 (아마도) 가장 문법이 간단하고 (아마도) 가장 많은 언어로 포팅된 템플릿 엔진이다. 

Mustache를 기반으로 이를 확장한 템플릿 엔진도 여럿 있는데 대표적으로는 

- 헬퍼 개념을 추가한 Handlebars와 

- 트위터에서 만든 Hogan.js를 들 수 있다.

그리고 Vue.js 에서도 Mustache를 사용 가능하다. 

- 변수

{{와 }} 사이에 변수 이름을 입력한다. 

문자열은 자동으로 HTML 이스케이프가 되어 출력되는데 

만약 이스케이프 되지 않은 문자열을 출력하고 싶다면 {{{와 }}}를 사용한다.
참고로 Mustache는 구분자로 사용하는 {, } 기호가 콧수염 모양이라서 붙인 이름이다.

- 데이터

{
  "name" : "Chris",
  "company" : "<b>Github</b>"
}

- 템플릿

{{name}}
{{age}}
{{company}}
{{{company}}}

- 결과 

Chris  &lt;b&gt;Github&lt;/b&gt;  <b>Github</b>

- 두 번째 줄의 {{age}}는 age가 없는 변수이므로 아무런 값도 출력되지 않는다.

- 네 번째 줄에서는 콧수염 세 개를 사용했기 때문에 HTML이 이스케이프 되지 않고 그대로 출력됩니다. 

  출력 결과를 웹 브라우저에서 보았다면 네 번째 줄은 굵은 글씨로 표시될 것입니다.

더 많은 방법을 보려면

출처 : https://taegon.kim/archives/4910

Vue에서는 Mustache 템플릿을 어떻게 사용하는가 ? 

Html

<div id="robotface">
  {{ text }} Nice to meet Vue.
</div> 

script(babel)

new Vue({
    el: '#robotface',
    data: {
        text:'Hello world'
    }
});

결과

Hello world nice to meet Vue.

이에 대해서 개발자 도구로 확인 해보려면 

Node에서의 Vue를 불러 왔을때

1

2

3

import Vue from 'vue';

 

Vue.cofing.devtools = true;

cs

이렇게 했을때 

크롬 확장 프로그램인 VueDevtools

개발자 도구에서 확인이 가능하다.

<Root>    data         text :"Hello world"

데이터가 들어가 있는것을 확인 할수 있다.