본문 바로가기

IT/Vue.js4

css module 컴포넌트에서 CSS를 모듈화 하여 사용 2020. 7. 28.
컴포넌트에 데이터 넣기 - chart.js 부포에서 자식으로 데이터를 전송하기 위해서는 props를 사용한다. 아래와 같이 차트 컴포넌트를 생성해준다. props를 통하여 받아올 데이터에 대해 설정해준다. 컴포넌트를 사용할 화면단에서 데이터를 생성해준다. data () { return { sampleData: { datasets: [{ data: [10, 20, 30, 20, 10], backgroundColor: //색상 }], labels: ['라벨1', '라벨2', '라벨3', '라벨4', '라벨5'] } } } } 하위 컴포넌트에 props를 통해 데이터를 전달해준다. 2020. 5. 4.
Router 라우트에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려준다. 각 vue 폴더 별로 index.vue (ex - /app/chart/index.vue) App.vue main.js import Vue from 'vue' import App from './App.vue' import {store} from "./state/state"; import router from "./router"; Vue.config.productionTip = false new Vue({ store, router, render: h => h(App), }).$mount('#app') router.js import Vue from 'vue'; import VueRouter from "vue-router"; Vue.use(V.. 2020. 5. 4.
Vue.js, 컴포넌트 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크, 기존의 프레임워크와 통합이 쉽다는 것이 장점이다. 컴포넌트는 미리 정의된 옵션을 갖는 Vue 인스턴스이다. HTML 엘리먼트를 확장하여 재사용 코드를 캡슐화하는데 도움을 준다. 전역 컴포넌트 컴포넌트의 전역 등록은 일반적인 프로그래밍의 전역 변수와 유사하다. 인스턴스 생성 후 어느 페이지 또는 컴포넌트에서 글로벌하게 사용할 수 있다. Vue.component(tagName, options) 지역 등록 컴포넌트 등록에 있어서 전역등록 보다는 지역등록을 가장 많이 쓰고 보편적으로 사용한다. 웹팩같은 빌드 시스템을 사용하면 전역등록 된 사용되지 않는 모든 컴포넌트가 빌드에 포함되기 때문이다. 2020. 5. 4.

티스토리툴바