vue-chart.js와 같은 vue에서 chart.js를 쉽게 사용할수있는 라이브러리가 있지만 chart.js를 그대로 사용하는게 react와같은 프레임워크가 다른 곳에서도 사용하기 좋을꺼같아 chart.js만 사용하여 데이터를 만들어 보았다. 1. 설치방법 npm i chart.js 2. 이용 순서 2-1. vue 파일 생성 2-2. chart.js를 import 2-3. 차트를 그리기 위해 canvas태그를 생성 2-4. 차트를 만들기 위한 데이터, 함수 생성 2-1. vue 파일생성 BarChart2.js 라는 bar차트를 생성한다. bar chart 2-2. chart.js import chart.js가 오래되어 지난 버전을 설명하시는 블로그가 있지만 3.6버전에서는 오류를 발생시킨다. 3.6...

Vue에서 개발을 진행 할 때 쿠키에 데이터를 넣지않는 이상 새로고침 시 store에 state값이 초기화가 되어 버린다. vuex-persistedstate를 이용하여 sessionStorage, localStorage 에 저장하여 새로고침이 되어도 데이터를 유지가 된다. 설치 npm i vuex-persistedstate 사용법 state가 저장된 파일에서 vuex-persistedstate를 import하여 사용한다. sesstionStorage로 세팅 새로고침이 되어도 데이터를 유지하려면 reducer 안에 초기화 되면 안되는 state 변수들을 넣어준다. ex) vuex-persistedstate 세팅 import Vue from 'vue' import Vuex from 'vuex' import..

1. 설명 Vue에 컴포넌트간 부모/자식 데이터 전달은 이벤트(Event)와 프롭스(Props)로 데이터를 전송한다. 프로젝트가 간단하고 작으면 event와 props로도 충분히 운영이 가능 하지만 만약 커진다면 유지보수가 어려워고 헷갈리게 쉬운 구조가 되어 개발에 속도를 늦추게 된다. 그래서 나온게 Vuex 이다. Vuex는 데이터를 View( Vue Components ) => Actions => Mutations => State => View 로 한 방향으로 진행 되는 규칙이다. State : 사용하는 변수이름 / 초기값 을 설정 해 준다. Actions : Component에서 설정 한 이벤트가 발생하면 Action으로 이벤트를 받는다. Mutations : Actions에서 받은 이벤트를 계산 ..

Vuetify에서 v-text-field에 유효성 규칙을 지정하는 방법 1. v-text-field 생성 v-text-field를 만든다. :rules에 가져올 규칙이름을 넣어준다 2. 규칙 생성 data: () => ({ email: '', password: '', passwordShow: false, autoLoginCheckBox:false, emailRule:[ v => !!v || '이메일을 입력해주세요.', v => { const replaceV = v.replace(/(\s*)/g, '') const pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/ return pattern.t..

* 환경 : vue-cli 4.x 버전 / vue2를 사용 한 환경입니다. 1. vue-router 설치 npm install vue-router 2. router 기본 파일 만들기 루트 폴터에 /router/router.js 파일을 생성한다. //router.js import VueRouter from 'vue-router' import Vue from 'vue' import store from '../store/storeIndex' Vue.use(VueRouter) //1 const router = new VueRouter({ //2 mode:'history', routes: [ //3 { path: '/', redirect: '/web/rank' }, { //4 path: '/web/error', ..

vuex, axios, vuetify를 이용한 페이징 네이션 axiox를 이용하여 백엔드에서 데이터를 받아온다. 연결 방법은 crispypotato.tistory.com/21 여기! vuetify data-table : vuetifyjs.com/en/components/data-tables/#header Data table component The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes so... vuetifyjs.com template script 설명 => footer-props가 페이징네이션을 변경 watch에 deep옵션이 있어서 배열 내부의..