알렉스 페레이라의 격투 블로그

뷰 라우터란? 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리. https://router.vuejs.org/guide/ Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM 방식 2가지가 있음. CDN 방식 NPM으로 프로젝트를 생성하지 않고 HTML 파일에서 라우터를 사용하려면 아래 CDN 링크를 추가. NPM 방식 Vue CLI로 프로젝트를 생성하거나 NPM 기반으로 프로젝트를 생성한다면 아래 명령어를 사용한다. npm install vue-router@4 TIP Vu..

※이벤트는 올라가고 데이터(props)는 내려온다 하위 컴포넌트로 데이터(props)내려주기 상위 컴포넌트로 이벤트(emit)발생시키기 같은 컴포넌트 레벨간의 통신방법 컴포넌트에서는 데이터를 root로 emit하고, root에서는 props를 통해 데이터를 특정 컴포넌트로 내려준다.

Vue란? Reactivity(반응성) HTML의 데이터 변화를 Vue라이브러리에서 감지해서 View를 자동으로그려주는것. 인스턴스(Vue 객체) Vue API를 사용하기 위해선 아래와같이 Vue객체를 선언한 뒤 사용해야 한다. {{ message }} Vue 컴포넌트 Vue.component('컴포넌트 이름', 컴포넌트 내용)메소드를 아래와 같이 사용한다. 아래와같이 Root 컴포넌트의 아래에 입력된다.

1. node.js https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VSC https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform -..

Vue설치를 끝낸 후, 어느 코드나 그렇듯 프로젝트를 생성해야 한다. VSC에서 미리 생성해둔 workspace로 이동해 아래와 같이 명령어를 입력한다. vue create {프로젝트명}을 입력한다. Vue 3을 선택하자. 설치중.. 설치 완료 아래와 같이 설치된다. 프로젝트 폴더안에 들어가, npm run serve 명령어로 서버를 올려본다. 성공! http://localhost:8080/로 접속해보자. 성공!

vue를 설치해보자. 처음엔 react를 생각했지만 vue로 변경한 이유는 '쉽대서' 1. node.js 설치 https://leonjk3.tistory.com/77 node.js 설치하기 아래 사이트에 접속한다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽 버전을 설치한다. 나는 최신버전을 사용하면 두드러기가 나는 병이 있다. Ne leonjk3.tistory.com 2. Visual Studio Code설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefine..