얼렁뚱땅개발로그^__^

.stop 이벤트 전파 방지 stopPropagation()과 동일 .prevent 브라우저의 기본 동작을 금지한다. ..preventDefault()와 동일 .capture 이벤트 리스너의 capture 옵션을 활성화 .self 이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출한다. .once 최대 한 번의 클릭만 허용 .once.prevent와 같이 사용하면 처음 클릭시 태그의 본연의 긴능을 방지하고 원하는 기능을 수행할 수 있다. .passive 이벤트 리스너의 passive 옵션을 활성화 시킨다. .exact 정확히 해당 키만 눌렸을 때 핸들러를 호출 .left 마우스 왼쪽 버튼이 눌렸을 때 핸들러를 호출 .right 마우스의 오른쪽 버튼이 눌렷을 때 핸들러를 호출 .m..

1. Single File Component ( SFC ) vue의 컴포넌트를 하나의 파일로 나타내는 것을 의미한다. 하나의 파일에 하나의 컴포넌트를 나타내므로 관리하기가 쉽고 코드가 간결해진다. 3개의 부분으로 나누어진다. template - 컴포넌트가 랜더링될 HTML 부분 script - 자바스크립트나 타입스크립트를 사용할 수 있고, 와 같이 setup 속성을 사용하면 LOC(Line Of Code)의 양을 줄일 수 있다. style - css, scss 사용가능하고 scoped 속성을 이용하여 해당 컴포넌트 안에서만 css가 작동할 수 있도록 설정할 수 있다. 2. 컴포지션 함수 setup vue3는 컴포지션 API를 이용해 컴포넌트를 만들 수 있다. 컴포지션 API는 setup 함수 내에서 사용..

@input 으로 실시간 입력 값을 확인할 수 있다. $event.target.value로 현재 input에 들어간 값을 알 수 있다. @input="$event.target.value = $event.target.value.replace(/[^0-9]/g, '')" replace() 함수로 실시간으로 숫자가 아닌값은 바로 빈값으로 노출하고 숫자인 값만 노출해준다.

vue3 버전을 사용하면서 v-data-table을 사용하려고 하는 데 작동이 정상적으로 되지 않는 이슈가 발생했다. 구글에 검색해보니 이런 경우가 종종 있는 것 같았고, 다른 사람은 vuetify3 버전엔 언제 생기냐는 문의 글을 남겨서 내 vuetify 버전을 살펴보니 3... 그래도 안되서 포기하고 있다가 댓글을 살펴보게 되었는데...ㅎㅎ... 이 댓글을 발견하고 바로 vuetify에 검색해보았다. Labs는 개발자가 알파 상태에서 완성되지 않은 구성 요소를 사용할 수 있는 방법이다. 지역으로 설정 전역으로 설정 import { createVuetify } from "vuetify" import { VDataTable } from "vuetify/labs/VDataTable" export defau..

1. install npm install @mdi/font -D 2. vuetify.ts 설정해주기 // Styles import '@mdi/font/css/materialdesignicons.css' import 'vuetify/styles' // Vuetify import { createVuetify } from 'vuetify' // mdi import import { aliases, mdi } from 'vuetify/iconsets/mdi' export default createVuetify({ // icon 설정 icons: { defaultSet: 'mdi', aliases, sets: { mdi, } } }) install시 최신 버전이 설치되니 위 코드로 해결되지 않으면 vuetify 공..