반응형 개발이야기/Vue3 [Vue] 사진첩 게시판 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 주요 메서드 7. 전체소스 1. 환경 node v16.15.0 or v18.12.0 vue2 vue/cli 5.0.8 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 요청 게시물 개수 설정 (설정값 로컬스토리지에 저장) 4. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ ContactsAPI.ts : API 호출 및 데이터 반환. ⌞ components ⌞ Layout ⌞Loading.vue : 로딩 애니메이션 ⌞ Item.vue : 게시물1개에 대한 컴포넌트 ⌞ List.vue : 게시물의 목록 컴포넌트 ⌞ Modal.vue : 모달창 컴포넌트.. 2022. 11. 17. [Vue] vue-class-component 형식에서 Mixin 사용하기 src/mixins/list.ts import { Vue } from 'vue-property-decorator'; import Component from 'vue-class-component'; import store from '@/store/index'; @Component export default class MixinVue extends Vue { public getList(target: string): void { store.dispatch(target); } } store의 action을 호출하기 위한 mixin 파일 src/App.vue 2020. 10. 13. [Vue] Vue3 ref, reactive 사용해보기 이번에 vue3에서 composition api가 추가됨으로써 vue2 사용자 시점에서 ref와 reactive에 대하여 간단한 예제 소스를 작성해 보았다. 1. data()와 ref() 기존 vue2에서 데이터를 핸들링 할때는 사실 반응형이라는것에 신경쓰지 않고 사용했던거 같다. {{text}} 2초 뒤에 text를 변경하는 예제이다. 반응형이라는것이 그냥 당연하다고만 여겨졌었다.. {{text1}} {{text2}} 동일한 vue3의 예제이다. 실행해보면 2초뒤에 text1은 변경이 되지 않고, ref를 사용한 text2는 변경이된것을 확인 할 수 있다. setTimeout안에서 vue2와는 다르게 this를 사용하지 않으며, ref에 접근하기 위해서는 .value로 접근해야 된다. 최종적으로 tex.. 2020. 9. 20. 이전 1 다음 반응형
