728x90 반응형 전체 글170 [Vue.js] 컴포넌트 통신 방법 - 응용 같은 레벨에서의 컴포넌트 통신 방법 A 컴포넌트와 B 컴포넌트가 같은 레벨에 있을 때 통신하는 방법 B -> Root로 event를 통해 num:10전달 Root -> A로 props를 통해 num:10전달 예제 // component-same-level.html 동작 확인 2020. 9. 8. [Vue.js] 컴포넌트 통신 방식 - 기본 컴포넌트 통신 방식 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. 각각의 컴포넌트는 데이터를 각각 관리하고 컴포넌트 간에 데이터를 주고 받기 위해선 Event, Props 속성을 이용해야 한다. 컴포넌트 통신 규칙이 필요한 이유 데이터의 흐름을 추적할 수 있다. 왜냐하면, 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 이동(Props)하고 이벤트 발생은 하위 컴포넌트에서 상위 컴포넌트로만 발생하기 때문이다. Props 속성 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법. 상위 컴포넌트에서 하위 컴포넌트로만 이동한다. 특징 Reactivity가 Props에도 적용 읽기 전용 값 예제 // component.html 동작 확인 Props 속성 실습하기 num 값 받아 화면에 표시 // c.. 2020. 9. 7. [Vue.js] 컴포넌트 뷰 컴포넌트 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면 제작 가능 컴포넌트 등록 실습하기 // component.html 동작 확인 전역 컴포넌트 등록 실습하기 // component.html // 전역 컴포넌트 // 실제 서비스 구현 시 전역 컴포넌트 구현할 일이 없다. Vue.component('...', { template: ... }); 지역 컴포넌트 등록 실습하기 // component.html ... 동작 확인 전역 컴포넌트와 지역 컴포넌트의 차이점 지역 컴포넌트는 특정 컴포넌트에서 사용할 것만 컴포넌트로 등록, 사용 전역 컴포넌트는 플러그인이나 라이브러리 같은 전역으로 사용해야하는 것만 전역 .. 2020. 9. 7. [Vue.js] 인스턴스 뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드, 단위이다. 특징 인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다. 생성자 함수 자바스크립트에서 함수를 이용하여 인스턴스를 생성하는 방법으로는 생성자 함수가 있다. 예제 참고 MDN 생성자 함수 사용하기 예제 Using a Constructor Function 다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다. developer.mozilla.org MDN Prototype 설명 Object.prototype.constructor 인스턴스의 프로토타입을 만든 Object 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 1, true 및 "test.. 2020. 9. 7. [Vue.js] Vue와 Reactivity Vue MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 Reactivity 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는 것 Object.defineProperty() 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환 // vue-way.html Object.defineProperty 라이브러리화 하기 특정 기능을 나눠 함수로 구현 // vue-way.html 즉시 실행 함수 참고 developer.mozilla.org/ko/docs/Glossary/IIFE IIFE 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 J.. 2020. 9. 7. 이전 1 ··· 20 21 22 23 24 25 26 ··· 34 다음