{{ message }}
* this; 콜백으로 익명 함수를 사용하거나, 다른 라이브러리와 함께 사용할 경우 this 변경되므로 사용에 주의 * 클래스 이름에 하이픈을 넣을 때는 작은 따옴표(')로 감쌈. * 템플릿에서 조건 분기; v-if -> 주석처리, v-show -> 스타일로 보이지 않게만. * v-if, v-else-if, v-else; key 설정 * 요소를 반복해서 렌더링; v-for = "<각 요소를 할당할 변수 이름> in <반복 대상 배열 또는 객체>" v-bind:key=".." * 값, 키, 인덱스 순 * 반복 처리 순서; Object.keys()의 순서에 기반 * v-for 안에 v-if * 리스트 * 추가; push, unshift ex) this.list.push(새로운 값) * 제거; splice ex) this.list.splice(index, 1) * push, pop, shift, unshift, splice, sort, reverse * Vue.set 메서드; this.$set(변경할 데이터, 인덱스 또는 키, 새로운 값) * this.list.filter(function(el) { ... }) ^ v-bind 장식자 ^^ ^ 장식자 ^ 의미 ^ ^ .prop | 속성 대신에 DOM 속성으로 바인딩, DOM 속성과 직접 바인딩 | ^ .camel | 케밥케이스((kebab-case, lisp-case, spinal-case; 하이픈으로 구분)) 속성 이름을 카멜 케이스로 변환 | ^ .sync | 양방 바인딩 | * $el을 사용해 DOM을 직접 참조 가능, 라이프사이클 중 mounted 이후부터 사용가능. * 속성 ref와 $ref를 사용해 참조 * $el과 $ref는 일시적 변경 ^ 템플렛 제어 디렉티브 ^^ ^ 디렉티브 ^ 설명 ^ ^ v-pre | 템플릿 컴파일 생략 | ^ v-once | 한 번만 바인딩 | ^ v-text | Mustache 대신 텍스트 콘텐츠로 렌더링 | ^ v-html | HTML 태그를 그대로 렌더링 | ^ v-cloak | 인스턴스 준비가 끝나면 제거 | ===== Event Handling ===== * Event Handler, Handle * v-on ^ 이벤트 장식자 ^^ ^ 장식자 ^ 설명 ^ ^ .stop | event.stopPropagation()을 호출 | ^ .prevent | event.preventDefault()를 호출 | ^ .capture | 캡처 모드로 DOM 이벤트를 핸들 | ^ .self | 이벤트가 해당 요소에서 직접 발생할 때만 핸들러를 호출 | ^ .native | 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 핸들 | ^ .once | 한 번만 핸들 | ^ .passive | {passive: true}로 DOM 이벤트를 핸들 | ^ 클릭 이벤트 ^^ ^ 장식자 ^ 설명 ^ ^ .left | 마우스 왼쪽 버튼으로 눌렀을 때만 핸들러 호출 | ^ .right | 마우스 오른쪽 버튼으로 눌렀을 때만 핸들러 호출 | ^ .middle | 마우스 중간 버튼으로 눌렀을 때만 핸들러 호출 | * 키 장식자 ^ 키 코드 별칭 ^^ ^ 별칭 ^ 의미 ^ ^ .enter | Enter(엔터) 키를 눌렀을 때 | ^ .tab | Tab(탭) 키를 눌렀을 때 | ^ .delete | Delete(딜리트) 키를 눌렀을 때 | ^ .esc | ESC 키를 눌렀을 때 | ^ .space | Space(스페이스) 키를 눌렀을 때 | ^ .up | 화살표 위 키를 눌렀을 때 | ^ .down | 화살표 아래 키를 눌렀을 때 | ^ .left | 화살표 왼쪽 키를 눌렀을 때 | ^ .right | 화살표 오른쪽 키를 눌렀을 때 | ^ 시스템 장식자 ^^ ^ 별칭 ^ 의미 ^ ^ .ctrl | Ctrl(컨트롤) 키가 눌린 경우 | ^ .alt | Alt(안트) 키가 눌린 경우 | ^ .shift | Shift(시프트) 키가 눌린 경우 | ^ .meta | Meta(메타) 키가 눌린 경우 | * 양방향 데이터 바인딩; v-model * 데이터 바인딩으로 요소의 value 속성 변경 * 이벤트 핸들링으로 받은 값을 데이터에 대입 * file 타입에는 사용 불가 ^ v-model 장식자 ^^ ^ 장식자 ^ 의미 ^ ^ .lazy | input 대신 change 이벤트 핸들링 | ^ .number | 값을 숫자로 변환 | ^ .trim | 값 양쪽에 있는 쓸데없는 공백 제거 | ===== 데이터 가공 및 감시 ===== * 산출 속성; 리앤티브 데이터를 기반으로 결과 캐시 * getter and setter; get:, set: * 워처(watcher); 특정 데이터 또는 산출 속성의 상태를 감시해서 변화가 있을 때 등록한 처리를 자동을 실행{{ $data }}