Vue.js

이벤트 리스닝 하기 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행 v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용 인라인 핸들러 이벤트가 트리거될 때 실행되는 인라인 JavaScript 1 추가 숫자 값은: {{ count }} 메서드 핸들러 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 v-on은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행할 수 있게 구현 function greet(event) { alert(`안녕 ${name.value}!`) // 'event'는 네이티브 DOM 이벤트 객체입니다. if (event) { alert(ev..

조건부 렌더링 v-if, v-else-if, v-else를 형제 요소로 사용할 수 있다 Hello Vue! Application.. Good Morning~ template 태그를 사용하면 template 안에 있는 내용만 출력된다 Hello Vue! Application.. 1234 987 Good Morning~ v-show true/false 값에 상관없이 해당요소를 구조적으로 출력하고 화면에 보이는지 아닌지는 CSS로 제어를 한다. 연결된 데이터의 true/false값에 따라 css의 display: none으로 바꾸거나 속성과 값을 제거하며 화면에 요소를 보여지거나 보여지지 않게 한다 초기 렌더링 비용이 높고 전환 비용이 낮다 보여지거나 보여지지 않는 구조가 많을 때 적합 v-cloak 디렉티브..

Computed 계산이 필요한 데이터를 사용할 때, computed 옵션을 사용하면 매번 계산을 하지 않고 첫번째 만들어진 결과를 캐싱해서 계산된 데이터를 다시 사용할 수 있다. ( methods는 계산 데이터를 사용할 때마다 계산을 한다 ) {{count}} {{double}} // 처음 계산된 데이터를 캐싱하여 다시 계산을 하지 않고 그대로 사용 {{double}} {{double}} {{double}} 계산된 데이터를 이용하여 내가 원하는 대로 데이터를 수정하여 사용할 수 있다 {{todo.title}} Watch 반응형 데이터가 변경되는 것을 감시하고, 변경될 때마다 정의한 함수가 실행된다 deep 객체 또는 배열 같은 참조형 데이터를 감시할 때 데이터 내부 일부 변경에 대해 감시하기 위해 깊은 ..

Vue.js 템플릿 Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한 모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 가상 DOM 개념에 익숙하고, JavaScript 본래의 기능을 선호한다면, 템플릿 대신 렌더 함수를 직접 작성할 수 있다 보간법 텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법 msg 속성이 변경될 때마다 갱신된다 메세지: {{ msg }} v-once 디렉티브 데이터가 변경되어도 갱신되지 않는 일회성 보간 수행 메세지(변하지않음):..