[6] Vue 템플릿

개요

vue.js로 화면을 조작하기 위해 제공되는 문법이다.

 

종류

1) Data Binding

- 데이터와 화면을 연결하기 위한 방법으로, 간단한 표현식 {{ }} 으로 화면과 vue 인스턴스의

  data, computed, props 속성을 연결할 수 있다.

- 간단한 자바스크립트 표현식도 화면에 표시할 수 있다.

 

2) Directive

- 화면의 DOM 조작을 쉽게 할 수 있는 문법으로, v- 접두사가 붙은 태그를 제공한다.

ex)

- v-html

span의 내용은 rawHtml로 대체되고 이 때 데이터 바인딩은 무시된다.

이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용한다.

 

- v-bind

동적으로 하나 이상의 컴포넌트 속성 또는 표현식을 바인딩하여 반응적으로 HTML 속성을 갱신할 수 있다.

또한, 약어인 콜론( : )으로 대체하여 표기할 수 있다.

 

- v-on

DOM 이벤트를 수신한다. 또한, 약어인 at(@)으로 대체하여 표기할 수 있다.

 

 

3) Filters

- 화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능으로 | (파이프)를 사용하여

  여러 개의 필터를 적용할 수 있다.

 

출처 : 

joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

Vue.js 입문서 - 프론트엔드 개발자를 위한

kr.vuejs.org/v2/guide/syntax.html

템플릿 문법 — Vue.js