728x90 반응형 IT/VueJS11 자식 컴포넌트로 데이터 보내기 ---------------------------------------------------------------------------------------------------------------- import MallHeader from "./components/MallHeader.vue"; import MallContent from "./components/MallContent.vue"; import MallFooter from "./components/MallFooter.vue"; export default { name: 'App', components: { MallHeader, MallContent, MallFooter }, data() { return { title: 'Vue 쇼핑몰', pr.. 2022. 8. 25. Component 로 만들어 사용하기 화면을 크게 1. Header 부분 2. Content 부분 3. Footer 부분 으로 나눠, 각 영역을 Component 로 만들어 조립하는 예제. 전체를 수용하는 App.vue 파일이 있고, 그안에 각 Component 를 끼어 넣는 구조임. 1. 프로젝트 생성 vue create vue-component 2. 실행 npm run serve 3. 실제 소스 3.1 App.vue ---------------------------------------------------------------------------------------------------------------- import MallHeader from "./components/MallHeader.vue"; import MallCont.. 2022. 8. 25. fake api server 사용 예제 서버를 개발하지 않고 테스트 할 수 있음. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 하단의 Resources로 내려가서 클릭해보면...데이터를 볼 수 있다. 통신을 위해서 Http Client는 Axios 를 사용 https://github.com/axios/axio.. 2022. 8. 24. Computed 메서드 예제 Hello world {{ title }} {{product.title}} : {{ product.price }} 재고총가격 {{calcTotalPrice}} 상품추가 export default { name: 'App', computed: { calcTotalPrice() { let totalStockPrice = 0; this.products.forEach(function (product) { totalStockPrice += product.price * product.stock; }) return totalStockPrice; } }, // beforeCreate() { // alert('before create'); // }, // created(){ // alert('created'); // },.. 2022. 8. 24. 이전 1 2 3 다음 728x90 반응형