vue(20)
-
Vuex (설치/셋팅) 설명
1. 설명 Vue에 컴포넌트간 부모/자식 데이터 전달은 이벤트(Event)와 프롭스(Props)로 데이터를 전송한다. 프로젝트가 간단하고 작으면 event와 props로도 충분히 운영이 가능 하지만 만약 커진다면 유지보수가 어려워고 헷갈리게 쉬운 구조가 되어 개발에 속도를 늦추게 된다. 그래서 나온게 Vuex 이다. Vuex는 데이터를 View( Vue Components ) => Actions => Mutations => State => View 로 한 방향으로 진행 되는 규칙이다. State : 사용하는 변수이름 / 초기값 을 설정 해 준다. Actions : Component에서 설정 한 이벤트가 발생하면 Action으로 이벤트를 받는다. Mutations : Actions에서 받은 이벤트를 계산 ..
2021.09.11 -
6. Node 프로젝트 가계부 만들기 (Vue, 라이브러리 설치)
npm i axios Vue2와 Vue-cli 이용해서 프로젝트를 제작한다. 1. Vue-cli를 설치한다. npm i -g @vue/cli 2. Vue-cli를 사용하여 프로젝트 생성 ex) vue create test-vue vue create Vue2 Default 로 설정 하고 엔터를 입력하면 자동으로 프로젝트가 생성된다. 3. 필요한 라이브러리들을 설치 해 준다. 프로젝트 디렉토리로 이동하여 axios, vuex, dayjs, vue-router, vuex-persistedstate를 설치한다. npm i axios vuex dayjs vue-router vuex-persistedstate axios : 백엔드 서버와 통신하기위한 라이브러리 vuex : 데이터를 중앙에서 관리하는 저장소 dayj..
2021.09.11 -
Vue (Vuetify) v-from, v-text-field 에서 유효성 검사 하기
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..
2021.09.01 -
Vue-router 설정 / 네비게이션 가드 하는 방법
* 환경 : 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', ..
2021.08.25 -
Vue, Pagination, Vuetify table을 이용한 페이징 네이션
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옵션이 있어서 배열 내부의..
2021.02.24 -
Vue에서 Azure blob storage에 파일 업로드 하기 Express 사용
ejs처럼 프론트엔드와 백엔드가 같은 서버를 쓰면 전달이 잘되지만, 프론트 서버가 있어 통신을 할때 방법은 따로 있다. vuetifyjs를 사용해서 프론트를 만들었다. 구동방식은 비슷하다. 업로드 먼저 new FormData()를 사용해서 form 형식에 데이터와 파일을 넣어주면 된다. 하지만 주의 할 점이있다. const fd = new FormData() fd.append('name', this.name) fd.append('blobData', this.blobData, { type: '*/*' }) 이 부분에서 fd.append('name', this.name)같은 text값은 무조건 file 전에 있어야 한다. fd.append('blobData', this.blobData, { type: '*/..
2020.10.29