안녕하세요, Yo플레입니다. 오늘은 vuejs의 vuex에서 sessionStorage 사용법을 알아보겠습니다. 사실 vuex를 사용하였을 때 sessionStorage의 동작이 이상해서 이 글을 포스팅하게 되었습니다. 예제 보러 가기 App.vue SessonComp.vue SetDataToVuex GetDataFromVuex fromVuex : {{ sessionData }} getDataFromSessionStorage fromSessionStorage : {{ sessionData2 }} store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { test:..

개발 2021. 1. 17. 23:13

안녕하세요, Yo플레입니다. 오늘은 vuejs의 vuex를 이용한 Component간 데이터 동기화를 해보겠습니다. vuejs를 개발하다보면 Component간의 데이터 동기화가 필요한 때가 있습니다. vuex를 통해 데이터를 동기화하면 되는데, 어떤 이유에서인지 데이터가 동기화가 안되는 경우가 있습니다. 이럴 때는 데이터흐름을 살펴보는것이 좋습니다. 예제 보러 가기 App.vue Case1 Case2 CompA1 CompA2 CompB1 CompB2 main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an al..

개발 2021. 1. 17. 19:40

안녕하세요, Yo플레입니다. 오늘은 vue.js의 arccordion 접기 기능을 만들어보겠습니다. 상위 컴포넌트인 HelloWorld.vue에서 transition을 이용하여 Arccordion.vue를 조작하는 방법입니다. 예제 보러 가기 App.vue HelloWorld.vue Top Div Toggle Button Bottom Div MyComp.vue Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam et doloribus porro voluptatum? Earum eaque aut incidunt ducimus, eum in nostrum numquam tenetur odio voluptas deserunt, quas doloru..

개발 2021. 1. 17. 15:05

안녕하세요, Yo플레입니다. 오늘은 vue.js의 data, computed, watch간의 관계에 대해서 알아보겠습니다. 예제 먼저 보겠습니다. 예제 보러가기 data : text : text : {{text}} computed(data) : text : {{computedText}} watchedText : {{watchedText}} watchedComputedText : {{watchedComputedText}} 설명 화면에 입력내용을 vue에 저장하기 input에 v-model을 선언하고 data 변수명을 써주면 입력하는 내용이 vue.js의 data의 변수에 즉시 저장됩니다. data의 내용을 화면에 표시하기 {{ 변수명 }} 으로 data의 변수명을 화면에 표시할 수 있습니다. data da..

개발 2020. 9. 16. 10:39