𝕕𝕖𝕧𝕖𝕝𝕠𝕡 𝕣𝕖𝕔𝕠𝕣𝕕

지시자(Directives) - 표현식의 값이 변경될 때 이에 반응해 DOM에 변경 사항을 적용한다. ex) v-for 지시자는 원본 데이터를 기반으로 요소 또는 데이터 블록을 여러번 렌더링한다. - 기본 내장 지시지를 사용하지 않고, 사용자 정의 지시자를 만들 수도 있다. 지시자 정의 객체를 생성하고, 이를 Vue.directive()를 이용해 전역으로 등록하거나, 컴포넌트의 directives 프로퍼티로 로컬 등록을 하면 된다. - Vue.js가 훅 함수(지시자 외부에서 일어나는 일들을 지시자에 전달할 수 있는 함수)를 지시자 정의 객체 내에 추가할 수 있으며, 이 훅 함수를 이용해 다양한 로직을 적용할 수 있다. bind inserted update componentUpdated unbind - 페..

컴포넌트 - Vue 애플리케이션에서 코드를 재사용할 수 있는 기본적인 방법 - HTML 요소를 확장하고 추가 로직을 제공할 수 있어 재사용이 가능하다. - Vue 컴포넌트는 Vue 인스턴스이기도 함 - 생성 중에 optios 객체를 받는다. - 전역으로 등록하기 위해 Vue.component(id, [definition])를 사용 id : 컴포넌트의 id definition : 컴포넌트에 대한 정의 (options 객체/options 객체를 반환하는 함수) - $emit : 현재 인스턴스의 이벤트를 트리거 할 수 있는 메소드, 첫 번째 인자로 이벤트명을 입력하고, 두 번째 인자로 추가 데이터를 입력한다. → 추가로 부모 컴포넌트는 v-on 지시자로 이벤트를 리스너에 부착할 수 있다. - 이전 글의 ind..

Vue.js 프로젝트 생성하기 1. vue cli 설치 npm install -g @vue/cli 2. vue 프로젝트 생성 vue create [project name] 3. 명령어를 실행한 위치에 prject가 생성되는 것을 확인할 수 있다. 4. 해당 명령어를 입력하면 앱을 실행할 수 있다. npm run serve

Vue 인스턴스 - Vue.js 애플리케이션의 시작 - 루트 Vue 인스턴스와 컴포넌트 인스턴스 -> 이 두 가지 유형의 Vue 인스턴스로 구성 - 루트 인스턴스 생성 코드 new Vue({/* options */}); options 객체에 애플리케이션을 기술하고, Vue.js가 이 객체를 가지고 Vue 인스턴스를 초기화 간단한 메시지 앱 만들기 1) 기능 - 메시지 추가 - 메시지 리스트 - 메시지 삭제 - 특정 조건에서 추가 기능 자동 비활성화 2) index.html - Vue 설정 12줄 : options 객체의 el(element) 프로퍼티를 이용해 애플리케이션을 요소에 부착\ 책의 경로 "https://unpkg.vue@2.5.13/dist/vue.js"를 최신 링크로 변경 - 애플리케이션의 ..