설치 npm i --save pinia npm i --save pinia-plugin-persistedstate 셋팅 /src/main.ts (vue 초기 파일) - 빨간 부분이 pinia import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import vuetify from './plugins/vuetify'; import { loadFonts } from './plugins/webfontloader'; import { createPinia } from 'pinia'; import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';..
Props 설명 🔖 부모Component 값(전송)을 자식Component(출력)에게 전달해줄때 사용 사용법 defineProps()에 전달하는 인자는 props 옵션에 제공하는 값(읽기 전용)과 동일 두 선언 스타일은 동일한 props 옵션을 사용 부모에서 자식에게 데이터 넘기기 자식에서 부모 데이터 출력하기 {{ props.data }} Emits 설명 🔖 자식Component 값(전송)을 부모Component(출력)에게 전달해줄때 사용 사용법 defineEmits()에 전달하는 인자는 emit 옵션에 제공하는 값(읽기 전용)과 동일 두 선언 스타일은 동일한 emits 옵션을 사용 자식에서 부모에게 데이터 넘기기 부모에서 자식 데이터 출력하기
설명 🔖 watch : 소스를 검사하여 동작을 수행하는지 판별한 후 콜백함수를 호출 Type // 하나의 소스 감시 function watch( source: WatchSource, callback: WatchCallback, options?: WatchOptions ): StopHandle // 여러 개의 소스 감시 function watch( sources: WatchSource[], callback: WatchCallback, options?: WatchOptions ): StopHandle type WatchCallback = ( value: T, oldValue: T, onCleanup: (cleanupFn: () => void) => void ) => void type WatchSource =..
Named slot 컴포넌트를 사용할 때 특정 영역은 상위 컴포넌트에서 태그들을 넣을 수 있도록 하는 기능 slot (상속) 설명 💡 이 부분에 들어갈 태그 내용은 상위 컴포넌트가 정하도록 하겠다는 의미 Child —> 태그 사이에 원하는 태그들 넣기 Parent main의 제목 main의 내용 —> 렌더링 Parent Child main의 제목 main의 내용 slot 여러 개 사용 (구분) slot을 여러 개 사용해서 구분이 필요할 땐 명칭을 붙여줘서 구분 필요(named slot) Scoped slot 설명 상위 컴포넌트에서 하위 컴포넌트의 값을 가져와 렌더링에 사용 가능하게 만드는 기능 하위 컴포넌트에서 name 외 속성으로 상위 컴포넌트에서 값 전송 slot인 경우 v-slot인 경우 {{ 변수..
v-on 타입 Function | Inline Statement | Object (without argument) : truthy를 판단해줄 수 있는 값 설명 🔖 표현식의 truthy 값을 기반으로 엘리먼트의 가시성을 전환 DOM 이벤트를 듣고, 트리거 될때 Javascript를 실행 이벤트 이벤트 설명 @click="event" 클릭했을 때 실행 @dbclick="event" 더블 클릭했을 때 실행 @change="event" 요소가 변경될 때 실행 @mouseover="event" 마우스의 포인트가 요소 위로 올라왔을 때 실행 @submit="event" form이 제출될 때 실행 @reset="event" form이 재설정될 때 실행 @select="event" select 값이 선택되었을 때 실행..
v-bind 타입 any (인자 있이) | Object (인자 없이) 설명 🔖 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩 html의 속성인 id, class, style 등에 대해 model 데이터를 연결할 때 사용 속성 :src 이미지 데이터 연결 :href 링크를 통한 연결 :class, v-bind:style 스타일시트 연결 :key 키를 통한 연결 수식어 수식어 설명 .camel kebab-case 속성 이름을 camelCase로 변환 .prop 바인딩을 https://developer.mozilla.org/en-US/docs/Web/API/Element#properties으로 강제 설정 .attr 바인딩을 https://developer.mozilla.org/en-US/..
v-model 타입 any (인자 있이) | Object (인자 없이) 설명 🔖 사용자 입력을 받는 폼(form) 엘리먼트 또는 컴포넌트에 양방향 바인딩 제한 사용 - 사용 가능한 목록 컴포넌트 수식어 수식어 설명 .lazy input 대신 change 이벤트를 수신함. .number 유효한 입력 문자열을 숫자로 변환하여 전달. 인풋에 type="number"가 있으면 .number 수식어가 자동으로 적용 .trim 사용자가 입력한 값의 공백(” ”) 제거 세부사항 class 또는 style 속성을 바인딩하는 데 사용되는 경우 v-bind는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원 컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언 인자 없이 사용하는 경우, ..
router/index.ts 서버에서 바로 불러오는 애들 → App.js에서 바로 가져온다. { path: '/', name: 'home', component: HomeView }, 메뉴로 바로 불러와야한다, 사이즈가 커서 미리 불러와야 할것 같다. → webpackPrefetch:true로 설정 { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import( /* webpackChunkName: "ab..
