개발/Vue10 [Vue] Vuex와 Store Store를 공부하려다보니 자연스레 Vuex를 접하게 되었다. 여러 자료들을 내가 이해하기 쉽게 정리해 보았다. 출처:https://vuex.vuejs.org/kr/ https://wbluke.tistory.com/32 https://kr.vuejs.org/v2/guide/state-management.html https://medium.com/@itsnothingg/%EB%8F%84%EB%8C%80%EC%B2%B4-vuex%EA%B0%80-%EB%AD%90%EA%B8%B8%EB%9E%98-ad5bc15f2371 https://bbosong-develop.tistory.com/3 https://joshua1988.github.io/web-development/vuejs/vuex-start/ 서론 [ Vu.. 2022. 12. 28. [Vue] Vue02 뷰 cli 설치 intellj 터미널에서 'npm install -g @vue/cli' 입력하여 설치 vue create '프로젝트 이름' 으로 프로젝트 생성 실행 시 yarn serve 뷰 라우터 src→ router→index.js 이 곳에서 이동할 페이지들을 설정해준다. path: 브라우저에서의 URL name: 페이지 이름(Unique) component : 컴포넌트 삽입 src→ App.vue 주석 참조 싱글페이지 어플리케이션 페이지 이동없이 컴포넌트만 바뀌는 것 router-link가 path가 /인 것을 찾아보니 해당 루트는 Home 컴포넌트를 갖고 있다 Home 컴포넌트는 Home.vue이고 Home.vue로 가보니 HelloWorld 컴포넌트를 가지고 있고 그 내용을 보여주게 된다. 싱글.. 2022. 12. 28. [Vue] Vue01 뷰 인스턴스 생성 data 상세 메소드 사용 nextYear:function() 과 그냥 바로 otherMethod() 로 메서드 이름을 쓰는 것은 같다. 데이터 바인딩 input 태그에 v-bind:value="inputData"로 쓰지만 v-bind를 생략하고 콜론만 써서 :value="inputData"로 축약해 쓸 수 있다. 이벤트 button 태그의 onclick 대신에 v-on을 붙혀 이벤트를 걸 수있다. .prevent 이벤트 수식어를 사용해 form이 submit 한 뒤에 페이지를 다시 로드 하는 것을 막았다. 이벤트 수식어 데이터 양방향 바인딩 input 태그의 내용이 바뀌는 즉시 바로 밑에 {{text}} 부분에 띄우고 싶다 keyup 이벤트에 v-on을 걸어 target.value의 .. 2022. 12. 28. [Vue] V-model : Vue2와 Vue3에서의 차이 Vue2 Value prop을 전달하고, input 이벤트를 emit 하는 것 부모 컴포넌트에서 데이터 prop을 통해 자식 컴포넌트로 데이터를 전달하고, 그 데이터를 전달 받은 자식 컴포넌트는 이벤트 전달($emit)을 통해 다시 부모로 보내주는 구조 //v-model로 축약 Vue3 modelValue prop을 전달하고 update:modelValue이벤트를 emit하는 것과 같다. //v-model로 축약 2022. 12. 13. 이전 1 2 3 다음
