Vue js12 LocalStorage vuex-persistedstate vuex-persistedstate는 사용자 LocalStorage에 저장하여 만약 어떠한 데이터 변화를주고 새로고침을 하더라도 사용자 브라우저의 localstorage에 자동으로 저장해주는 라이브러리 중 하나이다. 사용방법 1. 설치 $ npm i vuex-persistedstate 2. 코드작성 //store.index.js import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ plugins: [ createPersistedState(), ], 3. 저장된 데이터 확인!(개발자도구-Application-Local Storage) 2022. 5. 15. Binding Helper Component Binding Helper JS Array Helper Method를 통해 배열 조작을 편하게 하는 것과 유사 논리적인 코드 자체가 변하는것x 쉽게 사용할 수 있도록 되어 있음에 초점을 잡는다. 종류 mapState mapGetter mapActions mapMutations 1. mapState computed와 Store의 state를 매핑시켜 매핑된 computed 이름이 state 이름과 같을때 문자열 배열을 전달 할 수 있음! computed: { todos() { return this.$store.state.todos }, } 위와 같은 코드가 import { mapState } from 'vuex' computed: mapState(['todos',]), 이와 같이 간단한 .. 2022. 5. 15. Vue Router 흐름구조 Vue Router 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 (spa여서 html은 한 페이지인데, url상으론 새로운 html을 보내주는 척 하는것) 1. vue router plugin 설치 $ vue add router 2. App.vue에 router-link를 index.js의 선언된 name으로 바꾸어 줄 수 있다. Home About 3. index.js에 경로 import 해줌 import HomeView from '../views/HomeView.vue' import AboutView from '../views/AboutView.vue' 4. const routes 에 path, name, component를 설정해줌 const routes = [ {.. 2022. 5. 11. emit 흐름구조 emit는 상급vue에게 하급vue event를 넘겨준다. 1. html에 이벤트를 만들어 준다. {{ myMessage }} 뀨 //3번 2. 이벤트에 맞는 function을 만들어준다. data: function() { return { childInputData: '' // 이부분 } 3. 이벤트에 맞는 method를 맞춰 만들어준다. methods: { childInputChange: function() { console.log('child!', this.childInputData) // 부모 컴포넌에게 1번인자 라는 이벤트를 발생 + 2번인자부터 데이터를 보냄 this.$emit('child-input-change',this.childInputData) // this.$emit으로 보낼 이벤트명과.. 2022. 5. 11. props 흐름구조 props 흐름구조 1. 상위 vue에 하위 vue를 불러와준다 import TheAbout from './components/TheAbout.vue' 2. 상위 vue에 등록해준다 export default { name: 'App', // 2.등록하기(register) components: { TheAbout, }, } 3. 보여준다. 4. props로 받아온 사실을 하위 vue에 등록시켜준다. 5. 하위 html에서도 이젠 상위vue의 것을 사용가능 {{ myMessage }} 표현하는데 있어 등록된 데이터를 꺼내오는 방식중 바인딩이 있다면 2022. 5. 11. node를 이용한 Vue 프로젝트 구조 vue 프로젝트 구조 node_modules node.js 환경의 여러 의존성 모듈 public/index.html vue 앱의 뼈대가 되는 파일 실제 제공되는 단일 html 파일 src/assets webpack에 의해 빌드 된 정적 파일 src/components 하위 컴포넌트들이 위치 src/App.vue 최상위 컴포넌트 src/main.js webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point 실제 단일 파일에서 DOM과 data를 연결했던 것과 동일한 작업이 이루어지는 곳 vue 전역에서 활용 할 모듈을 등록할 수 있는 파일 babel.config.js babel 관련 설정이 작성된 파일 package.json 프로젝트의 종속성 목록과 지원되는 브라우저에 대한 구성 옵션이 .. 2022. 5. 11. 이전 1 2 다음
