[Vue.js] 인스턴스, 컴포넌트, 라우터, axios, 템플릿 문법, CLI

*Vue는 무엇인가?

MVVM 패턴의 뷰모델 (viewModel) 레이어에 해당하는 화면(view)단 라이브러리

 

---

 

*Reactivity 구현

Object.defineProperty(대상 객체, 객체의 속성, {

//정의할 내용

}) // 객체의 동작을 재정의 하는 문법

​

Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때 동작을 정의
get : function(){
console.log('접근');
},

// 속성에 값을 할당했을 때 동작을 정의
set : function(newValue){
console.log('할당', (newValue));
div.innerHTML = newValue;
}
});

​

*Reactivity 라이브러리화 하기

라이브러리화란? HTML 파일에 같이 작성된 자바 스크립트(JS) 코드를

별도의 JS 파일에 함수로 구현하고 이 함수를 호출할 시 TreeGrid를 사용할 수 있도록 하는 것.

(function(){ //유효범위 지정
function init(){
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때 동작을 정의
get : function(){
console.log('접근');
},

// 속성에 값을 할당했을 때 동작을 정의
set : function(newValue){
console.log('할당', (newValue));
div.innerHTML = newValue;
render(newValue)
}
});
}

function render(value){
div.innerHTML = value;
}

init();
})();
​

 

---

 

*뷰 인스턴스

: 뷰로 개발할때 필수로 생성해야 하는 코드이자 단위

​

인스턴스 생성 예시)

<div id="app"></div>

<script>
var vm = new Vue({
           el : "#app",
           data : {
               message : 'hi'
           }
       });
</script>

 

 

​*생성자 함수 만들기

function Person(name, job){
this.name = name;
this.job = job;
}

// 객체에 담기
var p = new Person('josh', 'developer');

// p 정보 불러올 시
Person {name : 'josh', job : 'developer'}
job : 'developer'
name : 'josh'

​

*인스턴스에 사용할 수 있는 속성와 API

var vm = new Vue({
el : '#app'
date : {
message : 'hi'
},

methods : {
},

created : function(){
}
});

---

 

*뷰 컴포넌트

: 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.

컴포넌트 기반으로 화면을 개발 하게되면 재사용성이 올라가고 빠르게 화면을 제작할 수 있음.

​

*라우터 router

: 페이지 이동과 관련된 기능을 라우터로 할 수 있음

​

-라우터 등록

예시)

// 라우터 인스턴스 생성

var router = new VueRouter({
//라우터 옵션
})

//인스턴스에 라우터 인스턴스를 등록
new Vue({
router : router
})

​

-뷰 라우터 옵션

(1) routes : 라우팅 할 때 URL과 컴포넌트 값 지정

(2) mode : URL의 해쉬 값 제거 속성

​

new VueRouter({
mode : 'history', // URL에 #이 없어져서 깔끔한 주소 완성
routes : [
{ path : 'login', component : LoginComponent},
{ path : 'home', component : HomeComponent}
]
});

​-router-link

: 일반적으로 웹페이지에서 페이지 이동을 할때는 사용자가 URL을 다 쳐서 이동하지 않음.

이때 화면을 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 <router-link> 이용

​

사용법 예시)

<router-link to="이동할 url"></router-link>

​

---

 

*HTTP라이브러리와 Ajax 그리고 Vue Resource

 

-액시오스(axios)

: 뷰에서 권고하는 HTTP 통신 라이브러리.

Promise기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신

라이브러리들에 비해 문서화가 잘되어 있고 API가 다양함.

​

-뷰의 템플릿 문법

: 뷰 템플릿 문법이랑 뷰로 화면을 조작하는 방법을 의미한다.

템플렛 문법은 크게 데이터 바인딩과 디렉티브로 나뉨

​

1. 데이터 바인딩

: 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

​

2. 디렉티브 (ex. v-if, v-for ... )

: 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법.

화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음.

예를 들어 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있음

​

-watch속성

데이터의 변화에따라서 특정 로직을 수행함

​

사용 예시)

​

data : {
num : 10
},

watch : {
num : function(){
this.logText();
}
},

methods : {
addNum : function(){
this.num = this.num + 1;
},

logText : function(){
console.log('changed')
}
}

​

-watch 속성 vs computed 속성

​vue.js에서 watch 보다 computed 사용 권장

watch는 무거운 데이터, 데이터 요청에 적합,

computed는 가벼운 연산에 적합

​

---

 

- Vue CLI

1. node -v // 버전은 10이상이여야 함

2. npm -v // 버전은 6이상이여야 함

3. npm install -g @vue/cli

> 관리자 권한이 아닐때 나는 에러 대처

sudo npm install -g @vue/cli

​

4.

[Vue CLI 2.x]

vue init '프로젝트 이름', '프로젝트 폴더 위치'

​

[Vue CLI 3.x]

vue create '프로젝트 폴더 위치'

​

vue create vue-cli

*뷰 CLI를 4.x 버전대로 설치했으면 Vue3(preview)가

아닌 Vue2로 선택해서 진행할 것

​

---

 

-axios 사용법

npm install i axios -- 터미널창에 입력

import axios from 'axios'

var url  = 'url'
var data = {
usesrname = this.username;
password = this.password;
}

axios.post(url, data)
.then(function(response){
console.log(response)
})

.catch(function(error){
console.log(error)

});

​

​