> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-instance/template.md). # template ## Vue template 출력 {% embed url="" %} `Vue template`은 사용중인 [Vue data](/web/develop-page/js/vuejs/cdn-vue3/vue-instance/data.md#vue-data)를 화면(View)에 출력할 수 있는 방법을 말한다. ### Mustache 구문 Mustache 구문은 이중 중괄호를 사용한 텍스트 출력 방식이다. `{{data}}` 형식으로 사용한다. 출력된 값은 수정해도 data에 반영되지 않는다. 이는 단방향 연결로 볼 수 있다.

```markup v-model example

한줄평 작성

글자수 : {{comment.length}}

``` {% embed url="" %} {% embed url="" %} ![](/files/MtxNNYTV4EOLqfFG43in) 예제를 실행하면 입력창의 입력값이 변화함에 따라 하단 영역의 글자와 글자 수가 달라지는 것을 확인할 수 있다. [v-model](/web/develop-page/js/vuejs/cdn-vue3/vue-instance/v-model.md#v-model)과 다르게 template 구문에서는 값의 변화를 줄 수 없다. 또한 v-model은 입력창에 사용하지만 template 구문은 입력창 외의 다른 영역에 적용할 수 있다는 특징을 가진다. 또한 계산식을 지원하므로 필요한 계산을 출력 구문 내에서 수행할 수 있다. ### v-bind directive {% hint style="info" %} directive는 태그에 작성할 수 있도록 만들어진 특수 속성을 말한다. VueJS의 directive는 `v-` 로시작한다. {% endhint %} `v-bind` directive를 통해 태그에 원하는 형태의 값을 추가할 수 있다. 먼저 다음 두 개의 directive를 비교해본다. * `v-html` * `v-text` ### 「v-html」 vs 「v-text」 `v-html`과 `v-text` 모두 영역 내부에 값을 추가하는 directive이다. * `v-html` - 해당 영역 내부에 html을 추가 * `v-text` - 해당 영역 내부에 text를 추가 ```markup vue template example

글자 입력

v-html

v-text

mustache

``` {% embed url="" %} 실행해서 글자를 입력해보면 차이점을 알 수 있다.