본문 바로가기

vue.js4

[Vue.js] Chart.js 누적 막대 그래프 총합 표시하기 (Stack Bar, Total) Chart.js 플러그인 기본 옵션으로는 누적 막대그래프의 total 값을 나타내지 않는다. 이는 option 의 tooltips 로 간단하게 구현 가능하다. tooltips: { mode: "label", callbacks: { footer: function (data) { var total = 0; for (var i = 0; i < data.length; i++) { total += data[i].yLabel; // 세로막대는 yLabel , 가로막대는 xLabel } return "Total: " + total; }, }, },option 들을 정의할때 이 코드만 추가하면 된다. 막대 개별 값과 총 합을 확인 할 수 있다. 2022. 10. 25.

Vue.js(4) Router 및 Axios, async await 개념 Vue Router 싱글페이지 애플리케이션 구현할 때 사용하는 라이브러리 이다. 페이지간에 이동하는 기능 구현할때 사용한다. 라우터 인스턴스 생성 var router = new VueRouter({ ... }) 라우터 옵션 추가 가능 routes : 라우팅 할 URL 과 컴포넌트 값 지정 path : 페이지 url component : 해당 페이지가 뿌려질 컴포넌트 mode URL 의 해쉬 값 제거 속성 mode=''history' ===> # 가 기본값으로 붙는 것을 제거 인스턴스에 라우터 인스턴스 등록 new Vue({ router: router ...}) 설치 https://router.vuejs.org/installation.html 공식사이트 설치 링크 npm install vue-router .. 2022. 10. 9.

Vue.js(3) Vue 인스턴스 속성 및 컴포넌트 Vue 인스턴스 new Vue({ el:, template:, data: , methods: , created: , watch: , }); el: 인스턴스가 그려지는 화면의 시작점 template: 화면에 표시할 요소 data: 데이터 methods: 이벤트 함수들 created: 라이프사이클 중 하나 watch: data에서 정의한 속성이 변경됐을 때 추가 동작을 정의 computed: 데이터를 계산한 결과를 속성으로 사용하기 위해 사용 methods 함수저장소 computed 데이터의 값에 따라서 바뀌는 값을 정의하는 속성이다. 템플릿 내에 표현식을 넣을 수 있다. 하지만 간단한 연산일 때만 이용하는 것이 좋다. {{ message.split('').reverse().join('') }} 이렇게 연산.. 2022. 10. 9.

[Vue.js] SpringBoot + Vue.js 404페이지 해결 문제발생 HTML5 히스토리 모드 vue-router 의 기본 모드는 hash mode 로, URL 해시를 사용하여 전체 URL 을 시뮬레이트 하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다...!? # 해시를 제거하기 위해 라우터의 history 모드를 사용할 수 있다. SPA(Single Page Application) 특성상 vue는 index.html 파일 하나로 관리한다. 기본적으로 URL 을 입력하면 서버접속을 먼저 시도하기때문에 서버설정이 없는 클라이언트 앱이라 사용자가 직접 URL 에 접속하면 404 에러가 발생한다. 해결방안 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면된다! SPA 앱에 있는 index.html 페이지를 매핑하도록 하면 된다. ==> 모든 요청은 서버에.. 2022. 10. 3.

이전 1 다음

티스토리툴바

티스토리툴바