[Vue] Vue 기초
Vue
=MVVM pattern의 view model layer에 해당하는 화면단 라이브러리
Vue특징
1. DOMListener
= 마우스 클릭 등 이벤트를 잡아서 자바스크립트와 연결해준다.
2. Data Bindings
= 자바스크립트의 데이터가 변했을 때 Data Bindings 이용해서 화면에 그것을 반영
3. Component
= 단방향 데이터 흐름 사용. 화면단위를 컴포넌트 조립으로 구성하여 코드 재사용 최대화
4. Reactivity
=데이터 변화에 따라서 화면에 자동으로 반영되어 그려지는
■ MVVM pattern = Backend 로직과 데이터 표현, 처리하는 부분을 분리하기 위한 구조.
■ View =사용자에게 보여지는 화면
■ HTML = 화면에 나타나는 어떤 태그, DOM정보를 넣는 것
DOM을 이용해서 자바스크립트로 조작할 수 있게 한다.
■ 자바스크립트 = 태그나 DOM내용을 조작
■ 생성자 함수=자바스크립트에서 어떤 함수를 이용해서 인스턴스를 생성하는 방법
1️⃣ Vue Instance
= Vue 생성자 함수로 인스턴스를 생성하는법
new Vue({
});Instance option 속성도 포함 가능
el, template, methods, data, created, watch...
new Vue({
template: "",
el: "",
methods: {},
data:{},
등....
});
Vue Instance lifecycle
instance 생성시 수행하는 초기화 작업
1. 데이터 관찰 2. 템플릿 컴파일 3. DOM에 객체 연결 4. 데이터 변경 시 DOM 업데이트
이 외에도 개발자의 커스텀 로직 추가 가능
created, mounted, updated, destroyed 등...
new Vue({
data:{a:1},
created: function(){
console.log("a is: "+this.a);
}
});
new Vue
new Vue로 instance를 생성할 때 Vue를 생성자라고 부른다.
뷰로 개발시 필요한 기능을 생성자에 미리 정의해 놓고 사용자가 그 기능 재정의하면 편하게 사용 가능하다
2️⃣ Vue Components
=화면 영역을 단위로 쪼개어 재활용 가능한 형태로 관리하는 것
코드의 재사용성이 높아지고 효율이 올라간다
① 전역 컴포넌트 등록
Vue.component('component name', component content);
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header',{
template: '<h1>Header</h1>'
});
Vue.component('app-content',{
template: '<div>content</div>'
})
new Vue({
el:'#app'
});
</script>
</body>
② 지역 컴포넌트 등록
<body>
<div id="app">
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
components:{
'app-footer':{template:'<footer>footer</footer>'}
}
});
</script>
</body>
<body>
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader={
template:'<h1>header</h1>'
}
new Vue({
el: '#app',
components:{
'app-header':appHeader
}
});
</script>
</body>
+) 컴포넌트와 인스턴스 차이
인스턴스를 생성하면 root component가 된다.
전역 컴포넌트는 인스턴스 생성할 때마다 따로 등록할 필요없다.
하지만 지역 컴포넌트는 인스턴스마다 새로 생성해주어야 한다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
</script>
<script>
var div=document.querySelector('#app');
div.innerHTML='hello wolds';
var viewmodel={};
Object.defineProperty(viewmodel,'str',{
get:function(){
console.log('접근');
},
set:function(newValue){
console.log('할당',newValue);
}
})
</script>
</body>
</html>
컴포넌트 통신 방식
= 컴포넌트 간의 통신 방식은 props, event이다.
그냥 N방향으로 마구잡이로 통신하게 되면 데이터 무결성 보안성 등 위험이 생긴다
그래서 상위, 하위 컴포넌트 끼리만 통신하는 규칙을 주었다.
데이터 흐름을 추적할 수 있게
상위 컴포넌트 → 하위 컴포넌트 : props 전달로 통신
하위 컴포넌트 → 상위 컴포넌트 : event emit 로 통신
① Props
{{props data}}
값이 반영되어 화면에 나타난다. 데이터 바인딩.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <app-header v-bind: 프롭스 속성 이름="상위 컴포넌트 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message"></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader={
template:'<h1>{{propsdata}}</h1>',
props: ['propsdata']
}
var appContent={
template: '<div>content</div>',
props:[]
}
new Vue({
el: '#app',
components:{
'app-header':appHeader,
'app-content':appContent
},
data:{
message:'hi',
num:10
}
});
</script>
</body>
</html>
② Event Emit
= 하위 컴포넌트에서 상위 컴포넌트에 통신 하는 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 이벤트 바인딩 수정</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!-- pass 이벤트를 app-header에서 발생시키고 이를 handlePass 메서드에서 처리 -->
<app-header v-on:pass="handlePass"></app-header>
<!-- increase 이벤트를 app-content에서 발생시키고 이를 increaseNumber 메서드에서 처리 -->
<app-content v-on:increase="increaseNumber"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// app-header 컴포넌트
var appHeader = {
template: '<button v-on:click="passEvent">Click Me</button>',
methods: {
passEvent: function() {
this.$emit('pass'); // 부모 컴포넌트로 'pass' 이벤트 전달
}
}
};
// app-content 컴포넌트
var appContent = {
template: '<button v-on:click="addNumber">Add</button>',
methods: {
addNumber: function() {
this.$emit('increase'); // 부모 컴포넌트로 'increase' 이벤트 전달
}
}
};
// Vue 인스턴스
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 10
},
methods: {
handlePass: function() {
console.log('pass 이벤트 발생!');
},
increaseNumber: function() {
this.num += 1; // num 값 증가
console.log('현재 숫자:', this.num);
}
}
});
</script>
</body>
</html>
+) this란?
현재 포함된 객체의 데이터를 의미
③ 같은 레벨내의 컴포넌트 통신
=부모에 event로 통신하고 자식에 props로 전달하면됨
3️⃣ Router
= 싱글 페이지 애플리케이셔 제작시 유용한 library
페이지 이동 기능 제공
설치
npm install vue-router --save<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
예제
<body>
<div id="app">
<div>
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<router-view></router-view>
</div>
<!--install Vue, routing-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
var router = new VueRouter({
// 페이지의 라우팅 정보
routes: [
// 로그인 페이지 정보
{
// 페이지의 url
path: '/login',
// name: 'login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
// 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: router,
});
</script>
</body>
Axios
=vue에서 권장하는 HTTP 통신 라이브러리.
Promise기반의 HTTP 통신 라이브러리.
+) HTTP 라이브러리 =브라우저에서 axios이용하여 HTTP 프로토콜, 데이터를 주고받기 위한 규칙
설치
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>npm install axios
사용 예시
methods: {
fetchData: function() {
axios.get('URL 주소');
}
}
예제
<body>
<div id="app">
<button v-on:click="getData">get user</button>
<div>
{{ users }}
</div>
</div>
//install
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
methods: {
getData: function() {
var vm = this;
axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(response) {
console.log(response.data);
vm.users = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
4️⃣ Vue Template
vue template 문법 = 뷰로 화면 조작하는 문법
① 데이터 바인딩
= 뷰 인스턴스에서 정의한 데이터를 화면에 표시
{{ }} Mustache Tag 활용하여 인스턴스의 data, computed, props 속성 연결 가능
<body>
<div id="app">
{{str}}
{{num}}
{{doubleNum}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:10,
str:'hi'
},
computed:{
doubleNum:function(){
return this.num*2;
}
}
});
</script>
</body>
② Directive
= 화면 조작 편하게 할 수 있게 하는 문법
v-if, v-bind, v-on 등...
<body>
<div id="app">
<button v-on:click="logText">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
logText:function(){
console.log('clicked');
}
}
});
</script>
</body>
③ Filters
= 텍스트 형식 편안하게 변환
{{ message | capitalize }}
new Vue({
filters: {
capitalize: function(value) {
if (!value) return "";
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
5️⃣ watch, computed
computed=단순 값 계산 등
watch=더 무거운계산
6️⃣ Vue CLI
= vue command line interface
명령어로 액션 수행하는 도구
설치
= AppData\npm\node_modules에 설치된다.
node -v
npm -v
sudo npm install -g @vue/cli
생성및 실행
vue create 프로젝트이름 //프로젝트 생성
cd 프로젝트이름 //해당 프로젝트 폴더로 이동
npm run serve //서버로 실행
7️⃣ SFC (singl File Component)
= 화면의 HTML, CSS, JS코드를 한 파일에서 관리하는 방법
<template>
<!-- HTML -->
</template>
<script>
// Javascript
</script>
<style>
/* CSS */
</style>
8️⃣ 자바스크립트 비동기 처리 패턴
비동기 처리=코드 연산 완료를 기다리지 않는 것
1. callback = 특정 연산이 완료된 후 실행될 코드를 함수 형태로 정의
2. promise = 비동기 작업 결과(완료 혹은 실패) 반환
3. promise+generator = 코드 블록 일시 중지 했다가
4. async & await = promise기반
⭐ Vue의 특징 전체 정리
Reactivity
=데이터 변화를 뷰에서 감지하여 화면에 보여줌
상위로 한 번 이동 후 하위로 다시 이동
인스턴스
=vue개발시 필수 생성해야하는 단위
컴포넌트
=화면영역 구분해서 개발하는 방식
컴포넌트 통신 = 데이터 규칙 제한하며 흐름 예측
- props =상위에서 하위
- event emit = 하위에서 상위
HTTP통신 라이브러리(axios)
템플릿문법
-데이터 바인딩 = 데이터 화면에 보여주는 것이 데이터 바인딩
- 뷰 디렉티브 = 뷰에서 추가적으로 제공하는 문법 (v-)
Vue CLI
= 명령어로 vue생성하는것