Posis

이번 포스트에서는 emit Event를 활용해서 자식 컴포넌트에서 부모 컴포넌트로 데이터 통신하는 방법에 대해서 다뤄보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 props 간단 정리 부모 컴포넌트에서는 props를 활용하여 자식 컴포넌트로 데이터를 보낼 수 있다. 즉, 단방향 데이터 바인딩 방식이다. 자식 컴포넌트에서 emit Event를 활용하여 부모 컴포넌트로 데이터 보내기 프로젝트이름/src/App.vue 프로젝트이름/src/components/Input.vue Input 컴포넌트에 abc를 작성하면 watch 속성이 msg의 데이터 변경을 감지하고 한글자씩 a -> ab -> abc를 콘솔에 출력하는 것을 볼 수 있습니다. 동작 순서 input의 입력한 데이터를 변경을 감지해줄 ..

이번 포스트에서는 컴포넌트(component)를 만들고 어떻게 사용하는지에 대해서 다뤄보겠습니다. 컴포넌트(component) 만들기 프로젝트이름/src/components/Btn.vue {{ text }} 프로젝트이름/src/App.vue App.vue와 같은 위치에 components 폴더를 만들고 원하는 컴포넌트 파일을 만듭니다. - Btn.vue 저는 박스 안에 text(props)를 받아서 글자를 출력하기 위해서 script에서 props - text를 등록해줍니다. type은 String, text(props)를 넘겨주지 않았을 경우 기본값(default)으로 JavaScript를 등록해줍니다. App.vue 파일로 돌아와 script에 컴포넌트 파일을 import 하고 components에 ..

이번 포스트에서는 컴포넌트에 대해서 다뤄보겠습니다. 컴포넌트(component) 개념 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위 그림은 왼쪽은 화면 오른쪽은 컴포넌트를 분할해 나눠둔 것이다. 컴포넌트를 그림으로 설명하자면 오른쪽에 블록 한 개가 하..

이번 포스트에서는 v-model 수식어에대해서 알아보겠습니다. v-model 수식어 1. .lazy 기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 합니다. lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있습니다. 즉, 글자 또는 문장을 입력한 후에 Enter 또는 포커스가 사라졌을때 문구가 나타나게 됩니다. {{ msg }} 2. .number 사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다. {{ msg }} 숫자를 받아서 로직을 처리해야 할 경우에 유용하게 쓰일 것 같습니다. 3. .trim 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면,..

이번 포스트에서는 폼 입력 바인딩에 대해서 다뤄보겠습니다. v-model v-model 디렉티브를 사용하여 input, checkbox 요소들에 양방향 데이터 바인딩을 생성할 수 있습니다. v-model 디렉티브는 input type 요소를 변경하는 올바른 방법을 자동으로 선택합니다. {{ msg }} 이처럼 input 태그에 v-model을 사용함으로써 msg의 데이터가 실시간으로 변해서 화면에 출력되는 것을 볼 수 있습니다. 하지만 여기에도 치명적인 단점이 존재합니다. 영어는 바로바로 업데이트되지만 한글은 모음과 자음이 결합했을 때 비로소 화면에 출력된다는 것입니다. 하지만 한글도 영어와 같이 한 글자씩 출력할 수 있게 할 수 있습니다. {{ msg }} @input을 통해서 msg에 바로 데이터를 ..

이번 포스트에서는 이벤트 수식어에 대해서 다뤄보겠습니다. 이벤트 수식어 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메서드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메서드만 사용할 수 있으면 더 좋습니다. 이 문제를 해결하기 위하여, Vue.js는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사입니다. [사용 방법] Google 위 예제처럼 @click. prevent(함수 안에 event.preventDefault와 같은 기능)로 체이닝 하면 사용하실 수 있습니다. 다른 수식어 들은 간단한 설명만 작성하겠습니다. ..