Vue.js

출처 : Vue.js 입문 (장기효)

"Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는 데 있다."

  • Vue.js는 웹페이지 화면을 개발하기 위한 프런트엔드 프레임워크 라고 한다.
  • Vue.js는 화면단 라이브러리이자 프레임워크라고도 볼수 있다.
  • Vue.js의 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지우너하지만 프레임워크의 기능인 라우터,상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.
라이브러리 : 개발 생산성을 높이기 위해 틀과 규칙에 따라 개발하도록 미리 구조를 정의 해놓은 도구
프레임워크 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음

뷰의 장점

  1. 배우기가 쉽다.
  2. 리액트화 앵귤러에 비해 성능이 우수하고 빠르다.
  3. 리액트의 장점과 앵귤러의 장점을 갖고 있다.

UI 화면단 라이브러리

Vue.js는 UI화면 개발 방법중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리 이다.

MVVM 패턴 : 모델(Model) - 뷰(Vue) - 뷰 모델(ViewModel)

이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제이 로직을 분리하여 코드를 더 직관적으로 이해하기 쉽고 유지 보수가 편해진다.

MVVM 구조에서의 Vue.js 위치
용어 설명
뷰(View) 사용자에게 보이는 화면
돔(DOM) HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model) 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding) 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel) 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트 기반 프레임워크

뷰가 가지는 또 하나의 큰 특징은 바로 컴포넌트(Component) 기반 프레임워크 이다.

컴포넌트(Component) : 마치 레고 블록과 비슷하다. 뷰의 컴포넌트를 조합하여 화면을 구성할수 있다.
화면을 컴포넌트로 구조화한 컴포넌트 간 관계도

컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기 쉽고 HTML코드에서 화면의 구조를 직관적으로 파악 및 빠른 구현이 가능하다.


리액트와 앵귤러의 장점을 가진 프레임워크

뷰는 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크 입니다.

양방향 데이터 바인딩(Two-way Data Binding) : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것.

단방향 데이터 흐름(One-way Data Flow) : 컴포넌트의 단방향 통신을 의미합니다. 컴포넌트 간에 데이터를 전달 할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게 끔 구조화 됨.

"뷰는 기존 프레임워크 리액트와 가장 유사하지만 리액트보다는 좀 더 많은 사람들이 쉽게 접근할 수 있도록 제작하였다."

  1. 크롬 브라우저
  2. 이클립스
    본인은 닷홈에 도메인이 있고, FTP연결해서 개발 예정
    2020-01-16 추가 /// 내가 사용하는 닷홈에서는 npm,node.js가 불가해서 로컬에 설치해서 진행할예정....
  3. 뷰 개발자 도구(Vue.js devtools,크롬 확장 플러그인)
    Vue.js devtools 설치

뷰 시작하기

http://jjgodcom.com/view/oldHome/vue/assets/img/index/vueJs02-2.png
  1. HTML 파일 생성
  2. 뷰 소스 코드 추가
  3. 브라우저로 실행

Hello Vue.js 출력하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">{{ message }}</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data: {
				message: "Hello Vue.js!"
			}
		});
	</script>
</body>
</html>

02-2 출력결과

위에 이미지처럼 출럭되면 성공!


크롬 개발자 도구로 코드 확인하기

앞서 진행한 예제에서 크롬 개발자도구를 실행후 아래 이미지처럼 출력되면 Vue.js 연동이 된것을 알수 있다.

02-2a 출력결과

"인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다."

뷰 인스턴스의 정의화 속성

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.

뷰 인스턴스 생성
뷰 인스턴스 형식
뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.

생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다.


뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생서할때 재정의할 data,el,template 등 속성을 의미합니다.

속성 설명
el 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정
data 새로운 속성을 추가하고 해당 속성에 값을 주게 되면, 화면에 랜더링 할 때 해당 데이터를 출력함.
template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성.
뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods 화면 로직 제어와 관계된 메서드를 정의하는 속성.
마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
created 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.

뷰 인스턴스의 유효 범위

인스턴스의 유효 범위란?

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.

뷰 인스턴스가 HTML에 적용되는 모습

뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 합니다.

라이프 사이클 속성에는 8개의 인스턴스의 생성,변경,소멸과 관련하여 총 8개가 있다.

뷰 라이프 사이클 다이어그램

라이프 사이클 단계를 크게 나누면 인스턴스의 생성,생성된 인스턴스를 화면에 부착,화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어집니다.

  1. beforeCreate
    가장 처음으로 실행되는 라이프 사이클 단계입니다.
    data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없습니다.
  2. created
    beforeCreate 다음에 실행되는 단계입니다.
    data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직을 이용하여
    data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할수 있다.
    아직 인스턴스가 화면에 부작되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다.

    data 속성과 methods 속성에 접근할 수있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생서되고 나서는 실행되는 단계이기 때문에
    서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
  3. beforeMount
    created단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후
    el속성에 지정한 화면에 인스턴스를 부착하기 전에 호출되는 단계
  4. mounted
    el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면
    에 접근할수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
  5. beforeUpdate
    el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다.
    뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시합니다.

    변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을수 있다.
    만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 출력되지 않는다.
  6. update
    데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
    데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이으로 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계.
    이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed,watch와 같은 속성을 사용해야 한다.

    데이터 값을 갱신하는 로직은 beforeUpdate에 추가 하고
    화면 요소 와 관련된 로직은 updated에 추가해야 한다.
  7. beforeDestroy
    뷰 인스턴스가 파괴되기 직전에 호출되는 단계
    뷰 인스턴스의 데이터를 삭제하기 좋은 단계
  8. destroyed
    뷰 인스턴스가 파괴되고 나서 호출되는 단계입니다.

