Vue.js
데이터 바인딩

본문

데이터 바인딩의 가장 기본적인 형태는 "콧수염"구문 (이중 중괄호)을 사용하는 텍스트 보간법입니다.

<span>Message: {{ msg }}</span>

콧수염 태그는 해당 데이터 객체의 msg 속성 값으로 대체됩니다. 또한 데이터 객체의 msg 속성이 변경 될 때마다 업데이트됩니다.

데이터 변경시 업데이트되지 않는 일회 보간을 수행 할 수도 있습니다.

<span>This will never change: {{* msg }}</span>

원시 HTML

이중 콧수염은 HTML이 아닌 일반 텍스트로 데이터를 해석합니다. 실제 HTML을 출력하려면 트리플 콧수염을 사용해야합니다.

<div>{{{ raw_html }}}</div>

내용은 일반 HTML 형식으로 삽입됩니다. 데이터 바인딩은 무시됩니다. 템플릿 조각을 다시 사용해야하는 경우 partials를 사용해야합니다.

속성

모조품은 HTML 속성 내부에서도 사용할 수 있습니다.

<div id="item-{{ id }}"></div>

속성 보간은 Vue.js 지시문 및 특수 속성에서 허용되지 않습니다. Vue.js는 콧수염이 잘못된 장소에서 사용될 때 걱정할 필요가 없습니다.

필터

Vue.js는 "파이프"기호로 표시되는 표현식 끝에 선택적 "필터"를 추가 할 수 있습니다.

{{ message | capitalize }}

여기서는 내장 된 capitalize 필터를 통해 message 표현식의 값을 "파이핑"합니다. 실제로 대문자로 된 값을 반환하는 자바 스크립트 함수입니다. Vue.js는 여러 가지 기본 제공 필터를 제공하며 나중에 직접 필터를 작성하는 방법에 대해 설명합니다.

파이프 구문은 JavaScript 구문의 일부가 아니므로 식 내에 필터를 혼합 할 수는 없습니다. 당신은 표현의 끝에서만 그것들을 추가 할 수 있습니다.

필터는 연결될 수 있습니다.

{{ message | filterA | filterB }}

필터는 인수를 취할 수도 있습니다.

{{ message | filterA 'arg1' arg2 }}

필터 함수는 항상 표현식의 값을 첫 번째 인수로받습니다. 따옴표로 묶인 인수는 일반 문자열로 해석되고 인용되지 않은 인수는 표현식으로 평가됩니다. 여기서 'arg1' 이라는 일반 문자열이 두 번째 인수로 필터에 전달되고 arg2 표현식의 값이 계산되어 세 번째 인수로 전달됩니다.