Vue

어드민 페이지가 필요한 상황인데 빨리 개발하기 위해 어떤 라이브러리를 쓸지 찾아보다 vuefity를 발견하게되어 vuefity를 통해 Data table을 만들어보았다.vuefity문서에서 데이터 테이블은 labs라는 출시되기 전 개발중인 탭(?)에 있다.데이터 테이블

vuetify 3버전을 이용한 프로젝트 진행 중 range datepicker가 필요했는데, vuetify 3버전에서는 range기능을 제공하지 않아서 Vue DatePicker를 사용하게 되었다.Vue DatePicker 공식문서installmain.js 설정공통으로

vue 2.x 버전에서 사용되던 기존의 API 스타일로 컴포넌트를 작성할 대 사용되는 방식이다.data, methods, computed, watch등 속성을 직접 정의하여 컴포넌트를 구성한다.간단하고 직관적이지만, 큰 규모의 애플리케이션에서는 컴포넌트의 구성 요소들이

하나의 컴포넌트내에서 스크롤이 필요한 영역만큼만 스크롤을 주고 특정 버튼 클릭시 요소가 최하단에 생성되어 스크롤도 최하단으로 내려주는 코드를 작성하였다.

vue는 단방향 data binding directive를 사용하는 것을 권장하는데, 단반향 data binding을 구현하기 위해 defineProps, defineEmits를 사용한다.defineProps는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용

vue에서 양방향 데이터 바인딩을 구현하는 디렉티브로 입력 폼 요소와 vue 인스턴스의 데이터를 바인딩할 수 있다.바인딩하면 입력한 값을 자동으로 vue 인스턴스의 데이터에 반영하고,vue 인스턴스의 데이터가 변경되면 입력 폼 요소에도 자동으로 반영된다.v-model

Vue에서 비동기적으로 DOM 업데이트 이후 콜백을 실행하기 위해 실행되는 메서드Vue의 데이터가 업데이트되면 DOM 업데이트도 자동으로 처리되지만, 데이터 업데이트 후 바로 DOM 업데이트가 되지 않을 수도 있는데 이런 경우 nextTick을 사용한다!nextTick

vue tiptap3 공식문서 바로가기 tiptap3을 이용해 text editor로 작성후 저장, 수정을 구현해보았다! install 구현 코드

.env 환경변수 선언 방법.env 환경변수 사용 방법위와 같이 적용하면 환경마다 다른 .env파일을 사용할 수 있다.

vue-router에서 컴포넌트를 import 할 때, 정적과 동적 2가지 방법으로 import할 수 있다.StaticComponent는 정적 import로, 앱이 시작할 때 모든 컴포넌트를 한 번에 불러와 로딩 시간이 길어질 수 있다.DynamicCompoent는 해

vue의 slot은 부모 컴포넌트에서 자식 컴포넌트로 내용을 전달하는 데 사용된다.부모 컴포넌트(App.vue)와 자식 컴포넌트(SlotItem.vue)에서 slot을 사용할때는 부모컴포넌트에서 자식컴포넌트 작성한 후 template 태그안에 작성해주어야한다.템플릿 태