라이프 사이클 실습 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">{{ message }}</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data: {
				message: "Hello Vue.js"
			},
			beforeCreate: function(){
				console.log("beforeCreate");
			},
			created: function(){
				console.log("created");
			},
			mounted: function(){
				console.log("mounted");
			},
			updated: function(){
				console.log("updated");
			}
		});
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

라이프 사이클 실습 예제 출력

로그를 보면 updated 속성 함수는 호출되지 않았다.

updated 속성 함수는 뷰 인스턴스에서 데이터 변경이 일어나 화면에 다시 그려 졌을때 호출되는 로직이기 때문에 출력이 안된다.


message 값을 변경한 라이프 사이클 실습 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">{{ message }}</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data: {
				message: "Hello Vue.js"
			},
			beforeCreate: function(){
				console.log("beforeCreate");
			},
			created: function(){
				console.log("created");
			},
			mounted: function(){
				console.log("mounted");
				this.message = "변경"; ///여기 추가함
			},
			updated: function(){
				console.log("updated");
			}
		});
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

라이프 사이클 실습 예제 출력

mounted 단계에서 데이터를 변경했기 때문에 updated 단계 로직이 모두 동작한다.

컴포넌트 등록하기

컴포넌트를 등록하는 방법은 전역지역의 두가지가 있다.

지역(Local) : 특정 인스턴스에서만 유효한 범위를 갖는다.
전역(Global) : 여러 인스턴스에서 공통으로 사용 가능하다.

전역 컴포넌트 등록

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 된다.


// 전역 컴포넌트 등록 형식

Vue.component("컴포넌트 이름",{
	// 컴포넌트 내용
});

컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다.
컴포넌트 내용 : template,data,methods등 인스턴스 옵션 속성을 정의할 수 있다.

전역 컴포넌트 등록하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<button>컴포넌트 등록</button>
		<my-component></my-component> <!-- 전역 컴포넌트 표시 -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		// 컴포넌트 등록
		Vue.component("my-component",{
			template: "<div>전역 컴포넌트가 등록되었습니다!</div>"
		});
	
		new Vue({
			el: "#app"
		});
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

전역 컴포넌트 등록 결과
지역 컴포넌트 등록

인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.


// 지역 컴포넌트 등록 형식

new Vue({
	components: {
		'컴포넌트 이름': 컴포넌트 내용
	}
});


지역 컴포넌트 등록하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<button>컴포넌트 등록</button>
		<my-local-component></my-local-component> <!-- 전역 컴포넌트 표시 -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var cmp = {
			//컴포넌트 내용
			template: "<div>지역 컴포넌트가 등록되었습니다!</div>"	
		}	
	
		new Vue({
			el:"#app",
			components:{
				"my-local-component":cmp
			}
		});
		
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

지역 컴포넌트 등록 결과

지역 컴포넌트와 전역 컴포넌트의 차이

지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서는 인스턴스의 유효 범위를 이해애야 합니다.

인스턴스의 유효 범위 : HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것.

지역 컴포넌트와 전역 컴포넌트 등록하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<h3>첫 번째 인스턴스 영역</h3>
		<my-global-component></my-global-component>
		<my-local-component></my-local-component>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		// 전역 컴포넌트 등록
		Vue.component("my-global-component",{
			template:"<div>전역 컴포넌트 입니다.</div>"
		});
	
		// 지역 컴포넌트 내용
		var cmp = {
			template: "<div>지역 컴포넌트 입니다.</div>"
		};
	
		new Vue({
			el:"#app",
			// 지역 컴포넌트 등록
			components:{
				'my-local-component':cmp
			}
		})
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

지역 컴포넌트 등록 결과
인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 확인하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app1">
		<h3>첫 번째 인스턴스 영역</h3>
		<my-global-component></my-global-component>
		<my-local-component></my-local-component>
	</div>
	<hr>
	<div id="app2">
		<h3>두 번째 인스턴스 영역</h3>
		<my-global-component></my-global-component>
		<my-local-component></my-local-component>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		//전역 컴포넌트
		Vue.component("my-global-component",{
			template: "<div>전역 컴포넌트 입니다.</div>"
		});
		
		//지역 컴포넌트 내용
		var cmp = {
			template: "<div>지역 컴포넌트 입니다.</div>"
		}
	
		new Vue({
			el: "#app1",
			//지역 컴포넌트 등록
			components:{
				"my-local-component":cmp
			}
		});
		// 두번째 인스턴스	
		new Vue({
			el: "#app2"
		})
	</script>
