코알못

페이지 이동을 위한 라이브러리인 router 을 배워보자! 아래 명령어를 입력하여 vue-router 을 설치한다 (저자는 vue3 를 사용하며 해당 버전에 맞게 설정을 진행할 예정이다.) // vue3 $ npm i vue-router@next // vue2 $ npm install vue-router src 하위에 router.js 를 생성한 뒤 아래와 같이 '/' 일시 Home.vue, 그외 URL 호출시 'ErrorPage.vue' 를 보여주도록 한다. // router.js import {createWebHistory, createRouter} from "vue-router"; import ErrorPage from "./views/ErrorPage"; import Home from "./vie..

저번 시간에는 데이터 양방향 처리하는 방법에 대해 알아보았다. https://co-de.tistory.com/131?category=884529 [Vue] 데이터 양방향 처리 (v-model) 저번 시간에는 v-if, v-show 를 통해 데이터를 조건부 처리하는 방법을 배웠다 https://co-de.tistory.com/130 [Vue] 데이터 조건부 처리 (If-Else, Show) 지난 시간에는 Array 데이터를 처리하는 방법을 배웠다.. co-de.tistory.com 이번시간에는 변경 값에 대한 데이터를 처리하는 실습을 진행해본다! 우선 computed 에 대해 알아보자! 컴포넌트를 하나 생성하여 아래와 같이 작성한다. ComputedWatch.vue {{msg}} {{reversedMsg}..

저번 시간에는 v-if, v-show 를 통해 데이터를 조건부 처리하는 방법을 배웠다 https://co-de.tistory.com/130 [Vue] 데이터 조건부 처리 (If-Else, Show) 지난 시간에는 Array 데이터를 처리하는 방법을 배웠다 https://co-de.tistory.com/129 [Vue] v-for 를 이용한 Array 데이터 처리 지난 시간에는 State 와 Props 를 이용하여 데이터를 다루는 방법을 실습했다. h.. co-de.tistory.com 이번 시간에는 데이터 양방향 처리를 하는 실습을 진행하도록 한다! 양방향 처리 라는 단어를 들었을시 어렵게 느껴지지만 예를 듣고나면 어렵지 않은 개념이다. 글자를 입력시마다 화면에 실시간으로 표기하도록 하는것이 양방향 처리..

지난 시간에는 Array 데이터를 처리하는 방법을 배웠다 https://co-de.tistory.com/129 [Vue] v-for 를 이용한 Array 데이터 처리 지난 시간에는 State 와 Props 를 이용하여 데이터를 다루는 방법을 실습했다. https://co-de.tistory.com/128 [Vue] State 그리고 Props 이전 시간에 컴포넌트를 구성하는 실습을 진행하였으며 https://co-de.ti.. co-de.tistory.com 이번 시간에는 데이터가 조건에 일치, 불일치 할 때 원하는 처리를 하는 실습을 하도록 한다! IfElseShow.vue True False True False {{item.text}} 하나씩 보도록 하자 우선 v-if 조건에 맞을시 출력하도록 하며 ..

지난 시간에는 State 와 Props 를 이용하여 데이터를 다루는 방법을 실습했다. https://co-de.tistory.com/128 [Vue] State 그리고 Props 이전 시간에 컴포넌트를 구성하는 실습을 진행하였으며 https://co-de.tistory.com/127 [Vue] Vue 컴포넌트 구성해보기 저번 시간에 Vue 프로젝트를 간단하게 만들어 봤으며 [Vue] Vue 란? (프로젝트 생성 까지 co-de.tistory.com 이번 시간에는 Array 형태의 데이터를 처리하는 방법을 배워보자! 반복적인 데이터 형태를 처리할때는 v-for 을 사용하여 구현 가능하다. 아래와 같이 for 문을 구현하면 1-10까지 데이터가 i 에 대입되며 key 는 필수로 변경을 감지하는 역할을 한다...

이전 시간에 컴포넌트를 구성하는 실습을 진행하였으며 https://co-de.tistory.com/127 [Vue] Vue 컴포넌트 구성해보기 저번 시간에 Vue 프로젝트를 간단하게 만들어 봤으며 [Vue] Vue 란? (프로젝트 생성 까지) 구글에 검색해보면 오픈소스 프로그레시브 자바스크립트 프레임워크 라고 나오는것을 볼 수 있다. 하나씩 co-de.tistory.com 이번 시간에는 State, Props 를 알아보도록 하자! 저자가 이해한 두가지 개념에 대한 정의는 아래와 같으며 State 해당 컴포넌트에서 처리할 데이터를 정의 Props 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 받아 사용할 데이터 정의 설명으로는 이해하기 어려우므로 실습을 통해 알아보자! 우선 Box.vue 를 생성한다..

저번 시간에 Vue 프로젝트를 간단하게 만들어 봤으며 [Vue] Vue 란? (프로젝트 생성 까지) 구글에 검색해보면 오픈소스 프로그레시브 자바스크립트 프레임워크 라고 나오는것을 볼 수 있다. 하나씩 보자면 - 오픈 소스 : 무료 - 프로그레시브 : 진보적인 , 앞서 나아가는 - 자바스크립트 co-de.tistory.com 이번 시간에는 컴포넌트를 구성 하는 실습을 진행해보자! 컴포넌트는 화면을 구성하는 단위로 3가지 컴포넌트를 만들어 볼 예정이다. - Header.vue - Menu.vue - Content.vue 우선 프로젝트에서 생성된 App.vue 파일은 최상위 컴포넌트로 해당 컴포넌트에서 3개의 컴포넌트를 불러와 배치 할 것이다. 우선 vue 파일 구성을 보면 아래와 같이 세가지로 나뉘며 각각 ..

구글에 검색해보면 오픈소스 프로그레시브 자바스크립트 프레임워크 라고 나오는것을 볼 수 있다. 하나씩 보자면 - 오픈 소스 : 무료 - 프로그레시브 : 진보적인 , 앞서 나아가는 - 자바스크립트 : 자바스크립트 기반 언어 - 프레임 워크 : 프로젝트를 쉽게 구현할 수 있도록 틀, 구조, 규약 합쳐보면 vue 는 앞서 나가는 자바스크립트 기반 무료 틀 이다. 이제 실습을 하면서 배워 나가도록 하자! 우선 vue-cli 를 설치한다. vue-cli는 기본으로 필요한 vue 프로젝트를 생성해주는 도구이다. $ npm -v 8.12.1 $ npm install -g @vue/cli $ vue -V @vue/cli 5.0.4 이제 vue-cli 설치를 완료했다면 프로젝트를 생성한다. $ vue create hell..