Vue
-
Vue 라이프사이클 훅Vue/문법 2021. 6. 19. 21:44
- 라이프사이클 훅 인스턴스 라이프사이클에서는 Vue 인스턴스를 가리키는 this 컨텍스트와 함께 호출 Creation(초기화) 컴포넌트가 DOM에 추가되기 전에 실행되는 단계 서버 사이드 렌더링에서도 지원되는 훅 beforeCreate 컴포넌트 초기화 단계 중 가장 처음으로 실행 컴포넌트 데이터를 관찰하고 이벤트를 초기화 데이터는 아직까지 반응적이지 않으며, 컴포넌트의 라이프사이클에서 발생하는 이벤트 역시 설정되지 않은 상태 created Vue 인스턴스가 이벤트를 설정하고 데이터를 관찰할 때 발생 템플릿은 아직 마운트되거나 렌더링 되지 않았지만, 이벤트들이 활성화되며 데이터에 반응적으로 접근하는 것이 가능 Mounting(DOM 추가) 가장 많이 사용되는 단계 컴포넌트가 렌더링되기 직전이나 직후에 컴..
-
Vue Application 인스턴스Vue/문법 2021. 6. 19. 21:42
- 어플리케이션 인스턴스 생성하기 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있다. 어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결을 허용 // 어플리케이션 인스턴스 생성 const app = Vue.createApp({ /* options */ }); // 인스턴스 메소드 const app = Vue.createApp({}); app.component('SearchInput', SearchInputComponent); app.directive('focus', FocusDirective); app.use(LocalePlugin); // 인스턴스 메소드 체이닝 V..
-
Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint)Vue/설정 2021. 6. 19. 20:17
1. Vue package 설치 npm i vue@next npm i vue 로 설치 시, Vue2 버전이 설치됨 기본적은 Vue의 문법을 사용하는 용도 2. .Vue 파일을 관리하기 위한 Package 설치 npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc @vue/compiler-sfa는 vue파일을 브라우저에 동작할 수 있는 형태로 변환 3. 기본 폴더 및 파일 생성 src 폴더 생성 및 src 폴더 안에 main.js 및 App.vue 파일 생성 4. webpack.config.js 파일 생성 및 설정 entry 속성에 main.js 설정 module rules 속성에 .vue 확장자를 해석할 수 있도록 설정 module rules 속성에 ..