로메오의 블로그

vue-cli 나 ng-cli로 프로젝트를 생성하면 탭사이즈가 스페이스 2로 설정되어 있지만 vsCode는 스페이스 4가 되어 있는 경우가 있습니다. Space:4 부분을 눌러서 스페이스 2로 변경해도 스페이스 2로 변경되지 않고 스페이스 2가 2개 들어가는 이상한 현상이 생깁니다. Preference > Setting으로 갑니다. User > Vetur 에서 Tab Size 4를 2로 변경합니다. Format Document를 해보면 원하는 포맷으로 설정됩니다.

VUE.JS 목록 $ mkdir src/store $ touch src/store/store.ts import Vue from 'vue'; import Vuex, {StoreOptions} from 'vuex'; import moduleA from './moduleA.store'; import moduleB from './moduleB.store'; Vue.use(Vuex); export interface RootState { data: string; } const store: StoreOptions = { modules: { moduleA, moduleB, }, state: { data: 'root', }, mutations: { setData(state, data: string) { state.dat..

VUE.JS 목록 Vuex Store의 기본 형식 입니다. $ touch src/store.ts store.ts 파일을 생성하고 아래와 같이 코딩 합니다. import Vue from 'vue'; import Vuex, {ActionContext, StoreOptions} from 'vuex'; Vue.use(Vuex); interface State { count: number; } const store: StoreOptions = { state: { count: 0, }, mutations: { setCount(state: State, count: number) { state.count = count; }, }, actions: { increase({state, commit}: ActionContext..

VUE.JS 목록 $ touch src/components/MyMixins.vue MyMixins.vue를 생성하고 아래와 같이 코딩합니다. $ touch src/components/Screen1.vue Screen1.vue을 생성하고 아래와 같이 코딩합니다. 버튼 안녕 src/component/Home.vue console창에 myShow 함수와 show 변수를 확인 할 수 있습니다. 버튼도 잘 작동합니다. $ touch src/components/Screen2.vue Screen2.vue도 생성하고 아래와 같이 코딩합니다. 버튼2 안녕2 /src/component/Home.vue를 아래와 같이 수정합니다. VUE.JS 목록

VUE.JS 목록 $ touch src/components/Checkbox.vue Checkbox.vue를 만들고 아래와 같이 코딩합니다. src/component/Home.vue {{ text }} VUE.JS 목록

VUE.JS 목록 src/component/Home.vue src/component/Child.vue {{ message }} kr.vuejs.org/v2/api/#provide-inject 공식 문서에 공통 컴포넌트를 위해서 사용하고, 개별 컴포넌트에서는 사용을 권장하지 않습니다. 가독성이 prop보다 떨어지기 때문입니다. VUE.JS 목록

VUE.JS 목록 src/component/Home.vue 자식에게 받은 counter: {{ count }} src/component/Child.vue 숫자 올리기 VUE.JS 목록

VUE.JS 목록 src/component/Home.vue 버튼 버튼을 추가합니다. /src/component/Child.vue {{ alertMessage }} {{ parentMessage }} Watch 함수를 생성합니다. parentMessage가 변경되면 Watch 함수 updateMessage가 실행됩니다. VUE.JS 목록