고리타분한 개발자
[Vue JS] Components Within Components
이번에는 지난 포스트에 이어서 여러개의 컴포넌트를 사용하는 방법을 알아보도록 하겠습니다.지난번에는 task라는 이름의 template를 출력하는 컴포넌트를 만들어 보았는데요, 이번시간에는 좀더 나아가 task-list라는 리스팅 컴포넌트를 만들어 보도록 하겠습니다. DOCTYPE html> // main.jsVue.component('task-list', { template: ` {{task.task}} `, data() { return { tasks: [{ task: 'Go to the store', complete: true }, { task: 'Go to the email', complete: false }, { task: 'Go to the farm', complete: true }, { task..
[Vue JS] Components 101
때론 코드를 재사용할 일이 생기기도 합니다. 이번시간에는 components를 사용하는 방법에 대해 알아보겠습니다. DOCTYPE html> // main.jsVue.component('task', { template: 'Foobar'}) new Vue({ el: '#root'}) 위에는 index.html과 main.js 두개의 코드가 있습니다. main.js는 index.html의 src로 연결 되어있죠. main.js를 보면 task라는 이름의 component가 정의되어 있습니다. 이 컴포넌트는 Foobar를 뿌려주는 template를 가지고 있습니다. 컴포넌트는 과 같은 방법으로 사용할 수 있습니다. 결과값은 아래와 같이 나오게 됩니다. 하지만 여기에는 한가지 흥미로운 사실이 있습니다. slot..
[Vue JS] The Need for Computed Properties
이번시간에는 Vue computed사용법을 익혀보도록 하겠습니다. 코드부터 살펴보면, {{message}} {{reversedMessage}} var app = new Vue({ el: '#root', data: { message: 'Hello World' }, computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } }) Vue data부분에 message값을 'Hello World'로 주었습니다. 이 값은 {{message}}로 받을 수 있죠. computed부분에서는 message를 역순으로 변환하는 함수를 넣어줍니다. 즉, Hello World는 dlroW olleH가 되겠죠. computed에서 지정..