Vue.js

혼잣말

프론트엔드 프레임워크 - 쉽다! 간편하다!

카테고리

프레임워크/라이브러리

Vue.js

제목명

유형

부유형

설명

주요 레퍼런스

vue.js Dockerize

Open

Docker

사용법

vue Dockerfile 설정 + nginx

https://v2.ko.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

pinia 스토어 기본 사용법

Open

Pinia

사용법

컴포넌트에 store 가져와서 사용하기, ref 가져오기

pinia 설치 및 셋팅

Open

Pinia

설치

상태 관리

감시자

Open

Vue

함수

watch

https://velog.io/@heina-effect/%EB%B3%80%EC%88%98%EB%A5%BC-%EA%B0%90%EC%8B%9C%ED%95%98%EA%B3%A0-%EC%8B%B6%EC%9D%84-%EB%95%8C-Watch-%ED%95%A8%EC%88%98-2%ED%8E%B8

vue 디렉터리 구조

Open

Vue

구조

디렉터리 구조

https://itnext.io/vue-tricks-smart-layouts-for-vuejs-5c61a472b69b

Props & Emit

Open

Vue

함수

Props(부모→자식) & Emit(자식→부모)

https://orange056.tistory.com/235

https://ko.vuejs.org/guide/components/props.html

vue 구조/네이밍 규칙

Open

Vue

구조

디렉토리 트리 구조, 컴포넌트 네이밍 규칙

https://velog.io/@cindy-choi/VUE-%EC%9A%B0%EC%95%84%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0-%EC%A7%9C%EA%B8%B0

LifeCycle

Open

Vue

구조

생명주기 표, onMounted, onUpdated

https://ko.vuejs.org/api/composition-api-lifecycle.html

특수 엘리먼트

Open

Vue

엘리먼트

인수

<component>, <template>, <KeepAlive>, :is

template

https://ko.vuejs.org/api/built-in-special-elements.html

v-model

Open

Vue

디렉티브

양방향 바인딩

v-bind

Open

Vue

디렉티브

: 데이터 연결 - 바인딩 속성

https://ko.vuejs.org/guide/essentials/class-and-style.html

v-on

Open

Vue

디렉티브

@ 표현식 truthy 기반 이벤트 관리 속성

https://ko.vuejs.org/api/built-in-directives.html

v-slot

Open

Vue

디렉티브

# (상위에서 하위 컴포넌트 값, 영역을 가져오는 기능)

https://blogcreator.blog/post/19

디렉티브

Open

Vue

디렉티브

v-text, v-show, v-once “속성”

https://ko.vuejs.org/api/built-in-directives.html

라우터 vue-router

Open

Vue

구조

함수

useroute/userouter

https://velog.io/@tata-v_vlelog/Vue-Vue-Router-%EC%82%AC%EC%9A%A9%EB%B2%95

https://router.vuejs.kr/guide/advanced/meta

데이터바인딩

Open

Vue

구조

v-bind, v-html

조건/반복 렌더링

Open

Vue

디렉티브

v-if, v-for

https://ko.vuejs.org/guide/essentials/conditional.html

https://ko.vuejs.org/guide/essentials/list.html

종속 (의존성 주입)

Open

Vue

구조

함수

provide, inject

https://ko.vuejs.org/guide/components/provide-inject.html

반응형 API

Open

Vue

디렉티브

ref, reactive, computed, watch

https://velog.io/@violet_yang/TIL-Vue.jsref-reative%EC%99%80-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html

vuetify 설치

Open

Vuetify

설치

vuetify 설치 방법

vuexy 구조 분석

Open

Vuexy

구조

vuexy 폴더 구조 분석

https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/guide/folder-structure.html#core