</body>
</html>

해당 예제 콘솔 결과 값이다.

example03-2c 결과

app2 인스턴스 영역안에 컴포넌트를 선언하지 않아 오류를 나타낸다

전역 컴포넌트는 한번 등록하면 어느 인스턴스에서든지 사용 가능하다.

지역 컴포넌트는 새 인스턴스를 생성할 떄마다 등록해 줘야 한다.


뷰 컴포넌트 실습 View
실습 #1 - 'todo-footer' 컴포넌트 전역 등록
- <p>This is another global child component</p>를 template으로 갖는 컴포넌트를 등록해 보기

실습 #2 - 'todo-list' 컴포넌트 지역 등록
- <p>This is another local child component</p>를 template으로 갖는 컴포넌트 등록해보기

실습 #3 - 전역 컴포넌트 등록을 위한 'todo-footer' 태그 추가

실습 #4 - 지역 컴포넌트 등록을 위한 'todo-list' 태그 추가

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<header>
			<h3>{{message}}</h3>
		</header>
		<todo-list></todo-list>
		<todo-footer></todo-footer>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		
		Vue.component("todo-footer",{
			template: "<p>This is another global child component</p>"
		});
		
		var cmp = {
			template:"<p>This is anoter local child component</p>"
		}
	
		var app  = new Vue({
			el: "#app",
			data: {
				message: "This is a parent component"
			},
			components:{
				"todo-list":cmp
			}
		});
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

quiz03-2 결과

컴포넌트 간 통신과 유효 범위

뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이자라도 데이터를 공유할 수 없습니다.

컴포넌트 마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문이다.

각 컴포넌트의 유효 험위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다.


컴포넌트 유효 범위 증명 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<my-component1></my-component1>
		<my-component2></my-component2>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	// 첫번째 컴포넌트 내용
	var cmp1 = {
		template: "<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>",
		data : function(){
			return {
				cmp1Data : 100
			}
		}
	}
	
	//두번째 컴포넌트 내용
	var cmp2 = {
			template: "<div>두 번째 지역 컴포넌트 {{cmp2Data}}</div>",
			data : function(){
				return {
					cmp2Data : cmp1.data.cmp1Data
				}
			}
	}
	
	new Vue({
		el:"#app",
		//지역 컴포넌트 등록
		components:{
			"my-component1":cmp1,
			"my-component2":cmp2
		}
	});
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example03-3 결과

{{ cmp2Data }}에 아무값도 출력되지 안은 이유는 {{my-component2}}에서 {{my-component1}}의 값을 직접 참조할 수 없기 때문이다.



상·하위 컴포넌트 관계

상위 - 하위 컴포넌트 : 트리 구조에서 부모 노드,자식 노드처럼 컴포넌트 간의 관계가 부모,자식으로 이루어진 컴포넌트를 의미합니다.

상위-하위 컴포넌트 간 통신 방식

상위에서 하위 컴포넌트로 데이터 전달하기

props 속성
props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<!-- 상위 컴포넌트의 HTMl코드 -->
	<child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	
	// 하위 컴포넌트의 props 속성 정의 방식

	Vue.component('child-component',{
		props:['props 속성 이름']
	});
	</script>
</body>
</html>

v-bind속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props속성을 넣는다.

오른쪽 값으로 하위 컴포넌트에 전달할 사우이 컴포넌트의 data 속성을 지정한다.


props 속성을 사용한 데이터 전달 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- 4 -->
		<child-component v-bind:propsdata="message"></child-component>
		<!-- 팁: 오른쪽에서 왼쪽으로 속성을 읽으면 된다 -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	//2
	Vue.component("child-component",{
		//3
		props:["propsdata"],
		//5
		template:"<p>{{ propsdata }}</p>"
	});
	
	//1
	new Vue({
		el:"#app",
		data:{
			message: "hello Vue!"
		}
	});
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example03-3a 결과

하위에서 상위 컴포넌트로 이벤트 전달하기

이벤트 발생과 수신

이벤트롤 발생시켜(envent emit) 사우이 컴포넌트에 신호를 보내면 된다.

상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출한다.


이벤트 발생과 수신 형식

이벤트 발생과 수신은 $emit()v-on:속성을 사용하여 구현한다.


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<!-- 이벤트 수신 -->
	<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	
	// 이벤트 발생
	this.$emit("이벤트명");
	
	</script>
</body>
</html>

$emit()을 호출하면 괄호 안에 정의된 이벤트가 발생한다

입잔적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이다.

$emit()을 호출할때 사용하는 this는 하위 컴포넌트를 가리킨다.


호출한 이벤트는 하위 컴포넌트를 등록하는 태그 에서 v-on:으로 받는다.

하위 컴포넌트에서 발생한 이벤트명을 v-on:속성에 지정하고, 속성의 값에 이벤트가 발생 헀을때 호출될 상위 컴포넌트 메서드를 지정한다.


