공부공간

Vue.js - 2일차 ) Vuejs 기본사용 & LifeCycle 메소드 본문

Vue.js

Vue.js - 2일차 ) Vuejs 기본사용 & LifeCycle 메소드

개발자가될수있을까? 2020. 2. 28. 01:49

기본적인 설치환경이 끝났다면, 실제로 Vue를 사용해보자.

 

먼저, 한국 Vuejs 공식 사이트에서 설치방법과 다양한 가이드들을 볼 수 있다.

 

https://kr.vuejs.org/

 

Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

그 중 Vue를 설치하기위한 4가지 방법이 소개되는데, 

 

1 ) Vue DevTool 설치 

2 ) CDN ( Content Delivery Network )

3 ) NPM ( Node Package Manager )

4 ) CLI

 

각각의 방법은 

https://kr.vuejs.org/v2/guide/installation.html

 

설치방법 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

에 잘정리되어있다. 실습은 CDN 방식으로 HTML파일안에서 직접 

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

를 추가하여서 Vue 객체를 만들어서 사용하겠다.

 

 

매번 html 파일에 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>


</body>
</html>


명령어를 치기 귀찮기때문에 HTML Template을 설정해주자.

Window -> Preference -> Web -> HTML Files -> Editor -> Templates ->

 

New -> Context: New HTML -> Pattern 입력

 

으로 위 코드를 붙여놓으면 다음부터 입력하지 않아도 된다.

 

 

 

간단한 변수 넘기기

 

Vue객체에서는 el 으로 HTML의 태그를 지정해주고, Data로 페이지를 조작하거나 함수의 내용을 HTML에 

 

보여주는등 다양하게 변경할 수있다.

 

따라서 HTML객체가 먼저 생성된뒤에 Vue객체로 조작을 해주어야하기때문에,

 

window.onload = function() 을 이용하여 HTML 객체 생성후 Vue관련 내용을 실행하자.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Vuejs 2일차 Test1</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
window.onload =  function(){
   // Vue객체를 생성해주자
	var Vue1 = new Vue({
		el :"#test",
        // id 지정
		data : {
			strtest : "첫테스트!"
		}
        // data를 넘겨주자
	})
}
</script>
</head>
<body>
	<div id ="test">
		<h3>{{strtest}}</h3>
	</div>
</body>
</html>

Python Flask에서 Dictionary로 데이터를 넘겨주는것과 비슷하다.. ( 이게먼저나왔나 )

 

가장 기본은 el 로 id 와 class 를 찾고,  해당위치에 데이터를 넘겨준다고 쉽게 생각할수있다.

 

클래스의 경우 여러가지가 존재할 수 있는데, 가장 첫번째 것에만 데이터를 넘겨주고, 이후에는 변경되지 않는다.

 

따라서 ID로 구분되어지는 태그에 사용하자!

 

 

 

Test1 실행화면

 

기본적인 사용방법을 테스트해보았다면 객체와 기본자료형이 어떻게 표현되는지 알아보자.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Vuejs 2일차 Test2  </title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	window.onload = function (){

		var Vue_Id_Test = new Vue({
			
			el : "#test1",
			
			data : {
				Int_ID : 123,
				Str_ID : "하나둘셋",
				Array_ID : [10,20],
				Object_ID : {
					a1 : "넷다섯",
					a2 : "일곱여덟"
				}
			},
			methods : {
				Func : function () {
					return "ID 예제"
				}
			}
		})
		
	}
	</script>
	
</head>

<body>
	<div id ="test1">
		<h3> ID 테스트 </h3>
		<hr>
		<h3> {{Int_ID}}</h3>
		<h3> {{Str_ID}}</h3>
		<h3> {{Array_ID[0]}}</h3>
		<h3> {{Array_ID[1]}}</h3>
		<h3> {{Object_ID.a1}}</h3>
		<h3> {{Object_ID.a2}}</h3>
		<h3> {{Func()}}</h3>
	</div>
	
	<hr>

</body>
</html>

 

위처럼 기본타입은 {{ 이름 }} 으로 설정해주고 배열이나, 객체도 .이나 [index]로 접근가능하다.

 

