가이드
필수요소
- 설치방법
- 시작하기
- Vue 인스턴스
- 템플릿 문법
- computed와 watch
- 클래스와 스타일 바인딩
- 조건부 렌더링
- 리스트 렌더링
- 이벤트 핸들링
- 폼 입력 바인딩
- 컴포넌트
컴포넌트 톺아보기
- 컴포넌트 등록
- Props
- 커스텀 이벤트
- 슬롯(Slots)
- 동적 & 비동기 컴포넌트
- 예외적인 상황들
트랜지션 & 애니메이션
- 진입/진출 그리고 리스트 트랜지션
- 상태 트랜지션
재사용 & 컴포지션
- 믹스인
- 사용자 지정 디렉티브
- Render Functions & JSX
- 플러그인
- 필터
도구
- 싱글 파일 컴포넌트
- 단위 테스팅
- TypeScript 지원
- 프로덕션 배포 팁
스케일링 업
- 라우팅
- 상태 관리
- 서버사이드 렌더링
- 보안
내부
- 반응형에 대해 깊이 알아보기
마이그레이션1
- Vue 1.x에서 마이그레이션
- Vue Router 0.7.x으로 부터 마이그레이션
- Vuex 0.6.x에서 1.0로 마이그레이션
메타
- 다른 프레임워크와의 비교
- Vue.js 커뮤니티에 참여하세요!
- 팀 구성원 만나기
필터
Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원합니다. 이 필터들은 중괄호 보간법 혹은 v-bind
표현법 을 이용할 때 사용가능합니다. (v-bind
표현법에서는 2.1.0+ 부터 사용 가능합니다.) 필터는 자바스크립트 표현식 마지막에 “파이프”심볼과 함께 추가되어야 합니다.
|
컴포넌트 옵션에서 로컬 필터를 정의할 수 있습니다.
|
또는 다음과 같이 Vue 인스턴스를 생성하기 전에 전역 필터를 정의할 수 있습니다.
|
When the global filter has the same name as the local filter, the local filter will be preferred.
아래는 capitalize
를 사용한 예제입니다.
{{ message | capitalize }}
필터의 함수는 항상 첫 번째 전달인자로 표현식의 값(이전 체이닝의 결과)을 받습니다. 위 예제에서, capitalize
필터 함수는 message
의 값을 전달인자로받습니다.
필터는 체이닝 할 수 있습니다.
|
위와 같은 경우에, 하나의 인수를 받는 filterA
는 message
값을 받을 것이고 filterA
가 message
와 함께 실행된 결과가 filterB
에 넘겨질 것입니다.
필터는 기본적으로 자바스크립트 함수이기 때문에 두개 이상의 인수를 받을 수 있습니다.
|
여기서 filterA
는 세개의 인수를 받는 함수로 정의되었습니다. message
의 값은 첫번째 인수로 전달될 것이며, 순수 문자열인 'arg1'
은 두번째 인수로 전달될 것이며, 자바스크립트 표현식인 arg2
는 표현식이 실행된 이후에 세번째 인수로 전달될 것입니다.