- Vuex https://vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? Pinia is now the new default The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different na vuex.vuejs.org 위 문서를 참고해서 여러 방법을 익혀보자, vue 2버전에서는 이벤트 버스도 사용했다고 하는데 vue 3에서는 지원이 중단 되었다고 ..
- axios 라이브러리 fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다. npm install axios해준다음 script부분에 먼저 import를 해준다.
- vue-router 기본적인 프로젝트 주소에서 다른페이지로 라우팅 할때 쓰는 도구이다. 사이트주소/detail, 사이트주소/detail/0, 사이트주소/mypage, 사이트주소/home 이런식으로 사용할 수 있다. 사용하기 위해선 설치먼저 해줘야한다. npm install vue-router@4 https://router.vuejs.org/ Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: 컴포넌트, } ..
https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram Lifecycle Hooks | Vue.js vuejs.org https://joshua1988.github.io/vue-camp/vue/life-cycle.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8 Instance Lifecycle | Cracking Vue.js 인스턴스 라이프 사이클 인스턴스 라이프 사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 ..
- 정렬, 데이터보존 [...array] 1)배열 데이터 정렬하기 그냥 배열.sort()를 사용해도 정렬은 되지만 문자 정렬이 기본이다. 그래서 아래와 같이 함수를 만들어줘 a,b파라메터를 a-b형태로 써줘야 숫자형 정렬이 된다. var array = [3,5,2]; array.sort(function(a,b){ return a-b // 문자 정렬이 아니라 숫자형 정렬하기 위함 // 음수가 나오면 왼쪽으로 보내는 방식임 외워서 쓰면 됨 }); 2)Object데이터 정렬하기 아래와 같이 만들어진 데이터를 정렬하려고 한다. 정렬 방식은 비슷하지만 약간 다른 방식이 필요하다. [{ id : 0, title: "Sinrim station 30 meters away", image: "https://codingap..
- CSS 애니메이션 ex)transition 1.일반 CSS사용하는 방식 class명을 줘서 시작과 끝을 정하는 방식이다. 변수를 클래스에 담을 때 :class와같이 사용하여 설정한다. 가능한 방법이지만 Transition을 사용하면 더욱 편하다. ...... .start{ opacity: 0; transition:all 1s; } .end{ opacity: 1; } ...... 2.Vue.js제공하는 Transition사용하기 transiton을 사용하고싶은 컴포넌트를 으로 감싸주고 name으로 이름을 지어준다. 그리고 style부분에서 컴포넌트 시작시, 종료시 2가지 경우가 있다. 1)시작시 이름-enter-from, 이름-enter-active, 이름-enter-to 로 3가지 경우로 나눠주고 2..
- v-model (input값 받기) 1) @input 사용하기 이와같이 input택에 입력 이벤트가 들어오면 month라는 변수에 입력받는 값을 넣게 만들어 줄 수 있다. 2) v-model 사용하기 그리고 좀더 편하게 사용하려면 v-model을 사용하면 된다. 설명하자면 input에 입력한 값을 month에 저장하라는 의미이다. 3)이외에도 select, textarea같은 속성에도 사용할 수 있다. 그리고 입력받는 값에 대한 min, max값을 지정할 수 도 있지만 watcher를 통해 관리하는게 더 정확하다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} {{ month }}개월 선택함 : {{ oneroom[roomNumbe..
- Props 1)Props보낼 떄 다양한 자료 입력이 가능하다. 그리고 직접 데이터 입력도 가능하다. //혹은 배열등 다 가능 // data="문자자료" // :data="숫자자료: 그리고 : 유무에 따라 문자냐 숫자냐 자료형의 차이가 있다. 2)object자료형 한번에 보내거나, 각각 보내거나 둘다 가능하다. - custom event 1)props로 보낸 데이터는 수정하면 안된다. (Read-only) 2)부모컴포넌트의 데이터를 수정하고 싶으면 custom event를 쓴다. 부모에게 $emit('작명',데이터)을 써서 메세지를 보낸다. CardList.vue {{ oneroom.title }} ........ App.vue의 하위 컴포넌트인 CardList.vue에서 부모컴포넌트의 데이터를 수정하..