고리타분한 개발자

이번에는 Tab을 만들어 보도록 하겠습니다. 일단 탭에 들어갈 내용들을 리스팅 해보도록 하겠습니다. DOCTYPE html> body { padding-top: 40px; } About About Us About Our Culture 리스팅 작업이 정상적으로 진행되면 bulma에서 tabs부분을 가져오도록 하겠습니다. Pictures Music Videos Documents bulma에서 가져온 코드를 우리가 만든 코드에 심어주면 DOCTYPE html> body { padding-top: 40px; } Here is the content for the about us tab. Here is the content for the about our culture tab. Here is the content ..

이번에는 modal 이용하여 컴포넌트 사용을 연습해 보려고 합니다.역시 bulma의 component-modal 부분을 사용해보도록 하겠습니다. (https://bulma.io/documentation/components/modal/) DOCTYPE html> body { padding-top: 40px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis effi..

기본적인 컴포넌트 사용에 대하여 알아보았으니, 이젠 컴포넌트가 어떻게 사용되는지 연습해볼 차례입니다. 우선 진행하기에 앞서 "https://bulma.io/" 사이트를 한번 둘러봐주세요. 이번시간에는 bulma라는 api를 사용하도록 하겠습니다. DOCTYPE html> body { padding-top: 40px; } Hello World Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum fe..

이번에는 지난 포스트에 이어서 여러개의 컴포넌트를 사용하는 방법을 알아보도록 하겠습니다.지난번에는 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..

때론 코드를 재사용할 일이 생기기도 합니다. 이번시간에는 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 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에서 지정..

이번 포스트에서는 제목과 같이 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 바인딩이 정상적으로 작동하였으니 리스팅을 할 차..

자, 이번에는 코딩을 도와줄 Vue Devtools를 설치 해볼텐데요. 크롬 확장 프로그램입니다. 물론 크롬에서만 사용 가능하지요. 구글에 vue dev tools를 검색후 아래 확장 프로그램을 다운 받아 줍니다. 설치가 완료되면 아래와 같이 크롬 상단에 확장프로그램 아이콘이 생길탠데요. Vue 코드가 없다면 Vue.js not detected라고 표시되어질 겁니다. 이전 포스트에서 vue를 사용하여 코드를 작성하였음에도 불구하고 Vue.js not detected라고 표시되어지는 이유는 바로 로컬 경로 때문인데요. 이 문제를 해결하기 위해 파일 URL에도 접근을 허용할수 있게 해주어야 합니다. 방법은 확장프로그램 관리에서 Vue.js devtools를 찾은뒤 파일 URL에 대한 액세스 허용란에 체크 표..