JIWON'S DEV
component - 부품으로 정리 SPA(Single Page Application)는 간단히 만들기 위함이지만, 규모가 커지면 복잡해진다. 이 때, “같은 종류의 처리를 하는 부분을 컴포넌트로 정리”하면 보기 좋고 이해하기 쉬워진다. HTML의 일부분을 오브젝트로 정리하는 것은 template 오브젝트를 사용한다. 그리고 오브젝트에 이름(컴포넌트 태그명)을 붙인 것을 “컴포넌트”라고 한다. // 준비된 컴포넌트가 표시된다. 컴포넌트 만드는 방법 전역 컴포넌트로 등록하는 방법 Vue.component('컴포넌트태그명', { template: 'HTML부분' }) 로컬 컴포넌트에 등록하는 방법 var 컴포넌트의 오브젝트명 = { template: 'HTML부분' } new Vue({ el: '#app',..
countUp / countDown See the Pen Untitled by JIWON CHOI (@jiwonch) on CodePen.
뷰 인스턴스 생성 뷰 인스턴스 new Vue(); var vm = new Vue(); console.log(vm); new Vue({ el: , //인스턴스 들어가는 곳 template: , // 화면에 표시할 요소(HTML, CSS) data: , // 뷰의 반응성이 반영된 데이터 속성 methods: , // 화면의 동작과 이벤트 로직을 제어하는 메서드 created: , // 뷰의 라이프 사이클과 관련된 속성 watch: , // data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성 }); Jiwon's develop moment
