Posis

이번 포스트에서는 이벤트 핸들링에 대해서 알아보겠습니다. 이벤트 리스너 v-on 디렉티브는 @기호(약어)로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="" == @click="" Click! {{ count }} 위 예제는 버튼을 클릭하면 숫자가 1씩 오르는 예제입니다. button태그에 @click 이벤트에 increase 메서드를 연결하여 사용합니다. 메서드 이벤트 핸들러 JavaScript에서는 많은 이벤트 핸들러가 존재합니다. 하지만 로직이 복잡하기 때문에 JavaScript로 넘겨주기 어렵습니다. 그렇기 떄문에 이를 넘겨주기 위해서 함수의 파라미터에 event를 추가해 줍니다. handler(event)의 event는 다른 단어를 사용..

이번 포스트에서는 리스트 렌더링 v-for에 대해서 다뤄보겠습니다. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. {{ framework }} v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다. 또한 v-for를 사용할 때는 :key 속성을 사용해야 합니다. :key key는 Vue가 노드를 식별하는 일반적인 메커니즘이기 때문에 v-for와 특별히 연관되지 않는 다른 용도로도 사용됩니다. v-for의 index v-for 디렉티브는 item in items에서 (item, index) in items 형태로 작성한다면 다음과 같이 나타납니다. ..

이번 포스트에서는 Vue.js에 조건부 렌더링, v-if와 v-show에 대해서 알아보겠습니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 됩니다. Click Hello Vue.js!! isShow는 true이고 Click 버튼을 클릭하면 true와 false가 매번 바뀌는 예제입니다. 첫 화면에는 isShow가 true이기 때문에 DOM에 나왔고 클릭 후에는 h1태그가 으로 변환됩니다. v-else v-if에서 조건이 맞지 않는다면 v-else가 있는 태그가 DOM에 표시됩니다. Click Hello Vue.js!! Goodbye Vue.js!! // 생략 isShow가 true일 때 'Hello Vue.js!..

이번 포스팅에서는 간단하게 v-bind와 v-on의 약어를 소개하겠습니다. v-bind v-bind는 데이터를 바인딩시킬 때 사용합니다. Hello Vue.js!! 위와 같이 fontColor의 데이터를 바인딩할 때 사용합니다. 하지만 매번 v-bind를 작성하면 개발 속도가 늦춰질 수 있기 때문에 다음과 같은 약어를 제공합니다. Hello Vue.js!! // 생략 속성 앞에 콜론(:)만 붙여주면 사용가능합니다. v-bind는 다양한 곳에 사용할 수 있습니다. class, href 등등 v-on v-on은 메소드내에 이벤트를 바인딩 시길 때 사용합니다. {{ msg }} 이번에는 add라는 메서드를 바인딩했습니다. 이도 위와 같이 약어를 사용해 보겠습니다. {{ msg }} // 생략 속성 앞에 골뱅이..

클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. 사용방법 Hello Vue.js!(isActive = {{ isActive }}) Hello Vue.js!(isActive = {{ isActive }}) class를 사용해 style을 넣을 때 보통은 class = 'style'의 형식으로 작성합니다. Vue.js에서는 v-bind:class(약어 -> :class)를 활용해서 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위 코드는 active 클래스는 isActive의 진실성에 의해 결정되는 구문입니다. isActive의 값이 처음에는 fals..

이번 포스팅에서는 computed에 대해서 알아보겠습니다. computed 연결된 data의 값이 변경되었을 때, 복잡한 계산식을 계산해서 값을 캐싱해서 return 해주는 속성입니다. 캐싱 값을 계산하여 잠시 동안 저장해두는 것을 의미합니다. {{ msg }} 문자열 뒤집기 {{ reverseString }} 위 예제 코드는 'Hello Vue.js!!' 문자열을 뒤집어주는 코드입니다. 함수를 살펴보면 reverseString()은 msg의 문자열을 뒤집어주는 역할, changeMsg()는 isDone의 boolean값을 바꿔주기만 한다. 예제 코드를 실행하면 나오는 첫 화면입니다. 여기서 문자열 뒤집기 버튼을 클릭하면 'Hello Vue.js!!'가 뒤집어진 문자열이 화면에 나타나게 됩니다. 이때 콘..