[Vue.js][FrontEnd] Vue.js 필수 기술 - 컴포넌트 통신
·
Dev Framework/Vue.js
컴포넌트 간 통신과 유효 범위 Vue.js에서 컴포넌트 간 통신은 주로 부모-자식 관계의 컴포넌트 사이에서 일어납니다. Vue의 반응성 시스템과 함께 작동하며, 각 컴포넌트의 유효 범위 내에서 데이터를 주고받을 수 있는 메커니즘을 제공합니다. 컴포넌트 간 통신 방법 1. Props를 통한 부모에서 자식으로의 데이터 전달 - 부모 컴포넌트는 `props`를 사용하여 자식 컴포넌트에 데이터를 전달합니다. - 자식 컴포넌트는 `props` 옵션을 통해 받은 데이터를 사용할 수 있습니다. - `props`는 단방향 데이터 바인딩을 사용하여, 자식 컴포넌트에서 부모의 데이터를 직접 수정할 수 없습니다. 실습과 예시 Vue에서 `props`를 사용한 부모-자식 컴포넌트 간 데이터 전달의 예를 들어 설명해 보겠습니다..
[Vue.js][FrontEnd] Vue.js 필수 기술 - 컴포넌트
·
Dev Framework/Vue.js
컴포넌트 Vue.js의 컴포넌트는 Vue 애플리케이션을 구성하는 기본적인 블록입니다. 컴포넌트는 재사용 가능하고 독립적인 Vue 인스턴스로서, HTML 요소처럼 사용될 수 있습니다. 컴포넌트 시스템은 애플리케이션을 작고 독립적인 단위로 분할하여 관리할 수 있게 해줍니다. Vue 컴포넌트의 주요 특징: 1. 재사용성: 컴포넌트는 재사용 가능하게 설계될 수 있어, 동일한 구조와 기능을 여러 곳에서 사용할 수 있습니다. 이는 코드 중복을 줄이고 유지보수를 쉽게 만듭니다. 2. 독립성: 각 컴포넌트는 독립적인 범위를 가집니다. 즉, 각 컴포넌트는 자신만의 데이터, 메소드, 계산된 속성 등을 가질 수 있습니다. 3. 캡슐화: 컴포넌트는 HTML, CSS, JavaScript를 포함할 수 있으며, 이는 해당 컴포넌..
[Vue.js][FrontEnd] Vue.js 필수 기술 - 인스턴스
·
Dev Framework/Vue.js
Vue 인스턴스 Vue 인스턴스는 Vue.js를 사용하여 생성하는 애플리케이션의 기본 단위입니다. 각 Vue 애플리케이션은 `new Vue()`로 생성되는 인스턴스를 통해 시작됩니다. 이 인스턴스를 통해 데이터, 메소드, 라이프 사이클 훅 등과 같은 다양한 옵션을 포함할 수 있습니다. Vue 인스턴스를 생성할 때, 여러분은 옵션 객체를 전달할 수 있습니다. 이 객체는 다양한 프로퍼티와 메소드를 포함할 수 있는데, 이들은 인스턴스의 데이터(`data`), 계산된 속성(`computed`), 메소드(`methods`), 감시자(`watch`), 그리고 라이프 사이클 훅(`created`, `mounted`, `updated`, `destroyed` 등)을 정의하는 데 사용됩니다. 예를 들어: var vm =..
개발자 성현
'Dev Framework/Vue.js' 카테고리의 글 목록