또한 el data 처럼 methods를 추가하여 함수를 정의하여 사용 할 수 있다.

 

객체내 변수에 대해서 this 명령어도 사용이 가능하여 연산에 대한 처리의 반환도 가능하다.

 

LifeCycle 메소드

 

https://kr.vuejs.org/v2/guide/instance.html#%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8

 

Vue 인스턴스 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

Vue객체에도 라이프사이클이 존재한다. 

 

예를들어 특정버튼을 눌렸을떄에 Data가 변하는 기능이 있다고 한다면, Vue객체에서 변경된 데이터를

 

HTML파일로 전송을 해야한다. 

 

이러한 특정 경우에, Vue객체가 HTML태그를 잘 지정하고 있는지?

 

데이터의 변경을 진행할 것인지? 등 에대한 지점이 명확해야하는데, 라이프사이클에서 

 

이런지점들을 지정해준다. 우리는 해당 위치에 필요한 기능을 적절하게 수정해서 사용하면 된다.

 

크게 라이프사이클 메소드는 8가지로 구성되어있다.

 

1 ) beforeCreate  2 ) created 3 ) beforeMount 4 ) mounted

5 ) beforeUpdate 6 ) updated 7 ) beforeDestroy 8 ) destroyed

 

이름그대로 생성전과 후, 마운트 전과 후, 업데이트 전과 후, 소멸 전과 후로 지정되는데 전체 다이어그램은

위 사이트 그림을 보는 것을 추천한다.

 

 

Vuejs 생명주기 이용 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
window.onload = function () {
	var vm1 = new Vue({
		//el : "#test1",
		data : {
			a1 : 100 
		},
			// Vue 객체가 관리할 요소들이 만들어 지기전에 호출되는 함수
		beforeCreate : function () {
			console.log("Vue 객체가 관리할 요수들이 만들어지기 전입니다.")
			console.log("al : " + this.a1)
		},
		// Vue 객체가 관리할 요소들이 만들어지고 난 이후 
		created : function () {
			console.log("Vue 객체가 관리할 요소들이 만들어진 후 입니다.")
			console.log("al : " + this.a1)
			
		},
		// Vue 객체가 관리할 HTML 태그가 할당되기 전
		beforeMount : function () {
			console.log("Vue 객체가 관리할 태그가 할당되기 전입니다.")
		},

		// Vue 객체가 관리할 HTML 태그가 할당된 후
		mounted : function () {
			console.log("Vue 갹체가 관리할 태그가 할당된 이후힙니다.")
		},
		
		beforeUpdate : function(){
			console.log("관리하고있는 html 내부 요소가 변경되기 전입니다.")
		},
		
		
		updated : function(){
			console.log("관리하고있는 html 내부 요소가 변경된 후 입니다.")
		},
		
		beforeDestory : function () {
			console.log( "객체의 기능이 소멸되기 전입니다." )
		},
		
		methods : {
			setValue : function () {
				this.a1 = 200
				
			}
		}	
	})
	
	vm1.$mount("#test1") 
	// test1을 vm에 마운트하겠다.
	//vm1.$destroy() -> beforeDestroy와 destroyed 호출
	// vue 객체와 html태그 객체를 연결시키는 연결부분이 소멸되기 때문에 
	// 이후에는 관리 불가능 
	// 각 시기에 필요하면 생명주기(라이프사이클)에 관한 처리를 할 수 있다.
}
	
</script>
</head>
<body>

 <div id = "test1">
 	 <h3> {{a1}}</h3>
 	 <button type="button" v-on:click='setValue'>값 변경</button>
 </div>
</body>
</html>

 

create 관련 메소드와 mount ( el ) 관련 메소드가 실행되었다.

 

 

버튼을 누르면 Update관련 메소드들이 실행되어 Console.log에 기록이 되게 작성한결과

 

특정 시점에 내가 필요한 기능을 객체의 생성, 마운트,업데이트, 제거등의 시기에 사용 할 수 있다.

'Vue.js' 카테고리의 다른 글

Vue.js - 1일차 ) 환경설정 & 설치  (0) 2020.02.27
'Vue.js' Related Articles more
Comments