맨동이

컴포넌트 기초 1. 컴포넌트 기본 구성 1.1 App.vue // 컴포넌트 렌더링 1.2 MyBtn.vue Apple 2. 컴포넌트의 특징 2.1 재활용 컴포넌트의 장점이라고 한다면, 컴포넌트는 얼마든지 반복해서 재사용할 수 있다는 것입니다. App.vue 파일에 위와 같이 작성한다면 버튼을 재활용하여 여러 개를 화면에 출력할 수 있기 때문입니다. 2.2 Props 또한, 재활용을 하면서 props라는 개념을 이용하여 App.vue라는 부모 컴포넌트에서 MyBtn.vue라는 자식 컴포넌트로 데이터를 전달할 수 있습니다. 이러한 이유로 props를 통해 구현한 이 기능을 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신 방법이라고도 이야기합니다. //App.vue //MyBtn.vue // 데이터 바인딩 A..

폼 입력 바인딩 폼 입력 바인딩은 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성합니다. 1. 단방향 데이터 바인딩 {{ msg }} export default { data() { return { msg: 'Hello world!' } } } 위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다. 이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다. 데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부릅니다. 단방향 데이터 바인딩으로 인하여 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않습니다. 2. 양방향 데이터 바인딩 {{ msg }} 이처럼 input 요소에 이벤트를 청취하도록 합니..

이벤트 수식어 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다. 이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사 입니다. .stop .prevent .capture .self .once .passive ... ... 관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시 말하여 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 v-on:c..

이벤트 핸들링 1. 이벤트 청취 v-on 디렉티브는 @기호로, DOM 이벤트를 듣고 트리거될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 혹은 줄여서 @click="methodName"으로 사용합니다. Add 1 The button above has been clicked {{ counter }} times. Vue.createApp({ data() { return { counter: 1 } } }).mount('#basic-event') 2. 메소드 이벤트 핸들러 위의 코드와 같이 간단한 코드의 경우에는 문제가 없지만, 많은 이벤트 핸들러의 로직은 더 복잡하기 때문에 위와 같은 방법은 지양하는 것이 좋습니다. Greet Vue.createApp({ dat..

리스트 렌더링 1. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 fruit in fruits 형태로 특별한 문법이 필요합니다. 여기서 fruits는 원본 데이터 배열이고 fruit은 반복되는 배열 엘리먼트의 별칭입니다. {{ fruit }} 1.1 코드 v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다. {{ fruit }}-{{ index }} 2. 필터링된 결과 표시 2.1 computed 속성 원래 데이터를 실제로 변경하거나 재설정하지 않고, 배열의 필터링되거나 정렬된 버전을 표시할 수도 있습니다. 이 경우 필터링되거나 정렬된 배열을..