vuejs (2) 썸네일형 리스트형 Vue에서 커스텀 디렉티브 만들기 – 직접 만든 v-detect 예시로 이해해보자 Vue에서 커스텀 디렉티브 만들기 — v-detect 예제Vue에서는 v-if, v-for처럼 v-로 시작하는 디렉티브를 통해 HTML 요소에 특정 동작을 지정할 수 있다.그리고 기본 디렉티브 외에도, 직접 커스텀 디렉티브를 만들어서 사용할 수 있다.이번에는 사용자가 input에 특정 단어를 입력했을 때, 그 단어를 치환해주는 간단한 디렉티브를 만들어보자.1. main.vue — 커스텀 디렉티브 사용 {{ content }} v-detect라는 커스텀 디렉티브를 input 요소에 적용했다.detect 디렉티브 객체를 외부 파일에서 import해서 directives 옵션에 등록했다.2. common.js — 디렉티브 정의export const detect = { mounted: (el.. Vue.js 상태관리 라이브러리, Vuex Vuex는 Vue 애플리케이션을 위한 상태관리 라이브러리다.store라는 중앙 저장소에 데이터를 보관하고, 모든 컴포넌트에서 해당 데이터를 공유하고 사용할 수 있게 도와준다.기존에는 컴포넌트 간에 데이터를 주고받기 위해 props나 event bus를 사용했지만, 컴포넌트가 많아질수록 구조가 복잡해지고 관리가 어려워진다.이러한 문제를 해결하기 위해 Vuex를 통해 중앙에서 상태를 관리하는 것이 훨씬 효율적이다.1) Gettersgetters는 state에서 데이터를 가져오는 함수다.Vue의 computed 속성과 유사하며, getter의 결과는 의존성 기반으로 캐시된다.즉, 의존하고 있는 state 값이 바뀔 때에만 다시 실행된다.2) Mutationsmutation은 state를 직접 변경하는 유일한 .. 이전 1 다음
