Vue/문법
-
Vue 폼 입력 바인딩Vue/문법 2021. 6. 20. 11:48
v-model 디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있음 input :value 속성 + @input event = v-model v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송 text와 textarea 태그는 value속성과 input이벤트를 사용 체크박스와 라디오버튼들은 checkcd 속성과 change 이벤트를 사용 select 태그는 value를 prop으로, change를 이벤트로 사용 - 주의사항 v-model을 통해서 한글을 입력한 경우 한박자 늦게 적용됨(자음 + 모음이 완성되야 적용) 한글을 입력할 경우에는 :value + @input 을 통해 양방향 바인딩 적..
-
Vue 이벤트 핸들링Vue/문법 2021. 6. 20. 11:23
- 이벤트 청취 v-on 디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용 - 인라인 메소드 핸들러 인수가 있을 경우 ()안에 추가 이벤트 객체도 필요할 경우 $event 사용 Submit methods: { warn(message, event) { // 네이티브 이벤트에 접근 할 수 있습니다. if (event) { event.preventDefault() } alert(message) } } - 복합 이벤트 핸들러 ,로 메소드를 나열 인수가 없더라도 ()를 생략하면 정상적으로 동작하지 않음 Submit methods: { one(event) { // 첫번째 핸들러 로직... }, two(event) { // 두번째 핸들러 로직... } } - 이벤트 수식..
-
Vue 리스트 렌더링Vue/문법 2021. 6. 20. 01:36
- v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트 렌더링 item in items 형태로 특별한 문법 필요 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 v-for 블록 안에서 부모 범위 속성에 대한 모든 권한이 있음 현재항목의 인덱스에 대한 두번째 전달인자 옵션 제공 {{ parentMessage }} - {{ index }} - {{ item.message }} Vue.createApp({ data() { return { parentMessage: 'Parent', items: [{ message: 'Foo' }, { message: 'Bar' }] } } }).mount('#array-with-index') in 대신에 of를 구분자로 사용 가능 - v..
-
Vue 조건부 렌더링Vue/문법 2021. 6. 20. 00:44
- v-if / v-else-if / v-else 조건에 따라 블록을 렌더링할 때 사용 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 - 에 v-if를 갖는 조건부 그룹 만들기 v-if는 디렉티브이기 때문에 하나의 엘리먼트에 추가되어야 함 둘 이상의 엘리먼트를 전환하려면 엘리먼트 사용 엘리먼트는 눈에 보이지 않게 내부 엘리먼트를 감싸는 역할을 하며, 최종 렌더링 결과에 포함되지 않음 - v-show v-show 엘리먼트의 경우 항상 렌더링 되어 DOM에 남아있음 v-show는 단순히 엘리먼트의 CSS display 속성만을 전환 v-show는 엘리먼트를 지원하지 않으며, v-else와 함께 사용불가 - v-if vs v-show v-if 실제 조건부 렌더링 전환 도중 조건부 블록 내부의 이..
-
Vue 클래스 & 스타일 바인딩Vue/문법 2021. 6. 20. 00:30
- 클래스와 스타일 바인딩 Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선사항을 제공 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있음 - HTML 클래스 바인딩 객체 구문 :class에 객체를 전달하여 클래스를 동적으로 전환 active 클래스의 존재가 데이터 속성 isActive가 Truthy에 의해 결정됨 객체에 더 많은 필드를 포함하여, 여러 클래스를 전환할 수 있음 예제 1과 예제 2는 동일한 결과를 렌더링 함 // Example 1 data() { return { isActive: true, hasError: false } } // Example 2 data() { return { classObject: { isActive: true, error: null ..
-
Vue Computed, WatchVue/문법 2021. 6. 19. 23:11
- Computed 속성 간단한 연산일 경우 템플릿 내에 표현식으로도 가능 복잡하고 반복적인 경우 Computed 속성을 사용 - Computed 속성의 캐싱 vs 메서드 표현식에서 메서드를 호출하여도 동일한 결과 차이점 *computed 속성 * computed 속성은 반응형 종속성에 기반하여 캐시된다. computed 속성은 반응형 종속성 중 일부가 변경된 경우에만 재평가 된다. 데이터가 변경되지 않으면 computed 속성에 대해 여러번 접근하더라도 함수를 다시 실행할 필요없이 이전에 계산된 결과를 즉시 반환 methods 다시 렌더링이 발생할 때마다 항상 함수를 실행 - Computed Getter, Setter Computed 속성은 기본적으로 Getter 이지만, 필요할 때엔 Setter도 제..
-
Vue TemplateVue/문법 2021. 6. 19. 22:31
- 템플릿 문법 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일(DOM 조작 최소화) - 보간법(Interpolation) 문자열 데이터 바인딩의 가장 기본 형태는 'Mustache'(이중 중괄호 구문) 기법을 사용한 문자열 보간법 v-once 디렉티브는 사용하는 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행 메시지: {{ msg }} 결코 변하지 않을 것입니다: {{ msg }} 원시 HTML 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석 실제 HTML을 출력하려면 v-html 디렉티브 사용 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점이 발생..
-
Vue 라이프사이클 훅Vue/문법 2021. 6. 19. 21:44
- 라이프사이클 훅 인스턴스 라이프사이클에서는 Vue 인스턴스를 가리키는 this 컨텍스트와 함께 호출 Creation(초기화) 컴포넌트가 DOM에 추가되기 전에 실행되는 단계 서버 사이드 렌더링에서도 지원되는 훅 beforeCreate 컴포넌트 초기화 단계 중 가장 처음으로 실행 컴포넌트 데이터를 관찰하고 이벤트를 초기화 데이터는 아직까지 반응적이지 않으며, 컴포넌트의 라이프사이클에서 발생하는 이벤트 역시 설정되지 않은 상태 created Vue 인스턴스가 이벤트를 설정하고 데이터를 관찰할 때 발생 템플릿은 아직 마운트되거나 렌더링 되지 않았지만, 이벤트들이 활성화되며 데이터에 반응적으로 접근하는 것이 가능 Mounting(DOM 추가) 가장 많이 사용되는 단계 컴포넌트가 렌더링되기 직전이나 직후에 컴..