새오의 개발 기록

라이프 사이클(생명 주기) Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 라이프 사이클 훅 각 라이프 사이클마다 개발자가 추가한 커스텀 로직(실행되는 함수들) 메서드 시점 beforeCreate 인스턴스가 생성되고, 리액티브 초기화가 일어나기 전 created 인스턴스가 생성되고, 리액티브 초기화가 일어난 후 beforeMount 인스턴스가 마운트되기 전 mounted 인스턴스가 마운트된 후 beforeUpdate 데이터가 변경되어 DOM에 적용되기 전 updated 데이터가 변경되어 DOM에 적용된 후 beforeDestroy Vue 인스턴스가 제거되기 전 destroyed Vue 인스턴스가 제거된 후 errorCaptured 임의의 자식 컴포넌트에서 오류가 발생했을 때 자주 사용되는 cre..

기본적인 옵션 구성 var app = new Vue({ // 마운트할 요소 el: '#app', // 애플리케이션에서 사용할 데이터 data: { message: 'Vue.js' }, // 산출 속성 computed: { computedMessage: function() { return this.message + '!' } }, // 라이프 사이클 훅 created: function() { } // 애플리케이션에서 사용할 메서드 method: { myMethod: function() { } } }) el el에는 애플리케이션 인스턴스를 적용할 요소를 나타냄 선택자 형태로 지정 data - 데이터 객체 또는 배열로 지정 computed - 산출 속성 data와 비슷하게 사용하는 '함수로 인해 산출되는 데이..

텍스트 바인딩 템플릿에 다음과 같이 속성 이름을 작성하면 해당 위치에 값이 랜더링 됨 {{ message }} // Javascript var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) Hello Vue.js! 옵션에 정의한 데이터는 다음과 같이 외부에서 접근 가능함 console.log(app.message) // Hello Vue.js! 반복 랜더링 v-for 기사 목록 또는 상품 목록과 같은 리스트는 data 옵션에 등록한 배열 또는 객체에 v-for 디렉티브를 적용해서 반복 랜더링 할 수 있음 {{ item }} // Javscript var app = new Vue({ el: '#app', data: { list: ['사..

쉽게 재사용할 수 있는 Vue 전용 컴포넌트 리소스 사이트 모음 Awesome Vue 깃허브 모달 대화 상자, 슬라이더와 같은 범용적인 UI GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js 🎉 A curated list of awesome things related to Vue.js - GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js github.com Vue Curated 모달 대화 상자, 슬라이더와 같은 범용적인 UI Vue Curated curated.vuejs.org Element 풍부한 컴포넌트와 아름다운..