$data 컴포넌트에서 data 속성에 정의(return)한 reactive한 값들을 객체로 뽑아준다. {{ $data }} this.a = 1은 reactive하지 않으므로 화면에 나타나지 않는다. $props 부모로부터 건내받은 props를 object 형식으로 받을 수 있다. 부모 컴포넌트 자식 컴포넌트 props 속성을 통해 부모로부터 받은 props를 명시해야 $props로 받을 수 있다 props: {{ $props }} $el 해당 컴포넌트의 HTML(element들)을 뽑아준다. $el을 통해 현재 컴포넌트의 HTML을 조회해서 querySelector를 사용할 수 있다. 최상위 엘리먼트가 하나만 존재해야 정상적으로 작동한다! Hi, i'm duckgugong $el test! $optio..

Mixin 만약 여러 컴포넌트가 같은 형식의 data나 methods를 사용한다면 모듈화를 시키는 것이 굉장히 편할 것이다. 컴포넌트마다 똑같은 형식의 data나 methods를 일일이 치고 있다면 생산성이 굉장히 떨어지고 비효율적일 것이다. 특히 겹치는 부분이 많을수록 더욱 그럴것이다! Vue.js에서 Mixin을 통해 이러한 문제를 해결할 수 있다! 컴포넌트들이 공유할 mixin 파일 (MixinTest.js) 컴포넌트들이 공통으로 사용할 data 속성과 methods 속성을 작성한 파일을 하나 만들자 const MixinTest = { data() { return { num: 1 } }, methods: { plus_one() { this.num++; }, minus_one() { this.num-..

provide/inject Vue.js에서 전역 상태를 사용해서 prop drilling을 피할 수 있는 방법이다! 전역 상태를 넘길수 있는 방법이 크게? 두가지가 있다. reactive한 상태를 넘기는 것과 그렇지 않은 상태를 넘기는 것! 사용법은 전역 상태를 넘길 컴포넌트에서 provide 키워드를 사용해서 전역 상태를 넘기고 자식이나 자손들이 inject 키워를 이용해 해당 상태를 사용하는 방식이다! reactive 하지 않은 상태 proivde로 넘겨준 상태가 변경되도 자식이나 후손이 리렌더링 되지 않는 경우! 별다른 키워드 없이 최상위 컴포넌트에서 provide 키워드 안에 computed를 사용하지 않고 상태를 전달하는 경우! 최상위 컴포넌트 provide 키워드를 사용해서 num이라는 전역 ..

공식문서 https://router.vuejs.org/ Vue Router router.vuejs.org 설치 vue-router를 사용할 프로젝트에 설치! // npm npm install vue-router // yarn yarn add vue-router vue-router 사용해보기 1. 라우팅을 적용할 만들기 라우팅을 적용할 컴포넌트를 만들어보자! 나는 "/", "/chicken", "/duckgugong" 경로에 적용할 컴포넌트를 각각 Home, Chicken, Duckgugong 이라고 만들었다! components/Home.vue This is "Home" Component components/Chicken.vue I'm "Chicken" Component components/Duckgug..