1. Single File Components란? - .vue라는 파일 단위 안에 html, js, css를 관리할 수 있는 방법 2. Single file components가 필요한 이유? - 복잡도가 커짐에 따라 아래와 같은 문제들이 발생할 수 있으므로 .vue 파일을 이용해야한다. 1) 모든 컴포넌트에 고유의 이름을 붙여야함 2) js 파일에서 template 안의 html의 문법 강조가 되지 않음 3) js 파일 상에서 css 스타일링 작업이 거의 불가 (많은 양의 css) 4) 스크립트는 계속 진화하는데 예전 문법을 계속 사용할 경우 새로운 버전의 스펙의 이점을 활용할 수 없음. 3. .vue 파일은 어떻게 생긴건가요??

1. Single File Components란? - .vue라는 파일 단위 안에 html, js, css를 관리할 수 있는 방법 2. Single file components가 필요한 이유? - 복잡도가 커짐에 따라 아래와 같은 문제들이 발생할 수 있으므로 .vue 파일을 이용해야한다. 1) 모든 컴포넌트에 고유의 이름을 붙여야함 2) js 파일에서 template 안의 html의 문법 강조가 되지 않음 3) js 파일 상에서 css 스타일링 작업이 거의 불가 (많은 양의 css) 4) 스크립트는 계속 진화하는데 예전 문법을 계속 사용할 경우 새로운 버전의 스펙의 이점을 활용할 수 없음. 3. .vue 파일은 어떻게 생긴건가요??

Vue Data 바인딩 3번째 개념! 바로 Directieves! Directives란? - Vue에서 제공하는 특별한 Attributes이며, 접두사를 이용!! (v-if, v-on) - 자바스크립트 표현식, filter 모두 적용됨

Binding Expressions란? - 값을 연결한다는 관점에서는 위(Interpolation)와 유사함. - Mustache( {{ }} )에 자바스크립트 표현식을 사용하여 데이터 바인딩이 가능하다. Filter에서도 Mustache가 사용되었음!! 이렇게 Mustache를 이용하여 여러개 필터 체인이 가능하다. ...... 너무 오랜만에 Vue를 정리했나.. 또르르르.......

이 전까지는 Vue 템플릿에 대해서 설명을 하였다. "Vue Data를 화면에 매핑한다. 연결한다. 바인딩한다."라고 표현했었다. (Vue Data가 있는 공간 : 자바 스크립트가 존재하는 공간을 의미) 앞으로는 어떻게 Data가 화면에 매핑되는지 그 방법에 대해 설명하려한다. Vue 데이터를 바인딩하는 방법은 아래와 같이 3가지 방법이 존재한다. 1. Interpolation 2. Binding Expressions 3. Directives 해당 방법에 대해서는 각 3번에 걸처 설명할 예정이다.

Filter란? 화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능 | 를 이용하여 여러개의 필터를 적용할 수 있음 Example {{ message | capitalize }} new Vue({ // ... filters: { capitalize: function (value) { if(!value) return ' ' value = value.toString() regurn value.charAt(0).toUpperCase() + value.slice(1) } } }) capitalize 에 정의된 함수가 위 코드에 나타나게 됨.