(공부 책 : Vue.js Quick Start ) 컴포넌트 조합 컴포넌트들은 부모 - 자식 관계로 트리 구조를 형성합니다. (부모가 자식을 포함) 속성(Props)을 통해서 주로 단방향으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달합니다. 양방향도 가능하나 코딩 복잡도가 높아지고 유지 보수에 어려움이 있어 권장하지 않습니다. 반면, 자식 컴포넌트는 부모 컴포넌트로 이벤트를 발신할 수 있습니다. 자식 컴포넌트에서 이벤트를 정의하고 이를 발생시키면 부모 컴포넌트에서 이벤트 핸들러 메소드가 호출토록 합니다. 즉, 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보..
(공부 책 : Vue.js Quick Start ) 스타일 적용 각 요소마다 스타일을 일일이 지정하는 것은 무척 비효율적인 일입니다. 만약 스타일을 바꾸려 한다면 모든 요소의 스타일 특성을 변경해야하는 문제점이 발생합니다. 때문에 예전부터 개발자들은 style 클래스를 미리 지정하고 이를 HTML 요소에 바인딩하는 방법을 사용해왔습니다. 그렇게 한다면 style 클래스 정보만 변경하는 것으로 모든 HTML 요소에 동일한 스타일을 적용할 수 있습니다. 한 HTML 요소에 여러 개의 style 클래스를 지정할 수 있는 만큼 적용되는 순서는 꼭 알아두셔야 합니다. 실행 결과를 보면 style 태그에 작성된 순서대로 스타일이 적용된 후 HTML 요소에 적용된 인라인 스타일이 적용됩니다. 같은 스타일 속성이 주어..
보호되어 있는 글입니다.
(공부 책 : Vue.js Quick Start ) 1. 인라인 이벤트 처리 Vue.js에서 이벤트는 v-on 디렉티브를 이용해 처리 가능합니다. 입금 인출 계좌 잔고 : {{account}} v-model로 money 속성을 양방향 바인딩하고 money의 값에 따라 account의 양이 변하게 button에서 v-on 디렉티브를 이용하여 click 이벤트 처리로 값이 증, 차감 되도록 합니다. ( ※ v-on:click은 @click으로도 대체 가능합니다. ) 위 예제 코드의 경우 account의 값을 변화시키는 작업이 html 인라인에서 직접 이루어지고 있습니다. 만약 '계좌 금액은 마이너스로 갈 수 없다' 등과 같은 특수한 조건이 붙는다면 모든 조건을 인라인 이벤트 처리로 작성하기엔 현실적으로 어려..
(공부 책 : Vue.js Quick Start ) 1. el, data, computed 옵션 var vm = new Vue({ el: '#example', data: model, computed: { test : function() { ... } } }) el 옵션은 Vue 인스턴스에 연결할 HTML DOM 요소를 지정합니다. 주의할 점은 el옵션에 여러 개 요소를 지정할 수 없다는 점입니다. data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리합니다. computed 옵션에 지정한 값은 함수였지만 Vue 인스턴스는 프록시 처리하여 마치 속성처럼 취급합니다. test는 분명 함수입니다만 console..
(공부 책 : Vue.js Quick Start ) 1. v-pre 디렉티브 v-pre 디렉티브는 HTML 요소에 대한 컴파일을 수행하지 않습니다. {{message}} v-pre를 사용하지 않았다면 message 속성의 값이 바인딩되어 나타나겠지만 v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 html 문자열 그대로 출력합니다. 2. v-once v-once 디렉티브는 HTML 요소를 단 한번 랜덩링합니다. 위 예제에서 v-pre를 v-once로 변경하여 브라우저를 실행해봅니다. Vue 인스턴스 데이터를 변경하더라도 다시 랜더링을 수행하지 않는걸 확인할 수 있습니다. 3. 계산형 속성 앞서 v-bind 디렉티브를 통해 데이터 바인딩 방법에 대한 예제를 살펴보았습니다. 하지만 연산 로직이 필요..