이벤트를 발생시키고 수신하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>

	<div id="app">
		<!-- #3  -->
		<!-- show-log : 하위 컴포넌트 이벤트명  -->
		<!-- printText : 상위 컴포넌트 매서드명  -->
		<child-component v-on:show-log="printText"></child-component>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	
	Vue.component('child-component',{
		// #1 - 버튼 요소 추가
		template:"<button v-on:click='showLog'>show</button>",
		// #2 - 메서드 추가
		methods:{
			showLog:function(){
				//이벤트 발생 로직
				this.$emit('show-log');
			}
		}
	});
	
	var app = new Vue({
		el:'#app',
		data:{
			message:'Hello Vue!'
		},
		methods:{
			printText:function(){
				console.log("received an event");
			}
		}
	});
	
	</script>
</body>
</html>

실행 과정 설명

  1. [show] 버튼을 클릭하면 클릭 이벤트 v-on:click="showLog"에 따라 showLog() 메서드가 실행됨.
  2. showLog() 메서드 안에 this.$emit('show-log')가 실행되면서 show-log 이벤트가 발생함.
  3. show-log이벤트는 <child-component>에 정의한 v-on:show-log에 전달되고,
    v-on:show-log의 대상 메서드인 최상위 컴포넌트 메서드 printText()가 실행됨
  4. printText()는 received an event 라는 로그를 출력하느 메서드이므로 마자막으로 콘솔에 로그가 출력됨.

해당 실습 콘솔 결과 값이다.

example03-3b 결과

같은 레벵릐 컴포넌트 간 통신

뷰는 상위에서 하위로만 데이터를 전달해야 하는 기본적인 통신 규칙을 따르기깨문에 바로 옆 컴포넌트에 값을 전달 하려면 하위에서 공통 사우이 컴포넌트로 이벤트를 전달 후 공통 사우이 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야 한다.

다른 컴포넌트의 값을 직접 참조하지 못하므로 기본적인 데이터 전달 방식을 활용하여 같은 레벨 간에 통신이 가능하도록 구조를 갖춰야 한다.

같은 레벨 간의 컴포넌트 통신 흐름

관계 없는 컴포넌트 간 통신 - 이벤트 버스

이벤트 버스(Event Bus)는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법 이다.

이벤트 버스를 이용하면 이런 상위 - 하위 관계를 유지하고 있지 않아도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.

컴포넌트 관계도에서 이벤트 버스의 모습
이벤트 형식

이벤트 버스를 구현하려면 어플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성한다.

새 인스턴스를 이용하여 이벤트를 보내고 받는다.

.$emit() : 보내는 컴포넌트
.$on() : 받는 컴포넌트

// 이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();

// 이벤트를 보내는 컴포넌트
methods:{
	메서드명: function(){
		eventBus.$emit('이벤트명',데이터);
	}
}

// 이벤트를 받는 컴포넌트
methods: {
	created : function(){
		eventBus.$on('이벤트명', function(){
			...
		});
	}
}


이벤트 버스 구현하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<child-component></child-component>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	// #1
	var eventBus = new Vue();
	
	Vue.component('child-component',{
		// #2
		template:'<div>하위 컴포넌트 영역힙니다,<button v-on:click="showLog">show</button></div>',
		methods:{
			showLog:function(){
				eventBus.$emit('triggerEventBus',100);
			}
		}
	});
	
	var app = new Vue({
		el:'#app',
		// #3
		created: function(){
			eventBus.$on('triggerEventBus',function(value){
				console.log("이벤트를 전달 받음, 전달받은 값 : ",value);
			});
		}
	});
	</script>
</body>
</html>

실행 과정 설명.

  1. 이벤트 버스로 활용할 새 인스턴스를 1개 생성하고 eventBut라는 변수에 참조한다.
  2. 하위 컴포넌트에는 template속성과 methods속성을 정의하고 methods 속성에는 showLog() 메서드를 정희하고 메서드 안쪽에는 eventBus.$emit()을 선언하여 이벤트 발생하는 로직을 추가한다.
  3. 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on으로 이벤트를 받는 로직을 선언한다.

해당 실습 콘솔 결과 값이다.

example03-3c 결과
뷰 컴포넌트 통신 실습 View
실습#1 - 전역 컴포넌트 등록하기
- sibling-component를 이름으로 하는 새로운 컴포넌트를 등록
- option: template,props

실습#2 - 데이터 속성 추가하기
- data 속성 anotherMessage를 지정하고 임의의 문자열을 값으로 대입하기
- 새로 지정한 data 속성은 위 sibling-componentprops로 전달하기

실습#3 - 하위 컴포넌트 등록하기
- sibling-component 등록

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	
	<!-- #3 -->
	<div id="app">
      <child-component v-bind:propsdata="message"></child-component>
	  <siblings-component v-bind:propsdata="anotherMessage"></siblings-component>
    </div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	Vue.component('siblings-component',{
		props:['propsdata'],
		template:'<p>{{propsdata}}</p>'
	});
	// #1
	Vue.component('child-component',{
		props:['propsdata'],
		template:'<p>{{propsdata}}</p>'
	});
	
	var app = new Vue({
		el:'#app',
		// #2
		data:{
			message:'Hello Vue!',
			anotherMessage:'another Vue!'
		}
	});
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example03-3c 결과

