인생 데이터베이스

Vue.js

[Vue.js] Vue.js 시작하기 - 4 [ 컴포넌트를 사용한 작성방법 ]

1. 컴포넌트 생성하기 Vue.component('태그이름',{ template : '태그 작성' } ) 으로 컴포넌트를 생성 할 수 있다. html태그에서 만으로 깔끔한 코드 작성이 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) var app = new Vue({ el: '#app' }) Colored by Color Scripter cs 1-1. 하지만 무언가 부족하다. 그냥 html태그를 작성하는 것과 사실 그닥 다르지 않다고 느낀다. Vue인스턴스(부모데이터)로부터 component로..

Vue.js

[Vue.js] Vue.js 시작하기 - 3 [ 사용자 입력 핸들링 ]

1. methods Vue 인스턴스에서 함수를 정의하는 속성이다. 1-1. this this를 통하여 자기 자신의 속성에 접근 할 수 있다. this.message 를 통하여 data 속성 안의 message에 접근 하였다. 1-2. v-on 속성 v-on:이벤트명 를 사용하여 이벤트 리스너를 추가 할 수 있다. v-on:click="methods 속성값"을 통해 클릭 이벤트를 추가해보자. ※ DOM을 건드리지 않고 앱의 상태만을 업데이트한다고 한다. split('')을 통해 String → String[] reverse()을 통해 문자열 뒤집기 join('')을 통해 String[] → String 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2..

Vue.js

[Vue.js] Vue.js 시작하기 - 2 [ 조건문과 반복문 ]

1. v-if 조건문 v-if="boolean값"을 통하여, 태그를 보이기 / 숨김 처리를 할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Document 이제 나를 볼 수 있어요 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) Colored by Color Scripter cs 2. v-for 반복문 v-for="조건"을 통하여 반복하여 태그를 생성 할 수 있다. 객체 배열 todos의 인덱스 값 하나하나가 todo로 들어간다. todo.key를 통하여 value를 불러온다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2..

Vue.js

[Vue.js] Vue.js 시작하기 - 1 [ 선언적 렌더링 ]

선언적 렌더링 1. Vue.js 스크립트를 추가해준다. 2. 태그 내부에 new Vue를 통해 Vue 인스턴스를 생성. el : element의 약자 #app을 통해 id가 app인 div태그를 통제한다. data : Vue 인스턴스에서 사용되는 데이터. json방식의 key : value 형태로 들어간다. {{ }} : 머스태쉬(mustache) 태그 내부에 사용되며 data의 key를 입력해주면 출력된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Document {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) Colored by Color ..

Vue.js

[Vue.js]Vue Cli를 이용하여 Vue.js 설치하기

1. cli.vuejs.org/ Vue Cli 홈페이지를 들어간다. (CLI : Command-Line Interface) Vue CLI cli.vuejs.org 2. Get Started → 클릭 좌측의 Installation을 클릭 Vue Cli를 설치하기 위해선 Node.js 버전 8.9이상이 필요하다는 것을 알 수 있다. 3. nodejs.org/en/ nodejs 홈페이지에서 좌측버전(안정적인 버전)을 클릭하여 다운로드 해준다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 4. 필자는 VSC의 git bash를 사용중이다. nodejs가 정상적으로 설치 되었다면, node -v..