할수있다!긍정왕

========== 라이브러리 axios_HTTP라이브러리와 Ajax 그리고 Vue Resource========================

# 액시오스

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

https://github.com/axios/axios

# Ajax

비동기적인 웹 애플리케이션 제작

# Vue Resource

https://github.com/pagekit/vue-resource

========== 라이브러리 axios_소개 및 오픈소스 사용하기 전 알아야 할것들 =======================

/*
자바스크립트의 비동기 처리 패턴
 1. callback
 2. promise
 3. promise + generator
 4. async & await

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 */

============================ 라이브러리 axios_실습 및 this 설명 =========================

Login을 클릭하셨을 경우 주소가 /login으로 바뀌는 것을 보실수 있습니다.

* 오타가 있었습니다.path 경로에 / 를 써주세요!

주소에 /login 을 추가해 주시면 login이라는 글자가 나옵니다.

* 뷰 라우터 

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리

* https://router.vuejs.org/kr/installation.html

* 뷰 라우터 설치

# CDN방식

<script src = "https://unpkg.com/vue-router/dist/vue-router.js">

#NPM방식

npm install vue-router

* router 파일 생성 후 작성해 주세요 

* 스크립트 순서 중요합니다!

====================뷰 라우터 인스턴스 연결 및 초기상태 안내===============

# 알려드리기 위한것이니 따라 하지 않으셔도 됩니다.

---------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

실습문제 : url 은 main으로 컴포넌트 이름은 MainComponent

-------------답 ------------------------------------------------------------------------------------------------------------------

==================컴포넌트 통신방법-응용==========================================

-------------------------------컴포넌트 같은 레벨 간의 통신방법 구현 -------------------------------------------------------

새로운 파일을 생성 component-same-level.html

아까 처럼 길이 쭉 갈수가 없을 경우 돌아서 가야하는 돌아서 가야할 경우를 보여드리는 것임

/*  참고 사이트 부분을 정리 */

생성자 함수 사용하기 

1. 생성자 함수를 작성함으로써 개체를 정의

2. new키워드를 사용하여 개체의 인스턴스를 만듬

=====================컴포넌트 통신방법 ==========================================

------------------------------------기본컴포넌트 통신-------------------------------------------------------------------------

* 컴포넌트 통신방식 (Componets Communication)

뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖음 .

따라서 컴포넌트 간에 데이터를 주고 받기 위해서는 규칙을 따라야함 

* 상위에서 하위로 데이터를 내려줌 , 프롭스 속성

* 하위에서 상위로 이벤트를 올려줌, 이벤트 발생 

------------------------------------기본컴포넌트 통신방법(통신규칙이 필요한 이유)----------------------------------------

데이터의 흐름을 추적할 수 있음 

------------------------------------기본컴포넌트 통신방법(기본_Props속성)-------------------------------------------------

------------------------------------기본컴포넌트 통신방법(기본_Props속성의 특징)-------------------------------------------

message 부분을 고치고  AppHeader 부분으로 내려왔을 경우

AppHeader의 data 부분도 바뀌는 것을 볼수 있습니다.  Reactivity의 것임을 알 수 있습니다.

---------------------------------------------------기본컴포넌트 실습-----------------------------------------

#문제 :  props를 이용하여 10이 나올수 있도록 하기 

-------------수업 답안-------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------

결과 

이렇게 나오는 것을 볼 수 있습니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit)-------------------------------------------

새로운 파일을 생성하기

이런식으로 화면이 나온것을 보실수 있습니다.

버튼에 이벤트를 주는 것임

이런식으로 click me를 클릭을 하게  되면 event 창에서 보면 어떻게 나오는지 알수 있습니다. 

지금 이벤트를 두번을 눌러서 두개가 나온 상황입니다.

------------------------------------기본컴포넌트 통신방법(기본_event emit 콘솔 창에 출력하기)----------------------------

------------------------------------기본컴포넌트 통신방법(기본_event emit 실습)-------------------------------------------

# num의 값을   2를 증가시키는 것을 해보십쇼

------------------------------------답--------------------------------------------------------------------------------------------

2씩 증가하는 것을 보실수 있습니다.

add를 클릭하였을 경우 

------------------------------------컴포넌트 통신방법(기본뷰 인스턴스에서의 this)-------------------------------------------

Console창에서 실행합니다.  console에서 한칸 뛰기는 shift+ enter누르시면 됩니다.

저장한 뒤 console창에 들어가서 찍어보면 Num이 나오는 것을 볼수 있습니다.

this.num 은 data의 num을 볼 수 있다.

/*

생성자 공부를 위한 링크 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function

*/

=====================컴포넌트 소개 ==================================

# 뷰 컴포넌트 

컴포넌트는 화면의 영경르 구분하여 개발할 수 있는 뷰의 기능 ,

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

영역을 구분햇을 때 컴포넌트 간의 영역이 생김.

==================컨포넌트 등록 및 실습====================================

===================전역컴포넌트 =========================================

playground  --> component.html  파일을 생성한 후 

인스턴스를 생성하면  Root  컴포넌트가 됩니다.

실행시켰을 경우 

컴포넌트를 생성 하나 더 해보기!

전역컴포넌트를 사용하는 방법 

========================컴포넌트 지역 컴포넌트 등록 ================================

* components  인데 component 라고 써놓고 한창을 해맸었어요 ㅠㅠ 안되시는 분들은 오타가 있는지 확인해주세요!

=================컴포넌트와 인스턴스와의 관계========================================

AppFooter는 나오지 않는 것을 볼수 있습니다.

console창에서 에러 부분을 보시면 

 * 전역컴포넌트는 따로 인스턴스를 생성하지 않아도 되지만, 지역컨포넌트는 인스턴스를 생성해야함

그러면 이상없이 Footer부분도 나오는 것을 볼수 있습니다. 

인스턴스와 생성자 함수

--------------------------------------------------------------------------------------------------------------------

인스턴스 옵션 속성

# 뷰 인스턴스

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드 

인스턴스 생성

new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는 지 콘솔 창에서 확인 가능

var vm = new Vue(); //변수 안에 인스턴스를 넣음

console.log(vm);

console  창에서 vm을 쳤을 때  Vue의 기능이 나오는 것을 볼수 있습니다.