"뷰 상용 웹 앱을 개발하기 위해 알아야 하는 페이지 디동 방법과 데이터 통신 방법."

라우팅이란?

  • 라우팅이란 웹페이지 간의 이동 방법을 말한다.
  • 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 어플리케이션에서 주로 사용한다.
  • 라우팅을 이용하면 화면상에 깜박거림 없이 화면전환이 매끄럽다.

뷰 라우터

뷰 라우너는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 이다.

태그 설명
<router-link to="URL 값"> 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다.
<router-view> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다.

뷰 라우터 실습 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<h1>뷰 라우터 예제</h1>
		<p>
			<!-- #1 URL 값을 변경하는 태그 -->
			<router-link to="/main">Main 컴포넌트로 이동</router-link>
			<router-link to="/login">Login 컴포넌트로 이동</router-link>
		</p>
		<!-- #2 URL 값에 따라 갱신되는 화면 영역 -->
		<router-view></router-view>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- #뷰 라우터 CDN 추가 -->
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script>
		// #3 Main,Login 컴포넌트 정의
		var Main = {template: '<div>main</div>'};
		var Login = {template: '<div>Login</div>'};
		
		// #4 각 URL에 맞춰 표시할 컴포넌트 지점
		var routes = [
			{path:'/main', component:Main},
			{path:'/login', component:Login}
		]
		
		// #5 뷰 라우터 정의
		var router = new VueRouter({
			// 주소창에 해시 값(#)을 지우고 싶을경우 history mode를 사용하면 된다 
			mode: 'history',
			routes
		});
		
		// #6 뷰 인스턴스에 라우터 추가
		var app = new Vue({
			router
		}).$mount('#app');
		// $moint() 란 
		// - el속성과 동일하게 인스턴스를 화면에 붙이는 역활을 한다.
		
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example04-1 결과 example04-1 결과 example04-1 결과

네스티드 라우터

  • 네스티드 라우터(Nested Router)는 라우터로 페이지 이동할 때 최소 2새 이상의 컴포넌트를 화면에 나타낼 수 있다.
  • 상위 컴포넌트 1개 하위 컴포넌트 1개를 포함하는 구조로
네스티드 라우터의 구조
네스티드 라우터 구현하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- #1 User 컴포넌트가 뿌려질 영역 -->
		<router-view></router-view>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script>
		// #2 컴포넌트 내용 정의
		var User = {
			template:`
				<div>
					USer Component
					//하위 컴포넌트가 뿌려질 영역
					<router-view></router-view>
				</div>
			`
		};
		var UserProfile = {template:'<p>User Profile Component</p>'}; 
		var UserPost = {template:'<p>User Post Component</p>'};
		
		// #3 네스티드 라우팅 정의
		var routes = [
			{
				path:'/user',
				component:User,
				children:[
					{
						path:'posts',
						component:UserPost
					},
					{
						path:'profile',
						component:UserProfile
					}
				]	
			}
			
		];
		
		// #4 뷰 라우터 정의
		var router = new VueRouter({
			routes
		});
		
		// #5 뷰 인스턴스에 라우터 추가
		var app = new Vue({
			router
		}).$mount('#app');
		</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example04-1a 결과 example04-1a 결과 example04-1a 결과 example04-1a 결과

네임드 뷰

  • 네임드 뷰(Named View)는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식.
  • 네입드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.
네스티드라우터와 네임드 뷰의 차이
네입드 뷰 구현하기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<!-- #1 라우팅 영역 정의 -->
	<div id="app">
		<router-view name="header"></router-view>
		<!-- name이 없는 경우는 디폴트 -->
		<router-view></router-view>
		<router-view name="footer"></router-view>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script>
		// #2 컴포넌트 내용 정의
		var Body = {template:'<div>This is Body</div>'};
		var Header = {template:'<div>This is Header</div>'}; 
		var Footer = {template:'<div>This is Footer</div>'};
		
		// #3
		var router = new VueRouter({
			routes:[
				{
					// #4
					path:'/',
					// #5 <router-view>의 name 속성과 컴포넌트를 연결
					components:{
						default: Body,
						header: Header,
						footer: Footer
					}
				}
			]
		});
		
		// #6
		var app = new Vue({
			router
		}).$mount('#app');
	</script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example04-1b 결과
뷰 라우터 실습 View
실습#1
- '/login' URL을 추가하고, LoginHeader,LoginBody,LoginFooter 컴포넌트를 추가.

실습#2
- LoginHeader,LoginBody,LoginFooter 컴포넌트 내용을 정의하기.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<router-view name="header"></router-view>
		<router-view></router-view>
		<router-view name="footer"></router-view>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script>
	
		var Body = {template:'<div>This is Body</div>'};
		var Header = {template:'<div>This is Header</div>'}; 
		var Footer = {template:'<div>This is Footer</div>'};
		
		// #2
		var LoginBody = { template: '<div>This is LoginBody</div>' };
     	var LoginHeader = { template: '<div>This is LoginHeader</div>' };
      	var LoginFooter = { template: '<div>This is LoginFooter</div>' };
		
		var router = new VueRouter({
			routes:[
				{
					path:'/',
					components:{
						default: Body,
						header: Header,
						footer: Footer
					}
				},
				// #1
				{
					path:'/login',
					components:{
						default: LoginBody,
						header: LoginHeader,
						footer: LoginFooter
					}
				}
			]
		});
		
		var app = new Vue({
			router
		}).$mount('#app');
	</script>
