Note 바인딩에서 표현식 사용

데이터 바인딩을 데이터 속성으로 제한할 필요는 없습니다. Vue에서는 바인딩 내에서 유효한 자바스크립트 표현식을 사용할 수 있습니다. 코드 2-5에 있는 코드로 예를 들면 다음과 같습니다.

{{product.title.toUpperCase()}} -> 고양이 사료, 25파운드(한글이므로 대문자로 변환되지 않습니다)
{{product.title.substr(4,4)}} -> 당신의
{{produFuct.price * 0.25)}} -> 1500
<img :src="product.image.replace('.png', '.jpg')"> -> <img src="//assets/images/product-fullsize.png">

이렇게 표현식을 쓰면 편리한 점도 있지만, 애플리케이션 또는 컴포넌트의 자바스크립트 코드에서 처리하는 것이 대부분 더 나음에도 뷰에서 데이터를 처리하게 됩니다. 또 이 표현식을 쓰면 애플리케이션 복잡도가 높아질수록 데이터가 어디서 변경되었는지 찾기 힘듭니다.

일반적으로 인라인 표현식을 쓰는 것이 애플리케이션 안에서 해당 기능을 형식화하기 전에 테스트해 보기 좋습니다.

다음 절과 다음에 올 장에서는 뷰 또는 애플리케이션 데이터의 무결성을 깨지 않고 기존 값에서 데이터를 수정하고 걸러 내고 가져오는 모범 사례들을 보여 줄 것입니다. 무엇을 표현식으로 간주하는지에 대한 자세한 내용은 https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions에서 확인하세요.