로메오의 블로그

VUE.JS 목록 App.vue 백업 코딩중이던 App.vue 파일을 복사해서 backup 합니다. vue ui > 플러그인 에서 상단에 vue-router 추가 버튼을 누릅니다. 플러그인이 추가되면 우리가 작업했던 app.vue 파일이 default로 제공되는 code로 변경됩니다. App.vue Home| About Home.vue backup했던 내용을 Home.vue 파일에 붙여넣기하고 component 이름과 경로를 일부 수정해줍니다. router-link 위치 변경하기 Home.vue component에서 Header component를 제거합니다. App.vue Header.vue TodoList Home| About VUE.JS 목록

VUE.JS 목록 axios 설치 http rest api를 호출하는 라이브러리 입니다. $ yarn add axios Fake Rest API https://jsonplaceholder.typicode.com/ Rest API 가상 데이터를 제공하는 사이트 입니다. App.vue 추가, 삭제도 정상적으로 작동하지만 새로고침 하면 원상복귀 됩니다. VUE.JS 목록

VUE.JS 목록 components/layout/Header.vue components에 layout 폴더를 만들고 header.vue 파일을 추가합니다. TodoList App.vue AddTodo.vue Component/AddTodo.vue 파일을 추가합니다. App.vue AddTodo.vue .... uuid 설치하기 $ yarn add uuid Submit 버튼을 눌르면 newTodo가 emit 됩니다. App.vue .... AddTodo component에 add-todo 이벤트 리스너를 추가합니다. methods에 addTodo를 추가합니다. 새로운 todo가 추가되었습니다. VUE.JS 목록

VUE.JS 목록 App.vue {{msg}} App.vue 파일을 열어서 기존 내용을 지우고 위와 같이 코드를 수정합니다. Component src/components/Todos.vue 파일을 생성하고 아래와 같이 코딩합니다. Todos App.vue App.vue 파일에 Todos 콤포넌트를 추가하고 저장합니다 Vue.js devtools에서 을 선택하면 todos Array가 들어있는것을 확인 할 수 있습니다. .... app에 속해있던 todos를 Todos 콤포넌트에 bind 합니다. 이제 Todos 콤포넌트에서도 todos를 확인 할 수 있습니다. Todos.vue {{todo.title}} Todos.vue에서 props로 todos를 받아서 for loop 를 구현합니다. TodoItem...

VUE.JS 목록 yarn 설치 $ npm install -g yarn $ yarn --version vue-cli 설치 ## yarn 일 경우 $ yarn global add vue-cli --> 2.X 버전이 설치됨 $ yarn global add @vue/cli--> 3.X 버전이 설치됨 ## npm 일 경우 $ npm install -g vue-cli --> 2.X 버전이 설치됨 $ npm install -g @vue/cli --> 3.X 버전이 설치됨 $ vue --version 3.12.0 저는 3.12.0 버전을 설치 했습니다. 프로젝트 생성 $ cd /my/project/path $ vue create first-project $ code first-project/ VSCode로 프로젝트를..