</body>
</html>	

해당 실습 콘솔 결과 값이다.

quiz04-1 결과 quiz04-1 결과

웹 앱의 HTTP 통신 방법

  • HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜이다.
  • 브라우저에서 특정 데이터를 보내 달라고 요청(request)을 보내면 서버에서 응당(response)으로 해당 데이터를 보내주는 방식으로 동작한다.
  • 대표적인 사례로는 제이쿼리 ajax가 있다.
브라우저와 서버 간 HTTP 통신

뷰 리소스

뷰 리소스로 데이터 받아오기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- #1 -->
		<button v-on:click="getData">프레임워크 목록 가져오기</button>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          getData: function() {
       	  //#2
            this.$http.get(`https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json`).then(function(response) {
                //#3  
            	console.log(response);
                  console.log(JSON.parse(response.data));
                });
          }
        }
      });
    </script>
</body>
</html>

실행 과정 설명

  1. button 태그에 v-on:click을 이용하여 클릭했을때 getData() 가 호출되도록 클릭 이벤트를 설정
  2. getData()에는 뷰 리소스에서 제공하는 API인 this.$http.get()을 이용하여 해당 URL에서 제공하는 데이터를 받아온다
    this.$http.get()은 HTTP GET 요청을 서버에 보내고 특정 데이터를 받아온다.
  3. 버튼을 클릭하여 해당URL로 HTTP GET 요청을 보내고 .then() 안에서 응답을 받을 데이터 response를 콘솔로 출력

엑시오스

현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다.


액시오스 설치 및 사용하기

액시오스 설치와 사용법은 뷰 리소스와 거의 동일합니다.


<!-- 액시오스 CDN 방식 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

액시오스는 뷰 리소스처럼 HTTP 통신에 대해 간단하고 직관적인 API를 제공한다.


//HTTP GET 요청
axios.get('URL 주소').then().catch();

//HTTP POST 요청
axios.post('URL 주소').then().catch();

//HTTP 요청에 대한 옵션 정의
axios({
	method:'get',
	url:'URL 주소',
	...
});

API 유형 처리 결과
axios.get('URL 주소').then().catch(); 해당 URL 주소에 대해 HTTP GET 요청을 보낸다.
서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행된다.
데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.
axios.post('URL 주소').then().catch(); 해당 URL 주소에 대해 HTTP POST 요청을 보낸다.
then(),catch()의 동작은 위에와 같이 수행된다.
axios({ 옵션 속성}); HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다.
데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형, 기타 등등

액시오스로 데이터 받아오기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<button v-on:click="getData">프레임워크 목록 가져오기</button>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
 	<!-- 엑시오스 라이브러리 로딩 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          getData: function() {
            	//액시오스 GET 요청 API
        	  axios.get(`https:/raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json`).then(function(response) {
            	console.log(response);
                });
          }
        }
      });
    </script>
</body>
</html>

"프로젝트를 시작할 때 알아야 하는 프로젝트 구성 방법과 화면의 요소를 제어하는 방법"

HTML, CSS 등 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수 있는 형태의 HTML로 변환해 주는 속성이다.


// ES5에서 template 속성
new Vue({
	template:'<p>hello {{ message }} </p>'
});


<!-- 싱글 파일 컴포넌트 체계에서 template 속성 사용 방법 -->
<template>
	<p>Hello {{message}}</p>
</template>


데이터 바인딩

  • 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의믜한다.
  • 주요 문법으로는 {{}}문법과 v-bind속성이 있다.

{{}} - 콧수염 괄호

{{}}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.


<!-- {{ }}를 이용한 데이터 바인딩 -->
<div id="app">
	{{message}}
</div>
<script>
new Vue({
	el:'#app',
	data:{
		message:'Hello Vue.js!'
	}
});
</script>


<!-- 뷰 데이터가 변경되어도 값을 바꾸고 싶지 안다면 v-once 속성을 사용하면 된다. -->
<div id="app" v-once>
	{{ message }}
</div>


v-bind

아이디, 클래스, 스타일 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.


v-bind 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<p v-bind:id="idA">아이디 바인딩</p>
		<p v-bind:class="classA">클래스 바인딩</p>
		<p v-bind:style="styleA">스타일 바인딩</p>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
    new Vue({
    	el:'#app',
    	data:{
    		idA:10,
    		classA:'container',
    		styleA:'color:blue'
    	}
    });
    </script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example5-1 결과

자바스크립트 표현식

데이터 바인딩 방법 중 하나인 {{}} 안에 자바스크립트 표현식을 넣어서 사용이 가능하다.


