고리타분한 개발자

이번 포스트에서는 제목과 같이 Attribute 와 Class 바인딩을 해볼 차례입니다. 우선 기본적인 button에 title을 주는 코드르 알아보도록 합시다. Hover Over 위와같이 입력후 버튼에 마우스를 가져다 대면, 저 글씨가 나오죠.이번에는 Vue data에 binding 시켜보도록 하겠습니다. Hover Over Me var app = new Vue({ el: '#root', data: { title: 'Now the title is being set through JavaScript.' }, }) 이쯤되면 v-bind를 통해 vue data부분에있는 title을 바인딩 시켰다는 설명이 없어도 코드만으로 이해할 수 있으실거라 생각되어 집니다. 참고로 'v-bind:' 는 ':'로 대체할 ..

안녕하세요. 지난시간에는 addEventListener 를 사용하여 버튼에 이벤트를 주었는데요, 이번 포스트에서는 v-on directive event listeners를 사용 해보려고 합니다. v-on은 vue에서 기본으로 제공하는 directive입니다. 사용법은 v-on:option 이런식으로 v-on뒤에 :option을 붙여주면 됩니다. 저희는 버튼을 클릭해서 리스트를 추가하는 이벤트를 만들려고 하니, v-on:click이런식으로 사용하면 되겠죠?코드를 통해 확인 하겠습니다. DOCTYPE html> Add Name var app = new Vue({ el: '#root5', data: { newName: '', names: ['Park', 'Lee', 'Kim', 'Jung'] }, method..

이번엔 기본적인 리스팅에 대해서 포스팅을 해보려고 합니다. 리스팅을 하기전에 데이터 바인딩을 먼저 간단하게 복습 해보고 진행하는 것이 좋을것 같네요. 아래 코드는 간단한 데이터 바인딩 입니다. DOCTYPE html> {{foo}}, {{name}} new Vue({ el: '#root', data: { foo: 'bar', name: 'monkey' } }) 결과: {{foo}}, {{name}} 자, 그럼 이번에는 array를 바인딩 해볼까요? DOCTYPE html> {{names}} new Vue({ el: '#root1', data: { names: ['Park', 'Lee', 'Kim', 'Jung'] } }) 결과: {{names}} array 바인딩이 정상적으로 작동하였으니 리스팅을 할 차..