vue321 Vue3 기초 예제 - 입력 글자 수 표시(Computed) 입력 글자 수 제한을 사용자가 알기 쉽게 화면에 동적 입력 글자 수 표현*자세한 설명 생략 ▷ Computed 란? - template의 data 표현을 간결하게 하는 속성 - 가독성 ↑ 유지보수 ↑ *한눈에 알아보기- 사용하기 전 코드 ( {{ inMsg.replaceAll('\n', '').length }} 자 / 최대 {{ MAX }} 자 ( {{ inMsg.replaceAll('\n', '').length }} 자 / 최대 {{ MAX }} 자 ) - 사용 후 코드 ( {{ inMsgSize }} 자 / 최대 {{ MAX }} 자 ) ( {{ inMsgSize }} 자 / 최대 {{ MAX }} 자 ) ▷ 프로젝트 전체 구조 ▷ 기초 예제 - 입력 글자 수 표시*전체 코드*.. 2023. 11. 21. Vue3 기초 예제 - Local Storage Local Storage에 대한 간단한 설명과 이를 사용하는 기초 예제*이전 Vue3 기초 예제 - Toast 팝업에 이어서 진행(아래 관련 글 참고)*자세한 설명 생략 ▷ Local Storage 란? - 로컬에 존재하는 저장소 - 데이터를 브라우저에 반영구 저장 - 브라우저를 재시작해도 데이터가 남음 * 불필요한 데이터를 직접 삭제해줘야 하는 단점 ▷ 프로젝트 전체 구조*이전과 동일 한 부분 생략 ▷ 기초 예제 - Local Storage*사용자가 입력한 메시지를 Local Storage에 저장/삭제하는 예제*주석 이외 설명 생략 - LocalStorageUtil.jsimport * as CmmUtil from '@/module/CmmUtil'/** * Loc.. 2023. 11. 14. Vue3 기초 예제 - Toast 팝업(Primevue) 사용자로부터 입력받는 간단한 페이지와 Primevue ToastService 사용 예제*새로운 프로젝트로 진행*API 관련 설명 생략*자세한 설명 생략 ▷ 프로젝트 전체 구조 ▷ Primevue + ToastService 설치*vue-cli를 통해 Project 생성 후 진행 💡npm install primevue ▷ Axios 설치 *vue-cli를 통해 Project 생성 후 진행 *API 통신을 위한 설치 생략 가능 💡npm install axios ▷ 기초 예제 - Toast 팝업 - main.js*Primevue + ToastService 등록/** Vue */import { createApp } from 'vue'import App from './App.vue'/** PrimeVue.. 2023. 11. 13. Vue3 기초 예제 - Line Charts(Vue-ECharts) Vue-Echarts 라이브러리를 사용하여 Line Charts를 생성하는 기초 예제*Vue3 기초 예제 - Bar Charts(Vue-ECharts)에 이어서 진행*API 관련 설명 생략*자세한 설명 생략 ▷ Vue-Echarts 설치*vue-cli를 통해 Project 생성 후 진행*설치방법 생략*Vue3 기초 예제 - Bar Charts(Vue-ECharts) 참고 ▷ 기초 예제 - Line Charts - main.js*Vue-ECharts 라이브러리 등록*LineChart 추가/** Vue */import { createApp } from 'vue'import App from './App.vue'/** Router */import { router } from '@/module/router/M.. 2023. 11. 10. Vue3 기초 예제 - Bar Charts(Vue-ECharts) Vue-Echarts 라이브러리를 사용하여 Bar Charts를 생성하는 기초 예제*Vue3 기초 예제 - 날짜 검색(v-calendar)에 이어서 진행*API 관련 설명 생략*자세한 설명 생략 ▷ Vue-Echarts 설치*vue-cli를 통해 Project 생성 후 진행*설치방법 생략*Vue3 기초 예제 - Pie Charts(Vue-ECharts) 참고 ▷ 기초 예제 - Bar Charts - main.js*Vue-ECharts 라이브러리 등록*BarChart, GridComponent 추가/** Vue */import { createApp } from 'vue'import App from './App.vue'/** Router */import { router } from '@/module/ro.. 2023. 11. 9. Vue3 기초 예제 프로젝트 정리 Vue3 기초 예제 프로젝트 구조 및 소스 정리*관련 글이 점점 늘어나 하나로 통합하기 위함*이 글에서만 싱크 맞춤*주석 이외 설명 생략*자세한 설명 생략 ▷ 프로젝트 전체 구조 *순서대로 나열 ▷ Cmp.css▷ HeaderCmp.vue▷ LoginCmp.vue▷ MenuCmp.vue▷ A01C01.vue▷ ACM.vue▷ CCM.vue▷ CompositionTestCmp.vue▷ ForTestCmp.vue▷ IfTestCmp.vue▷ MenuNav.js▷ LoginStore.js▷ AxiosModule.js▷ CmmUtil.js▷ App.vue▷ main.js ▷ Cmp.vue@import url('https://fonts.googleapis.com/css2?family=Gugi.. 2023. 11. 6. Vue3 기초 예제 - 날짜 검색(v-calendar) Vue3 기초 예제 - Pie Charts(Vue-ECharts)에 v-calendar를 사용하여 날짜 검색 조건 추가*아래 관련 글 참고*API 관련 설명 생략*자세한 설명 생략 ▷ v-calendar 설치*vue-cli를 통해 Project 생성 후 진행 💡npm install v-calendar@next @popperjs/core ▷ 기초 예제 - 날짜 검색 조건 추가*프로젝트 전체 구조 관련 글 참고 - main.js*VCalendar 라이브러리 등록/** Vue */import { createApp } from 'vue'import App from './App.vue'/** Router */import { router } from '@/module/router/MenuNav.js'impor.. 2023. 11. 6. Vue3 기초 예제 - Pie Charts(Vue-ECharts) Vue-Echarts 라이브러리를 사용하여 Pie Charts를 생성하는 기초 예제*API 관련 설명 생략*자세한 설명 생략 ▷ Vue-Echarts 설치*vue-cli를 통해 Project 생성 후 진행 💡npm install echarts vue-echarts ▷ 기초 예제 - Pie Charts - main.js*Vue-ECharts 라이브러리 등록/** Vue */import { createApp } from 'vue'import App from './App.vue'/** Router */import { router } from '@/module/router/MenuNav.js'import { createPinia } from 'pinia'/**Prime : 테이블 라이브러리 */impor.. 2023. 11. 6. Vue3 기초 예제 - 테이블 라이브러리 적용(PrimeVue) "PrimeVue" 라이브러리를 사용하여 테이블을 생성하는 기초 예제*동적 데이터 테이블 생성, Axios API 통신, Modal open/close* 전체 조회 후 동적 페이징 *API 관련 설명 생략*자세한 설명 생략 ▷ PrimeVue 설치*vue-cli를 통해 Project 생성 후 진행 💡npm install primevue ▷ 기초 예제 - 테이블 라이브러리 적용 - main.js*PrimeVue 라이브러리 등록import { createApp } from 'vue'import App from './App.vue'import { router } from '@/module/router/MenuNav.js'import { createPinia } from 'pinia'import Prim.. 2023. 11. 2. 이전 1 2 3 다음 728x90 728x90