자바스크립트 표현식 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- message 값을 그대로 출력한다. -->
		<p>{{ message }}</p>
		
		<!-- message 값에 문자열 !!! 을 추가하여 출력한다. -->
		<p>{{ message + "!!!"}}</p>
		
		<!-- message 의 문자열순서를 반전하여 출력한다. -->
		<p>{{ message.split('').reverse().join('') }}</p>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
    new Vue({
    	el:'#app',
    	data:{
    		message:'Hello Vue.js!'
    	}
    });
    </script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example5-1 결과
자바스크립트 표현식에서 주의할 점
  1. 자바스크립트의 선언문과 분기 구문은 사용할수 없다.
  2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.

자바스크립트 표현식 사용 시 주의할 점 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- X, 선언문은 사용 불가능 -->
		{{ var a = 10; }}
		
		<!-- X, 분기 구문은 사용 불가능 -->
		{{ if(ture){return 100} }}
		
		<!-- O, 삼항 연산자로 표현 가능 -->
		{{ true ? 100 : 0 }}
		
		<!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->
		{{ message.split('').reverse().join('') }}
		
		<!-- O, 스크립트에서 computed 속성으로 계산한 후 최종 값만 표현 -->
		{{ reverseMessage }}
		
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
    new Vue({
    	el:'#app',
    	data:{
    		message:'Hello Vue.js!'
    	},
    	// 데이터 속성을 자동으로 계산해 주는 속성
    	computed:{
    		// {{ reverseMessage }} 에 표현되기 전에 연산을 수행하는 함수
    		reverseMessage:function(){
    			return this.message.split('').reverse().join('');
    		}
    	}
    });
    </script>
</body>
</html>


디렉티브

  • HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.
  • 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다.
  • 화면의 요소를 직접 제어할 필요 없이 부의 디렉티브를 활용하여 화면 요소들을 조작할 수 있습니다.

<!-- 디렉티브 형식 -->
<!-- flag 값이 참이면 출력하고 거짓이면 화면에 출력이 안된다. -->
<a v-if="flag">두잇 Vue.js</a>

디렉티브 이름 역할
v-if 지정한 뷰 데이터 값의 , 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
거짓일 경우 태그 출력이 안된다.
v-for 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.
v-show css 효과만 display:none으로 주어지고 태그는 출력됨.
v-bind HTML 태그의 기본 속성과 뷰 데이터 속성을 연결합니다.
v-on 화면 요소의 이벤트를 감자하여 처리할 때 사용합니다.
예를들어 v-on:click의 클릭 이벤트를 감지하는 특정 메서드를 실행할수 있다.
v-model 폼(form)에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 합니다.
화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있습니다.
<input>,<select>,<textarea> 태그에만 사용할 수 있습니다.

많이 사용되는 디렉티브 다루기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<a v-if="flagT">두잇 Vue.js</a>
		<a v-if="flagF">두잇 Vue.js</a>
		<ul>
			<li v-for="system in systems">{{ system }}</li>
		</ul>
		<p v-show="flagT">두잇 Vue.js</p>
		<p v-show="flagF">두잇 Vue.js</p>
		<h5 v-bind:id="uid">뷰 입문서</h5>
		<button v-on:click="popupAlert">경고 창 버튼</button>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
	new Vue({
		el:'#app',
		data:{
			flagT:true,
			flagF:false,
			systems:['and','iso','win'],
			uid:10
		},
		methods:{
			popupAlert: function(){
				return alert('까꿍');
			}
		}
	});
    </script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example5-1c 결과

이벤트 처리

화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods속성을 활용합니다.


v-on 디렉티브로 호출할 때 인자 값 넘기기 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<button v-on:click="clickBtn(10)">클릭</button>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
	new Vue({
		el:'#app',
		methods:{
			clickBtn:function(num){
				alert("클릭됨" + num);
			}
		}
	});
    </script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example5-1d 결과

고급 템플릿 기법

고급 템플릿 기법은 실제 애플리케이션을 개발할 떄 유용한 속성으로, 앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용합니다.


computed 속성

computed속성은 데이터 연산들을 정의하는 영역입니다.

  1. data 속성 값의 변화에 따라 자동으로 다시 연산한다.
  2. computed 속성에서 사용하고 있는 data 속성 값이 변경되면 전체 값을 다시 한번 계산한다.
  3. 캐싱을 한다
    캐싱 : 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작.

computed 속성과 methods 속성의 차이점
  • computed : 호출 할때만 해당 로직을 수행한다.
  • methods : 대상 데이터의 값이 변경되면 자동으로 수행된다.

watch 속성
  • watch속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
  • 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

watch 속성 예제 View

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<!-- 입력 값에 변화가 있을때 마다 watch속성에서 변화된 값을 로그로 출력 -->
		<input v-model="message" />
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

	new Vue({
		el:'#app',
		data:{
			message:'Hello Vue.js!'
		},
		watch:{
			message:function(data){
				console.log("message의 값이 바뀝니다 : ", data);
			}
		}
		
	});
    </script>
</body>
</html>

해당 실습 콘솔 결과 값이다.

example5-1e 결과
뷰 템플릿 실습 View
실습#1 - {{}}를 이용해 데이터 바인딩 하기
- data 속성 1개를 추가하고, 추가한 data 속성을 {{}}를 이용해 화면에 표시하기.

