나의 공부 노트

Vue event v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. 이벤트 발생 시 처리 로직을 v-on에 넣기 힘들기 때문에 v-on에서는 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리한다. 이벤트 수식서 (Event Modifier) method 내에서 이벤트를 처리하는 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것보다 data 처리를 위한 로직만 작업하는 것이 좋다. 이 문제를 해결하기 위해서 Vue는 v-on 이벤트에 이벤트 수식어를 제공한다. v-on:click.stop 클릭 이벤트 전파가 중단된다. v-on:submit.prevent 제출 이벤트가 페이지를 다시 로드하지 않는다. v-on:cli..

컴포넌트(Component) 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다. HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다. Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용할 수 있다. Life Cycle Hook 사용 가능하다. 전역 컴포넌트와 지역 컴포넌트가 있다. 전역 컴포넌트를 등록하려면 Vue.component(tagName, options)를 사용한다. 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다. 컴포넌트 간 통신 상위(부모) - 하위(자식) 컴포넌트 간의 data 전달 방법 부모에서 자식 : props라는 특별한 속성을 전달한다. (..

디렉티브(Directive) 디렉티브는 v- 접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용한다. template 여러 개의 태그들을 묶어서 처리해야 할 경우에 template를 사용한다. v-if, v-for, component등과 함께 많이 사용한다. v-text 자바스크립트의 innerText와 같은 역할을 한다. html 태그가 적용되지 않고 문자열이 그대로 보여진다. v-bind 엘리먼트의 속성과 바인딩 처리를 위해서 사용한다. 약어로 ":"로 사용이 가능하다. v-html 자바스크립트의 innerHTML과 같은 역할을 한다. html 태그가 적용된..

Vue instance의 속성 el Vue가 적용될 요소를 지정한다. CSS Selector or HTML Element data Vue에서 사용되는 정보를 저장한다. 객체 또는 함수의 형태이다. template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성이다. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성이다. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. created 뷰 인스턴스가 생성되자마자 실행할 로직을 정의한다. Vue Instance의 유효 범위 Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용된다. el 속성..