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
표현식의 값이 계산되어 세 번째 인수로 전달됩니다.