설명 🔖 vue 전자 서명 라이브러리 설치 npm i v-perfect-signature 사용법 기본 Props Props 설명 기본값 width 캔버스 너비 설정 100% height 캔버스 높이 설정 100% backgroundColor 캔버스 배경색 설정 rgba(0,0,0,0) penColor 펜 색상 설정 #000 strokeOptions 선 옵션 설정 strokeOptions Property Type 기본값 설명 size number 8 스트로크의 기본 크기(지름) thinning number .5 압력이 스트로크의 크기에 미치는 영향 smoothing number .5 스트로크의 가장자리를 얼마나 부드럽게 할지 결정하는 값 streamline number .5 스트로크를 얼마나 간소화할지를 ..
설치 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 =..
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/..
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..
ref() Type ref 는 초기값에서 타입을 추론함. 타입 지정, 기본 추론 덮어쓰기 가능 초기값 생략시, 결과타입은 undefined 포함하는 유니온 타입. 모든 타입에서 사용 가능 import { ref } from 'vue' import type { Ref } from 'vue' //타입 사용 const year = ref(2020) //타입 추론 const year: Ref = ref('2020') //타입 명시 const year = ref('2020') //추론 덮어쓰기 const n = ref() // Ref // 타입 인터페이스 interface Ref { value: T } 사용법 🔖 인수를 가져와서 .value 속성이 있는 ref 객체에 래핑하여 반환 접근방법 : mounted() ..
