vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를
듣고 참조하여 정리하였습니다.
Vue.js 공식 문서
Introduction — Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Vue.js란?
Progressive Javascript framework for buiding user interfaces and front-end applications
Vue.js의 핵심
Reactivity (반응성)
Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다.
즉, 데이터가 움직이면 화면이 바로 변하고, 화면이 움직이면 데이터가 바로 변함을 이야기 합니다.
자바스크립트의 querySelector(), getElementById()와 같은 선택자 필요없이
Vue.js의템플릿 문법을 이용해 DOM에서 렌더링을 할 수 있습니다.
<html>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello.vue'
}
}) //결과 Hello.vue
-> 이 기능을 이용하여화면 구성(html)을 먼저 만들고, 데이터를 구성합니다.
화면에서 변하는것을 위주로 생각하고, 이 부분을 데이터로 만들어 줍니다.
설치방법
CDN: 프로젝트전프로토타입 또는 연습용
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
NPM: 대규모 어플리케이션 구축
· Node PackageManager 설치(node.js)
· Node를 설치하면 NPM이 따라옵니다.
· 자바스크립트 개발자들이 사용하는 js라이브러리들을 오픈시켜 놓은 공간(저장소)
· webpack모드 기반, NPM을 사용하여 다른 이가 만든 필요한 라이브러리를 가져와 설치할 수 있습니다.
· 재사용가능한 코드를 module, package라고 호칭합니다.
· package.json npm을 통해 다운, 업데이트 받는 모든configration파일 정보가 들어가 있어 확인이 가능합니다.
· npm init->package.json생성(package버전 관리용)
· vue설치: npm install vue
보통 이부분까지는 이미 설치가 완료되어 있습니다.
버전은 터미널에서 node-v와 npm-v로 확인 가능합니다.
CLI: Single page application 구축할 때 공식 CLI 제공
· command line interface 명령어 실행(보조)도구
· 프로젝트를 생성할때 명령어를 이용하여 생성하는 방식
프로젝트 생성(처음 한번 설치)
npm install -g @vue/cli
폴더 생성(폴더 생성시 마다 설치) 후, 미리보기
vue create vue-todo(폴더 이름)
cd vue-todo
npm run serve
폴더 생성시 보안 오류 발생시,
vue.cmd create vue-todo(폴더이름)
node module 빼고, 폴더 복사해 왔을 경우, run serve 하기 전,
npm install
그 외 필요 설치 툴: Vue.js devtools: 크롬 확장 프로그램
Vue instance
new Vue({
el: '#app',
})
· vue로 개발할 때 초기에 필수로 생성하는 단위입니다.
데이터, 메소드추가하여 화면 조작을 가능합니다.
Root(최고 상위 레벨)를 가르킵니다.
Object (객체)형태로 표현: 속성: “값”(key: value)형식으로 나타냅니다.
component
화면에서의 반복되는 구간을 하나의 component로 만듭니다.->재사용성 up
한 화면을 분할하여 각각의 부분을 component로 만듭니다.
코드의 반복을 피하기 위하여 필요합니다.
공통된 프레임이지만, 안의 데이터를 따로 관리합니다.
등록방법
1. 전역 등록
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
2. 지역 등록: 실무에서 주로 사용
new Vue({
el: '#app',
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer': {
template: '<footer>footer</footer>'
}
},
});
주의점
1. vue instance 안의 data가 객체 형식이 아닌, 함수 형식이어야 합니다.
이유: 컴포넌트를 여러번 반복하여 사용하였을 때, 같은 instance를 공유할 때, 문제가 생길 수 있습니다.
new Vue({
el: '#app',
data: function (){
return { msg : '' }
}
})
2. Singleroot element
예제) 형제 구조, h1, button에 상위의 싱글 태그로 감싸주어야 합니다.
<template>
<div>
<h1>{{ propsdata }}</h1>
<button v-on:click="sendEvent">send</button>
</div>
</template>
Props, Event 컴포넌트 통신 (데이터의 흐름)
· Props방식:Root (상위)에서 하위 레벨로이동할 때
·Emit Events 방식:하위에서 Root(상위)레벨로이동할 때
·같은 레벨과의 이동의 경우:Props, Event를 혼용하여 상위로 갔다가 하위로 전달
Pass Prop
상위에서 하위로 데이터를 내려줍니다.
props로 내려준 후, 상위에서 데이터가 업데이트 되면 하위에서도 자동으로 업데이트 됩니다.
1. 상위 컴포넌트에서 하위로 내려줄 데이터(A) 선언
2. 하위 script에서 props: ['속성 이름=B'] 로 정의
3. 하위 template에서 상위에서 가져올 데이터 속성 이름(B) 콜
4. 상위 template에서 하위 태그에 v-bind:props속성이름(B)="상위 내려줄 데이터(A, 1번)" 콜
props 선언 방법
· 배열(array): props 이름만 전달
props: ['name', 'price']
· 객체(object): 여러 옵션 추가 가능, value type에 안맞는 값을 넣었을 경우, 에러 메시지가 출력됩니다.
props: {
props 이름: props type,
}
//예제1
props: {
name: String,
price: Number,
}
//예제2: props value에 다시 객체 삽입한 경우,
props: {
name: {
type: String,
default: 'Alex',
required: true,
}
price: Number,
}Emit event
하위에서상위로이벤트를올려줍니다.
emit.event 후 하위에서 데이터가 변경되면, 상위에서도 자동으로 업데이트 됩니다.
하위컴포넌트에는이벤트이름만this.$emit('이벤트 이름')만넘겨주고,
상위메소드에서사용할함수정의
1. 하위 컴포넌트에서 상위로 올려줄 이벤트 메소드 함수 이름 지정, v-on:click="하위 메소드 함수 이름"
2. 하위 script, methods에서 지정한 함수 블럭 내 emit.event 처리 {this.$emit('이벤트 이름')}
3. 상위 template에서 하위 태그에 하위 이벤트 이름= "상위 메소드 함수 이름"
4. 상위 script, methods에서 사용한 메소드 함수 정의(최종적으로 사용한 함수)
구글 개발자 도구, vue devtool 을 통하여 이벤트와 컴포넌트 정보 확인가능
템플릿 문법
데이터 바인딩
{{ 속성 }} → 화면에 속성의 값을 plain text로 출력
<p> {{ msg }}</p>
javascript expression 가능
조건: only contain one single expression
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
text아닌, html코드 삽입을 할 경우 -> v-html directive 이용
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
directive
v- 로시작하여, vue가 통제하는 속성
a single JavaScript expression(with the exception v-for), argument
<p v-if="seen">Now you see me</p>
<a v-on:click="doSomething"> ... </a>
<a v-bind:href="url"> ... </a>
type별에 따라 쓰는 문법
· text → 데이터 바인딩 {{ }}
· Raw html → v-html directive
· HTML attributes ( src, class, id, style )→ v-bind directive
· props 속성이름 -> v-bind
· Dom event -> v-on directive
· 반복문 -> v-for
Computed, Watch
특정한 로직 또는 계산을 실시간으로 실행합니다.
Computed 속성
· 단순한계산값을 받아서 로직 실행합니다.
· 계산해야 하는 목표 데이터를 정의하는 선언형 프로그래밍 방식
· 간단한 값계산의 경우, watch보다 computed속성 사용을 추천합니다.
Watch 속성
· 감시할 데이터를 지정하고,그 데이터가 바뀌면 이런 함수를 실행하라는 명령프로그래밍 방식
· Computed보다 무거운로직동작을 사용합니다.
vue 파일 구조
Life Cycle
'💻CODING > react. vue' 카테고리의 다른 글
| [vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) (0) | 2020.11.22 |
|---|---|
| [vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) (0) | 2020.11.20 |
| [vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) (0) | 2020.11.18 |
| [vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) (0) | 2020.11.15 |
| [react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) (0) | 2020.09.22 |
댓글