희락코딩

vuex 사용법 vuex는 props와 custom event로 데이터 주고받는게 힘들때 사용합니다. vuex를 설치하면 js 파일하나에다 모든 데이터를 저장 할 수있습니다. 그럼 모든 컴포넌트를 그 데이터를 직접 꺼내고 수정할 수 있어 프롭스 필요없이 모든 컴포넌트가 데이터에 직접 접근이 가능합니다. 그리고 vue파일과 데이터, 규모가 클 때 사용합니다. 리엑트에서 리덕스 개념으로 생각하면 편합니다. vuex 셋팅 우선 터미널에서 vuex를 설치합니다. npm i vuex@next --save그리고 js파일을 만들어 아래와 같이 기본 셋팅을 합니다. // store.js import (createStore) from 'vuex` const store = createStore({ state(){ ..

mitt mitt은 상위-상위 컴포넌트나 아니면 동떨어진 컴포넌트에 데이터를 전송 할 때 사용하면 매우 유용합니다. 사용법도 간단합니다. 우선 설치부터 하기! npm i mitt설치가 끝나면 main.js파일에 가서 mitt 환경 셋팅을 합니다. import { createApp } from 'vue' import App from './App.vue' // mitt 라이브 셋팅 import mitt from 'mitt' let emitter = mitt(); let app = createApp(App); // 글로벌한 변수 보관함 app.config.globalProperties.emitter = emitter; app.mount('#app') 사..

slot문법 자식이 부모데이터를 사용하고 싶을때 사용합니다. 다만 프롭스는 src, style속성에서도 사용가능하지만 slot은 html태그이기 떄문에 html태그처럼만 사용이 가능합니다. 1. 자식 컴포넌트 태그를 이용해서 데이터를 표시할 곳을 정합니다. 2. 부모 컴포넌트 부모는 데이터 이렇게 자식컴포넌트 사이에 데이터를 작성해서 보냅니다. {{filterData[i]}}

vue Nested routes & push 특정 페이지 안에서 route를 나누고 싶을 때 사용한다. 예를들어 /detail/0/comment로 접속하고 싶다면 /detail/0 뒤에 children을 만들어 추가해주면 된다. 여기서 주의할 것은 children의 path에 /을 제외해서 상대경로로 적어준다. 안녕하세요 예를 들어 위에 있는 children 컴포넌트를 만들었다고 가정을 하고 시작했을때 이컴포넌트를 아래와 같이 등록 해준다. // router import { createWebHistory, createRouter } from "vue-router"; import List from './views/List.vue'; import Home from './views/Hom..

vue-router 우선 vue-router를 설치를 합시다. 보통 4버전이 범용적으로 씁니다. npm i vue-router@4주의할점은 npm run serve를 하기 전에 설치하는게 바람직합니다(모든 라이브러리) 라우터 파일 만들기 src폴더 안 아무데나 라우터 파일을 만듭니다. 라우터의 기본적인 양식은 아래와 같습니다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import한 컴포넌트, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default rout..

vue url 파라미터 URL 파라미터를 만들기 위해 router의 path안에 "/detail/:id"과 같이 /:작명을 하면 된다. (그럼 /detail/0, 1, 2... 가능) 예를들어 해당 라우터의 순번을 표현하려면 {{blog[해당하는 id번호].title}} 에서 []안에 $route.params.id를 넣는다.현재 URL 정보는 $route에 담겨있기 떄문에 $route.params는 파라미터자리에 기입된 것을 알려준다. // router import { createWebHistory, createRouter } from "vue-router"; import List from './views/List.vue'; import Home from './views/Home.vue'; import ..

vue 애니메이션 태그 vue에선 애니메이션을 주는 특별한 태그가 있습니다. 일반 적인 css로 할땐 아래와 같습니다. 핵심 포인트는 :class={클래스명 : 조건} 입니다. 이럴때 isModal이 true일 때 class명인 end가 적용이 됩니다. .start { opacity: 0; transition: all 1s; } .end { opacity: 1; } 그렇다면 vue에서 제공하는 transition 태그를 이용하기 위해선 그냥 감싸고 name="클래스명" 으로 작성하면 됩니다. 예시는 아래와 같습니다. css는 아래와 같고 퇴장시 애니메이션을 주고 싶으면 스타일에서 enter 대신 leave로 바꾸면 됩니다. /* 시작시 */ /* 애니메이션 동작 전 상태 */ .fade-enter-fro..

watch 사용법 watch는 특정 데이터가 변경될 때마다 실행되는 코드를 적을 수 있습니다. 즉 감시자 역할을 합니다. 사용 법은 간단합니다. data(){ return { month : 1, } }, watch :{ month(a){ // month가 변경될 때 실행할 코드 } } }, watch안에 month()는 month데이터를 감시하고 그안에 month가 변할 때마다 실행하고 싶은 코드를 적어주면 됩니다. 참고로 파라미터는 아무거나 작명해서 사용해도 상관 없고 그파라미터는 month가 변경될 값을 의미합니다. 참고로 두개까지 작명이 가능한데 첫번째는 변경될 값, 둘째는 변경전 값을 의미합니다. 예를 들어 13이상 입력을 방지하고 싶을때 아래와 같습니다. data(){ return { month..