Vue (2)
클래스와 스타일 바인딩
클래스 바인딩
- 속성의 이름은
''로 묶어주어야 함 - data() 객체 데이터 내부에서 반응형 데이터를 활용해야 한다면, 이 데이터를 computed(계산된 데이터) 로 만들어 this 키워드와 함께 사용할 수 있다.
- 객체 데이터 대신 배열 데이터로 동적인 html 클래스를 제어할 수 있다.
v-model... 양방향 데이터 바인딩
스타일 바인딩
:style="`color: ${color};`" ... 템플릿 리터럴 스타일
:style="{ color }" ... 인라인 스타일 (템플릿 리터럴보다 더 간단함- 객체 데이터 내의 속성의 이름과 데이터의 이름이 같다면 하나로 생략해서 작성 가능
color: color->color - 객체 데이터를 직접 바인딩 하여 연결시키지 않고, 이를 하나의 데이터로 묶어 연결하는 것이 좋음
- 객체 데이터를 여러개 바인딩 시킬 경우,
[data1, tata2]배열을 활용한다. v-if,v-else-if,v-else디렉티브를 형제 요소로 부여하여 사용할 수 있다. (단, v-if 와 v-else(else-if) 사이에는 어떠한 요소도 없어야 함)
<template>등을 활용하면 좋음 ...<div>도 사용하지만, div 를 출력하고 싶지 않을 때 (template 는 직접 출력되지 않고 내부만 출력됨)v-show...display: none;스타일을 추가 / 제거함
초기 렌더링 비용이 높음
toggle 등에서의 전환 비용이 낮음 (보여지거나 보여지지 않는 구조가 많을 때 적합)- 구조를 먼저 생성하고, 스타일 작업을 하기 때문에 원치 않게 화면에 잠시 노출될 수 있음 ...
v-clock디렉티브와 함께 사용해서 이를 방지하는 것이 좋음
- 구조를 먼저 생성하고, 스타일 작업을 하기 때문에 원치 않게 화면에 잠시 노출될 수 있음 ...
v-if... lazy (값이 false 이면 해당하는 요소를 구조적으로 생성하지 않음 / 렌더링 하지 않음, 참인 값이 할당되면 그때 출력
초기 렌더링 비용이 낮다
toggle 등의 전환 비용이 높음 (보여지거나 보여지지 않는 구조가 적을 때 적합)
- cf)
v-if를 통한 렌더 제어 방식은 해당 요소를 주석으로 처리하여 요소의 구조를 사라지게 하는 차이가 있음. v-for를 사용한 엘리먼트에는 절대v-if를 사용하지 않도록 함.
<template>태그를 상위에 만들어 여기에v-for을 생성하고, 내부에 태그를 생성한 후 이곳에v-if를 사용하도록 한다.
리스트 렌더링
v-for을 통해 해당하는 요소를 반복할수 있는 데이터로 출력 할 수 있다.v-for는(item, index) in items와 같이 두번째 인자로 index를 넘겨줄 수 있다.
다만, 인덱스와 요소가 완전히 매칭되지는 않는, 출력되는 순서개념임- Vue 를 통해 렌더링을 할 때,
:key를 부여하여 고유한 값을 넣어주어야 한다. (요소가 고유함을 증명하여 식별하게 함) - 배열 감지: Vue 에서는 배열에서 사용할 수 있는 변이 메소드(push, pop, shift, unshift, ...) 들을 통한 배열의 변경을 감지 할 수 있다.
- 원래의 배열을 변경하지 않고 새 배열을 반환하는 등의 비-변이 메소드(filter, concat, slice, ...) 를 통해 반환된 새 배열을 반응형 데이터에 할당할 수 있다. (최대한 기존 배열과 변경사항이 있을 때만 렌더링이 되도록 최적화 되어있음)
<template>... 여러 개의 요소를 블럭 단위로 한번에v-for에서 렌더링 할 수 있다.<form>요소에서 @submit 이 동작하면 기본적으로 새로고침 됨 ... 페이지가 새로고쳐지는 기본 동작을 방지해야 함
이벤트 핸들링
v-on...@기호를 통해 DOM 이벤트를 듣고, 실행한다.- 이벤트 수식어
.stop: 클릭 이벤트 전파 중단 / 이벤트 버블링의 전파 중단
.prevent: 이벤트가 페이지를 다시 로드하지 않게 하는 등 기본 동작 방지
.once: 이벤트에 연결된 동작을 한번만 실행
.capture: 해당하는 이벤트에 가장 높은 우선순위를 부여하여 먼저 실행되도록 함.
.self: event.target이 엘리먼트 자체인 경우에만 트리거를 처리
.passive: 이벤트를 통해 동작하는 메소드와 화면의 렌더링을 분리하여 처리 - 키 수식어 ... 키보드 이벤트를 청취할 때
.meta: Window 에서의 window 키, Mac 에서의 command 키 /@keyup에서는 동작하지 않음 (@keydown과 사용)
.exact: 키 이벤트에 연결되어있는 해당 수식어만을 청취 (다른 키와 함께 누르면 청취되지 않고, 오직 해당 키 하나만을 눌러야 함) ... 키 / 마우스 이벤트 모두에 사용 가능
회고
vue에 클래스, 렌더링, 이벤트에 관련된 부분들을 배우게 되었다.
확실히 왜 프레임워크가 필요한지에 대해 조금씩 알아가고 있는 것 같다. 바닐라 js 로 구현할 때보다 훨씬 더 간결하고 유지보수적인 측면에서도 큰 이점이 있는 것을 느꼈고 즉각적인 반응형에 최적화 되어 있는 점이 가장 큰 메리트가 되는 것 같다.
프론트엔드