반응형 IT/Vue3 [Vue.js 시작하기] 03. 컴포넌트 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. 3. 컴포넌트 현재 대부분의 프레임워크는 컴포넌트 기반으로 개발을 하고 있다. 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 기본적으로 컴포넌트를 등록할 경우 root 컴포넌트로 할당된다. // Vue.component('컴포넌트 이름', 컴포넌트 내용); 전역등록 // 플러그나 라이브러리 등 전역으로 사용해야 하는 것 등록. 어떤 인스턴스든 사용가능하다. Vue.component('app-header', { template: 'Header' }); // instance는 root 컴포넌트가 된다. 아래와 같은 방식이.. 2022. 4. 24. [Vue.js 시작하기] 02. 인스턴스 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. 2. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드 Vue의 인스턴스를 확인하면, Vue에서 제공하는 API와 속성을 알 수 있다. new Vue를 통해 만들어지 인스턴스에 element를 할당해 주어야만 Vue가 제공하는 나머지 속성들을 이용할 수 있다. 기본적으로 new Vue를 통해 사용할 수 있는 options new Vue({ el: , template: , data: , methods: , created: , watch: , }); new Vue를 통해 인스턴스 객체를 만들 수 있다. el(element) 속성을 통해 와 연결한다. Vue의 data 속성을 통해 message 라는 변수에 'hi'라는 문자열.. 2022. 4. 24. [Vue.js 시작하기] 01. Vue.js 특징 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. Vue는 무엇인가? MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 Vue의 2가지 특징 DOM Listeners View 라고 하는 것은 browser에서 사용자에게 비추어 지는 화면을 의미한다. 화면에 나타나는 요소들을 html이라고 하며, 그 html은 DOM이라는 것들을 이용해서 JS로 조작할 수 있게끔 구성이 된다.Vue에서는 그런 이벤트를 잡아서 JS에 있는 Data를 바꾸어 주거나, JS의 지정된 특정 로직에서 실행을 하게 되는데, 이것을 DOM Listener라고 한다. View에서 특정 사용자가 키보드 또는 마우스 등을 조작을 통해 이벤트를 중간의 DOM Listeners로 v.. 2022. 4. 24. 이전 1 다음 728x90 반응형
