Vue
-
Vue 컴포넌트 기초Vue/Component 2021. 6. 20. 12:59
컴포넌트는 재사용 가능한 인스턴스이므로 data, computed, watch, methods 와 라이프사이클 훅과 같은 루트 인스턴스와 같은 옵션을 허용 el과 같은 몇가지 루트만의 옵션은 예외 - Props 컴포넌트에 데이터 전달 컴포넌트에 등록할 수 있는 커스텀 속성 값이 prop 속성에 전달되면, 그 값은 해당 컴포넌트 인스턴스의 속성이 된다. 자바스크립트 표현식임을 알리려면 v-bind가 필요 객체의 속성 전달 객체의 모든 속성을 props로 전달하려면 전달인자 없이 v-bind 사용 아래 2개는 동일 post: { id: 1, title: 'Vue와 떠나는 여행' } - 단방향 데이터 흐름 모든 props는 자식 속성과 부모 속성 사이에 아래로 단반향 바인딩을 형성 부모 속성이 업데이트되면 자..
-
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 취약점이 발생..