Life.Contains("Coding");

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Emitting and Listening to Events Component는 내장 함수 $emit을 사용하여 템플릿 표현식(예: v-on 핸들러)에서 직접 사용자 정의 이벤트를 발신할 수 있다. click me $emit() 메서드는 component 인스턴스에서 this.$emit()로 사용할 수도 있다: export default { methods: { submit() { this.$emit('submit') } } } 그러면 부모는 v-on을 사용하여 수신할 수 있다. .once 수식어는 component 이벤트 리스너에서도 지원된..

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Props Declaration Vue component는 명시적인 props 선언이 필요하기에 이를 통해 Vue는 component에 전달된 외부 props 중 어떤 것이 fallthrough 속성으로 처리되어야 하는지 알 수 있다(전용 섹션에서 설명함). props는 props 옵션을 사용하여 선언된다. export default { props: ['foo'], created() { // props는 `this`에 노출된다 console.log(this.foo) } } 문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 구문을..

이 페이지에서는 Component Basics를 이미 읽었다고 가정한다. Component를 처음 사용하는 경우 Component Basics를 먼저 읽고 와야 한다. Vue component는 템플릿에서 발견될 때 Vue가 구현할 위치를 알 수 있도록 "등록"해야 한다. Component를 등록하는 방법에는 전역 및 로컬의 두 가지가 있다. Global Registration app.component() 메서드를 사용하여 현재 Vue 어플리케이션에서 component를 전역적으로 사용할 수 있도록 할 수 있다. import { createApp } from 'vue' const app = createApp({}) app.component( // 등록된 이름 'MyComponent', // 구현 { /*..

Component를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 그렇기에 앱이 중첩된 component의 트리로 구성되는 것은 일반적이다. 이것은 기본 HTML element를 중첩하는 방법과 매우 유사하지만 Vue는 각 component에 사용자 정의 콘텐츠와 논리를 캡슐화할 수 있는 자체 component 모델을 구현한다. Vue는 기본 웹 component와도 잘 작동합니다. Vue component와 기본 웹 component 간의 관계가 궁금하다면 여기에서 읽어볼 수 있다. Defining a Component 빌드 방식을 사용할 때 일반적으로 싱글 파일 component(줄여서 SFC)라고 하는 .vue 확장자를 사용하여 전용 파일에 각 V..

Vue의 선언적 렌더링 모델은 대부분의 직접 DOM 작업을 추상화하지만 기본 DOM 요소에 직접 액세스해야 하는 경우가 여전히 있을 수 있다. 이를 달성하기 위해 특수 ref 속성을 사용할 수 있다. ref는 v-for 장에서 언급한 key 속성과 유사한 특수 속성이다. 이를 통해 마운트 된 특정 DOM element 또는 하위 component 인스턴스에 직접적인 참조를 얻을 수 있다. 예를 들어 프로그래밍 방식으로 component 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화하려는 경우에 유용할 수 있다. Accessing the Refs 참조 결과는 this.$refs에 노출된다. Component가 마운트 된 후에만 ref에 액세스 할 수 있다. 템플릿 표현식에서 $ref..

Basic Example Computed 속성을 사용하면 파생된 값을 선언적으로 계산할 수 있다. 그러나 상태 변경에 대한 반응으로 사이드 이펙트(DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. Options API를 사용하는 경우 watch 옵션을 사용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 있다. export default { data() { return { question: '', answer: 'Questions usually contain a question mark. ;-)' } }, watch: { // question이 변경될 때마다 함수 실행 question(newQuestion, oldQuestion) { if (ne..

각 Vue component 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 수명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여 특정 단계에서 개발자의 의도가 담긴 코드를 추가할 수 있는 기회를 제공한다. Registering Lifecycle Hooks 예를 들어, mounted 훅은 component가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있다. export default { mounted() { console.log(`the component is now mounted.`) } } 인스턴스 ..

프론트엔드에서 form을 처리할 때 form input elements의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많다. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업이다. v-model 지시문은 위의 내용을 단순화하는데 도움이 된다. 또한 v-model은 , element와 같은 다양한 유형의 입력에 사용할 수 있다. 사용되는 element에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장된다. 텍스트 유형의 과 의 경우 value 속성과 input 이벤트 사용 와 의 경우, checked 속성과 change 이벤트를 사용 는 value를 속성으로 사용하고 change를 이벤트로 사용 tip. v-model은 모든 form element에서 감지되는..

Listening to Events 일반적으로 @ 기호로 사용되는 v-on 지시문은 DOM 이벤트를 수신하고 트리거 될 때 사전 정의해둔 JavaScript 코드를 실행시킨다. 'v-on:click="handler"' 또는 줄여서 '@click="handler"'와 같이 사용한다. 핸들러 값은 다음 중 하나일 수 있다. 인라인 핸들러: 이벤트가 트리거 될 때 실행되는 인라인 JavaScript(네이티브 onclick 속성과 유사) 메서드 핸들러: Component에 정의된 메서드 이름 또는 메서드를 가리키는 경로 Inline Handlers 인라인 핸들러는 일반적으로 다음과 같은 간단한 경우에 사용된다. data() { return { count: 0 } } Add 1 Count is: {{ count ..

v-for v-for 디렉티브를 사용하여 배열을 리스트로 렌더링 할 수 있다. v-for 디렉티브는 'item in items' 형식의 특수 구문이 필요하다. 여기서 items는 소스 데이터 배열이고 item은 반복되는 배열 요소의 별칭(alias)이다. data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } {{ item.message }} v-for 범위 내에서 템플릿 표현식은 모든 상위 범위 속성에 액세스 할 수 있다. 또한 v-for은 현재 아이템의 인덱스에 대한 선택적 두 번째 별칭(alias)도 지원한다. data() { return { parentMessage: 'Parent', items: [{ message: 'Foo'..