JavaScript/vue5 🔥component - 부품으로 정리 component - 부품으로 정리 SPA(Single Page Application)는 간단히 만들기 위함이지만, 규모가 커지면 복잡해진다. 이 때, “같은 종류의 처리를 하는 부분을 컴포넌트로 정리”하면 보기 좋고 이해하기 쉬워진다. HTML의 일부분을 오브젝트로 정리하는 것은 template 오브젝트를 사용한다. 그리고 오브젝트에 이름(컴포넌트 태그명)을 붙인 것을 “컴포넌트”라고 한다. // 준비된 컴포넌트가 표시된다. 컴포넌트 만드는 방법 전역 컴포넌트로 등록하는 방법 Vue.component('컴포넌트태그명', { template: 'HTML부분' }) 로컬 컴포넌트에 등록하는 방법 var 컴포넌트의 오브젝트명 = { template: 'HTML부분' } new Vue({ el: '#app',.. JavaScript/vue 2022. 12. 13. count countUp / countDown See the Pen Untitled by JIWON CHOI (@jiwonch) on CodePen. JavaScript/vue 2022. 8. 9. Vue instance 생성 뷰 인스턴스 생성 뷰 인스턴스 new Vue(); var vm = new Vue(); console.log(vm); new Vue({ el: , //인스턴스 들어가는 곳 template: , // 화면에 표시할 요소(HTML, CSS) data: , // 뷰의 반응성이 반영된 데이터 속성 methods: , // 화면의 동작과 이벤트 로직을 제어하는 메서드 created: , // 뷰의 라이프 사이클과 관련된 속성 watch: , // data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성 }); Jiwon's develop moment JavaScript/vue 2022. 8. 9. Vue.js CDN / 설치(추후 추가) Vue.js https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org CDN 프로토 타이핑또는 학습 목적이라면, 아래 코드로 최신 버전을 사용할 수 있습니다. 프로덕션 환경인 경우 새 버전에서 예상치 못한 오류를 방지하려면 특정 버전의 빌드 파일을 추가하는것을 추천합니다. 기본 ES 모듈을 사용하는 경우 이를 지원 하는 ES 모듈 호환 빌드 파일도 있습니다. 다양한 데이터의 출력 {{ myText }} 숫자 {{ myNumber }} 부울형 {{ myBool }} 배열 {{myArray }} 오브젝트 {{ myObject }} {{ $data }} 위의 코드와 같이 안에 넣어준.. JavaScript/vue 2022. 8. 9. Vue.js Vue.js MVVM패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리 양방향 라이브러리 데이터 변화를 라이브러리에서 감지해서 화면에 그려줌 --> 반응형 지원 *MVVM - 모델, 뷰, 뷰모델로 이루어진 패펀 *MVC 모델, 뷰, 컨트롤러로 이루어진 패턴 *MVVM MVVM은 뷰모델을 지원하므로 뷰가 필요한 데이터와 커맨드 제공 컴포넌트(블럭 같은 것) 간의 통신이 Vue, Angular는 양방향, React는 단방향 - 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음 - Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공 - 다른 프레임워크와 비교했을 때 상대적으로 가볍고 빠름 - 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구.. JavaScript/vue 2022. 8. 9. 이전 1 다음