실습#2 - v-bind 디렉티브를 이용해 데이터 바인딩하기
- data 속성 uid의 값을 10에서 20으로 변경한 후 크롬 개발자 도구를 이용하여 <p> 태그 id 값 확인하기.

실습#3 - v-bind 디렉티브를 이용해 클릭 이벤트 처리하기
- 버튼이 클릭되었을때 동작할 이벤트 메서드 1개를 methods속성에 정의하기.
- 화면에 <button> 태그를 추가하고 v-on:click 속성을 추가한후 새로 추가한 이벤트 메서드를 연결하기.

실습#4 - v-if 디렉티브 조건에 따라 화면이 어떻게 바뀌는지 확인하기
- data 속성 flag의 값을 false로 변경하기

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Vue Sample</title>
</head>
<body>
	<div id="app">
		<header>
		<h3>{{ message }}</h3>
		<!-- #1 -->
		<h3>{{ msg }}</h3>
		</header>
		<section>
			<!-- #2 -->
			<p v-bind:id="nid">v-bind:id</p>
			<!-- #3 -->
			<button v-on:click="clickBtn">클릭이벤트</button>
			<!-- #3-1 -->
			<!-- v-on:를 간소화하는 문법은 @ -->
			<button @click="clickBtn">요약클릭이벤트</button>
			<!-- #4-1 -->
			<ul v-if="t">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<!-- #4-2 -->
			<ul v-if="f">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</section>
	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
	new Vue({
		el:'#app',
		data:{
			message:'Hello Vue.js',
			// #1
			msg:'배가 고프다',
			nid:20,
			t:true,
			f:false
		},
		methods:{
			clickBtn(){
				alert("이벤트 연결됨");
			},
		}
	});
    </script>                                                                                                                                                                                                                           
</body>
</html>

해당 실습 콘솔 결과 값이다.

quiz05-1 결과

싱글 파일 컴포넌트 체계

  • .vue 파일로 프러젝트 구조를 구성하는 방식을 가르킨다.
  • 확장자 .vue파일 1개는 뷰 어플리케이션을 구성하는 1개의 컴포넌트와 동일하다.

<!-- 화면에 표시할 요소들을 정의하는 영역 -->
<!-- 예) HTML+뷰 데이터 바인딩 -->
<template>
	<div>
		<span>
			<button> {{ message }} </button>
		</span>
	</div>
</template>

<!-- 뷰 컴포넌트의 내용을 정의하는 영역 -->
<!-- 예) template, data, methods 등 -->
<script>
	export default{
		data:{
			message:'Hello'
		}
	}
</script>

<!-- 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 -->
<style>
	span {font-size: 1.2em;}
</style>


뷰 CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩이나 브저우저파이와 같은 도구가 필효하다.


뷰 CLI 명령어
템플릿 종류 설명
vue init webpack 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init webpack-simple 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
vue init browserify 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init browserify-simple 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
vue init simple 최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa 웹팩 기반의 프로그레시브 웹 앱 기능을 지원하는 뷰 프로젝트

이클립스로 뷰 세팅하기
  1. node.js 설치하기
  2. npm, node.js 환경변수 세팅
  3. 이클립스 마켓에서 vue 검색후 설치
  4. 이클립스 재부팅 후 vue 프로젝트 만들기
  5. 프로젝트 오픈쪽 마우스 터미널 오픈
  6. vue init webpack-simple 입력
  7. vue ren dev 실행

-----(더미값임)Node.js - 생활코딩-----

생활코딩 Node.js 에서 제공하는 소스로 진행합니다.

jjgodcom의 node.js-생활코딩 바로가기에 수업한 내용을 정리합니다.

github 에 수업한내용을 공유합니다.

생활코딩 유튜브 Node.js 재생목록 바로가기
  1. 수업소개
    이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다.
  2. 수업대상
    예를들어 1억개의 페이지로 이루어진 웹사이트가 있다고 상상해보세요. 그런데 HTML 코드의 구조를 바꿔야 한다면 어떤 절망적인 상황이 생길까요? 이런 상황에서 생겨날 절망감을 상상할 수 있는 분이라면 이 수업을 통해서 혁명적인 변화를 겪을 수 있습니다

타이틀h1

설명입니다.

설명입니다2.

  1. 제목
    설명
  2. 제목
    설명
h5입니다.
파란박스입니다.
code 태그 입니다
					
					java pre 입니다.
					console.log('kim.constructor', kim.constructor);
					
					
					
					<!DOCTYPE html>
					<html lang="ko">
					<head>
					    <meta charset="UTF-8">
					    <title>자바스크립트 사용방법</title>
					    
					    <!-- 외부 파일로 로드하는 방법-->
					    <script type="text/javascript" src="javascript.js"></script>
					    
					    <!-- script 태그 사이에 기술하는 방법-->
					    <script type="text/javascript">
					        document.write("hello");
					    </script>
					</head>
					<body>
					    <!-- 태그에 직접 기술하는 방법 -->
					    <input type="button" onclick="alert('hello')" value="hello">
					</body>
					</html>
					
					
					
					* {font-size:1;}