프론트엔드/Vuejs
-
[vue] vue skeleton 사용하기프론트엔드/Vuejs 2020. 7. 13. 22:34
프론트에서 개발하다보면 api 중에 시간소요가 1초 이상 소요되어 화면에 랜더링 되기 전에 어떤 구성된 화면이 나왔으면 하는 순간이 있습니다. 왜냐하면 api 로 데이터를 받아올 때 까지 로딩되는 화면에는 아무런 리스트 화면도 보여주지 않으면, 사용자 입장에서 어색한 느낌이 있습니다. 이럴때 쓰는 로딩 방식보고 skeleton 로딩이라고 합니다. vue 에 라이브러리가 있나 찾아보았는데, 라이브러리 보다 css 만으로도 처리가 가능한 리소스를 찾아 내용 정리합니다. 1. vue skeletonBox 소스 2. 사용예시 import SkeletonBox from '@/components/common/SkeletonBox' export default { name: 'ModalAttribute', compon..
-
[Vue] vue eventlistener(이벤트리스너) 추가 제거프론트엔드/Vuejs 2020. 6. 14. 22:23
eventLister 제거시 같은 메소드를 사용해야 함. 콜백 메소드로 window.addEventListener('keyup', function(event) { //~ }) 다음 처럼 사용시 이벤트 제거가 안됨. event 는 vue beforeDestroy 생성주기에 작성을 해야함. 안그러면 event 가 계속 살아 있음. mounted () { // let context = this window.addEventListener('keyup', this.doStuff) // enter 클릭시 alert 창 닫기 }, beforeDestroy () { window.removeEventListener('keyup', this.doStuff) }, methods: ..
-
[Vue] vue eventbus 사용프론트엔드/Vuejs 2020. 6. 14. 22:21
Vue EventBus // 이벤트버스 생성 var EventBus = new Vue() // 이벤트 발행 EventBus.$emit('message', 'hello world'); // 이벤트 구독 EventBus.$on('message', function(text) { console.log(text); }); EventBus 를 전역으로 사용한다면 $off 도 등록을 해야함. 안하면 이벤트 구독이 계속 생겨나서 계속 이벤트가 발생됨. 참고문헌 http://vuejs.kr/jekyll/update/2017/02/13/vuejs-eventbus/
-
vue router프론트엔드/Vuejs 2020. 6. 14. 22:20
import Vue from 'vue' import Router from 'vue-router' import ExampleRouter from './modules/example' import Login from '@/components/common/Login' import store from '@/vuex/store' const requireAuth = () => (from, to, next) => { let auth = store.getters.getIsAuth if (auth) { return next() // isAuth === true면 페이지 이동 } next('/') // isAuth === false면 다시..
-
vue checkbox 사용프론트엔드/Vuejs 2020. 6. 14. 22:18
하나의 체크박스는 단일 boolean 값을 가짐 하지만, true false 외 다른값 가지도록 설정 가능 true 및 false 값 설정 :true-value="1" :false-value="0" 일반 예제 Jack John Mike 체크한 이름: {{ checkedNames }} //checkedNames -> ["Jack", "Mike", "John"] new Vue( { el: '...', data: { checkedNames: [] } } ) 참고문헌 https://takeuu.tistory.com/39
-
vue 를 스프링부트 에서 연동프론트엔드/Vuejs 2020. 6. 14. 22:17
스프링부트 프로젝트 일단 생성 vue 프로젝트 생성 스프링부트 제일 상위 루트 terminal 에서 명령어 작성 vue-cli 2.X vue init webpack frontendvuecli-2.X시작하기 프로젝트 구조 ├── src/ # Spring 소스코드 디렉터리 │ └── main/ │ │ ├── java/ │ └── resources/ │ ├── static/ │ ├── templates/ │ └── application.properties ├── target/ # Spring 빌드 디렉터리 │ └── ... ├── frontend/ # Vue.js 루트 디렉터리 │ ├── src/ │ └── ... └── pom.xml빌드 vue 빌드 파일 설정 파일명 frontend/config/index...
-
vue cli 로 시작하기프론트엔드/Vuejs 2020. 6. 14. 22:16
vue cli 2.X // vue-cli 전역 설치 npm install -g vue-cli프로젝트 생성 // vue init vue init webpack my-project//실행 npm install npm run dev 로 실행vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다. 제공되는 템플릿은 vuejs-templates 에 각각의 레퍼로 저장되어 있다. vue list 명령어를 통해서 제공되는 템플릿 리스트를 확인할 수 있다. vue cli 3.X //설치 npm install -g @vue/cli버젼으로 설치 npm install -g @vue/cli@^3.1.0 npm r -g vue-cli --지우고 다시 설치 //시작하기 vue create my-project//실행 npm r..