v-if ~ v-else-if ~ v-else 설명 🔖 조건부로 블록을 렌더링하는 데 사용 - true일 때만 렌더링 Type A B C A/B/C 아님 v-show 설명 🔖 항상 렌더링되고 DOM에 남아 있다, CSS 속성만 전환 Type 안녕! v-for 설명 🔖 배열을 리스트로 렌더링 item in items Type {{ value }} 사용법 객체에 v-for 사용하기 {{ value }} 숫자 범위에 v-for 사용하기 1...n 범위를 기준으로 템플릿을 여러 번 반복 {{ n }} 에서 v-for 사용하기 여러 엘리먼트 블록을 렌더링 {{ item.msg }} 우선순위 v-if > v-for 따라서 서로 같이 쓰는걸 권장하지 않음 v-if & v-show 일반적으로 v-if는 전환 비용이 더..
설명 🔖 동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 "메타 컴포넌트" 렌더링 할 실제 컴포넌트는 is 속성(prop)에 의해 결정 Type interface DynamicComponentProps { is: string | Component // 조건에 해당하는 문자열이나 컴포넌트(필수) } 사용법 // 등록된 이름으로 렌더링(option api) // 정의에 따른 컴포넌트 렌더링( 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. 렌더링 시 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은..
디렉티브 기본 사용법 v-on:submit.prevent="onSubmit" // 이름(name):전달인자(argument).수식어(modifiers)="값(value)" v-text {{양방향 데이터 바인딩}} 타입 string 설명 🔖 엘리먼트의 텍스트 컨텐츠를 업데이트 세부사항 v-text는 엘리먼트의 텍스트 컨텐츠 속성을 설정 엘리먼트 내부의 기존 컨텐츠를 덮어씀. 텍스트 컨텐츠의 일부를 업데이트해야 하는 경우, 이중 중괄호를 사용 필요 사용법 {{msg}} v-show 타입 any : truthy를 판단해줄 수 있는 값 설명 🔖 표현식의 truthy 값을 기반으로 엘리먼트의 가시성을 전환 세부사항 v-show는 인라인 스타일을 통해 display CSS 속성을 설정 엘리먼트가 표시될 때 초기 d..
컴포넌트의 이름은 Multi-word를 사용 단일 단어(Card, Modal, Button)로 이름지으면 이름이 중복될 가능성이 있으며 명료하지 않다. // Bad Case - Card.vue - Button.vue - Modal.vue // Good Case - UserCard.vue - UserButton.vue - UserUserModal.vue 부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 prefix로 사용 nest방식의 단점 비슷한 이름을 가진 파일이 너무 많으면 단축키로 파일간의 이동이 어려워진다. 하위 경로로 엮인 구조가 늘어나면 IDE의 사이드바에서 컴포넌트들을 브라우징하는데 더 많은 시간이 걸릴 수 있다. // Bad Case - User.vue - Card.vue ..
구조 project ├─ .eslintrc.js # eslint 설정 파일 ├─ .gitignore # 깃에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일 ├─ .prettierrc # prettier 설정 파일 ├─ babel.config.js # babel 파일 ├─ package-lock.json # 파일이 생성되는 시점의 의존성 트리에 대한 정보(안정성) ├─ package.json # 프로젝트 정보와 의존성(dependencies) 관리 문서 ├─ public #제일 처음 로드되는 기본 html - div id="app"을 통해 뷰가 호출 ├─ src │ ├─ App.vue # 최상위 컴포넌트 │ ├─ assets #기타 부수적인 내용의 파일 및 폴더를 넣어놓는 디렉토리 │..
