Vue 공식문서에서 확인할 수 있는 이미지와 같이 Vue 인스턴스는 크게 4가지 과정을 거치게 되는데, 그 4가지에는 Created(생성), Mounted(DOM에 부착), Update(업데이트), Destroy(소멸) 이 있음. Vue는 각각의 프로세스에서 Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공하는데, 일반적으로 많이 사용하는 것에는 beforeCreated, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 등이 있음. beforeCreated 가장 먼저 실행되는 훅인 beforeCreated는 Vue인스턴스가 초기화 된 직후에 발생됨. 컴포넌트가 DOM에 추가되기 전이기 때문에..

[에러내용] Vue3에서 EventBus를 적용해보려 했는데, 계속 $on관련 에러발생 Vue3마이그레션(사용)을 위해 알아둘 점 Vue3에서는 $on, $once, $off를 사용하지 않음 $emit은 parent componet에 부착되어 trigger event handler API로 여전히 사용됨 'EventBus'는 Vue가 추천하는 공식적인 방법이 아님 'mitt'이라는 외부라이브러리를 이용하여 EventBus구현 mitt 외부 라이브러리 mitt라이브러리는 커스텀이벤트를 만들어 송출, 수신할 수 있게 해줌 기존의 eventBus 대체하여 사용 가능 mitt사용예시 나의 경우, 'TodoInput.vue'에서 todoInput이라는 입력값을 입력받고 형제컴포넌트인 'TodoList.vue'로 ..

화살표함수를 적용안하였을 때, Vue객체 사용을 위해서 this를 비동기함수 호출전 바인딩하여 사용해야함. 그렇지 않고 this를 비동기 함수안에서 바로 호출하면 아래와 같이 'undefined'값이 찍히는 것을 확인 가능 created(){ var vm = this; console.log('호출전: ', this); fetchNewsList() .then(function(response){ console.log('호출 후:' , this); //바로 this를 사용하면 this가 Vue객체를 가리키지 않기 때문에 콜백시에는 따로 지정해야함.. vm.users = response.data }) .catch(function(error){ console.log(error); }) }, 화살표함수를 적용하였을..

\study\Vuejs_exercise>vue create vue-todo-list Vu프로젝트명을 카멜식(todoList)으로 입력할 경우 에러 발생. 반드시 케밥식으로 작성 vue/cli버전 3.x미만(1.x 혹은 2.x)일 경우 : vue init webpack 프로젝트명 *cli버전에 3.x이상일 경우 vue init 명령어는 모두 에러 발생 > Manually select features 선택시 필요한 설정들을 체크할 수 있음

Vue.js로 체크박스를 한번도 구현해본적 없었는데, 체크박스를 라디오버튼처럼 한 개만 체크된 상태로 구현해달라는 요건이 생김. 회사에서 시도 해봤는데, 전혀 감이 잡히지 않아 집에서 시도. 핵심은 제이쿼리는 Dom요소로 제어하지만, Vue로 구현한다면 값으로 컨트롤 해야 한다는 것이었음. [ 방법 1 ] : CheckBox.vue에 바로 적용 CheckBox.vue 전체체크 1 2 3 {{checkedValues}} {{this.isAllChecked}} {{removeValue}} 체크박스가 체크되면, checkedValues라는 배열에 체크된 value값이 담김. 근데, 이게 @click 발생시 메서드에서 checkedValues 값을 찍어보면 바로 들어가는게 아니라 클릭이벤트가 끝나구 들어감 (예..

computed와 methods의 차이 computed는 인자를 전달할 수 없음 computed는 반드시 return값이 존재해야 함 template에서 함수 호출 형태인 ()를 사용할 수 없음 종속된 데이터 변경 시에만 계산됨 캐시됨 computed와 whatch computed와 whatch는 특정 데이터가 변경 될 경우 값을 조작할 수 있다는 측면에서 동일하지만, 데이터를 가공해서 보여주는 역할은 computed가 담당하고 watch는 아래와 같은 상황에서 사용함. - 서버와 통신 - DOM조작 - local storage, audio playback 같은 browserr API사용시