[Vue.js] 뷰 초 기본예제 Hello World 찍기, Vue.js Life Cycle 예제
- 웹 개발/Vue.js
- 2019. 9. 12. 15:30
개발환경 : window10
개발툴 : Atom
Vue 버전 : 2.5
Vue.js를 이용해서 Hello Vue.js 찍기
<!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@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
message : 'Hello Vue.js!'
}
});
</script>
</body>
</html>
- Vuejs도 기본구조는 html이기 때문에 html template 안에 작성되는 코드이다.
- new Vue로 선언되는 것이 뷰 인스턴스라고 한다.
- el 속성은 뷰 인스턴스가 그려질 지점을 지정한다. 이 속성은 CSS 선택자 규칙을 준수합니다.
- data 속성은 message 값을 정의하여 화면의 {{message}} 에 연결합니다. -> message가 m 이 되면 {{m}} 으로 출력하면 됩니다.
실제로 바꾸어서 브라우저에 띄우고 vue 개발자도구( Chrome 확장기능 )를 이용해서 Root 태그를 확인해보니 data 속성의 자식으로 nn이 지정되는 것을 볼 수 있습니다.
- 그리하여 message는 출력이 됩니다.
- 위에서 생성한 뷰 인스턴스는 id 선택자가 app 인 div 태그내에서만 scope(유효범위)를 가지게 됩니다.
뷰 속성
| 속성 | 설명 |
| template | 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. |
| methods | 화면 로직 제어와 관계된 메소드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 가능. |
| created | 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 |
뷰 인스턴스의 라이프사이클
- 위 뷰속성에서의 created 처럼 인스턴스의 상태에 따라 호출할 수 있는 속성들 -> 라이프 사이클 속성
- 라이프 사이클 속성에 따라 실행되는 로직을 라이프 사이클 훅이라고 한다.
라이프 사이클 실습 예제
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
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 = "Do Update";
},beforeUpdate:function(){
console.log("beforeupdate");
}
,updated:function(){
console.log("updated");
}
});
</script>
</body>
</html>
- 위 소스대로 브라우저에서 실행하면
- 개발자도구에서는 mounted 까지만 실행됨. 왜냐하면 뷰 인스턴스가 수정되는 작업이 없었기 때문!
- 그럼 만약 저 message를 "Do Update"로 수정하는 주석을 풀게되면????
- 이렇게 update까지의 라이프 사이클 훅(라이프사이클에 들어가는 로직)들이 실행되는 것을 볼 수 있음.
'웹 개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] ESLint 화면 에러 오버레이 처리하기 (0) | 2020.05.29 |
|---|---|
| [Vue.js] 뷰 인스턴스에서의 this 키워드(data) (0) | 2020.03.07 |
| [Vue.js] 뷰 모델의 Reactivity 구현(Databinding에 관하여) (0) | 2020.03.04 |
| [Vue.js] Vue 컴포넌트간의 통신! (1) | 2019.09.15 |
| [Vue.js] Vue 컴포넌트와 인스턴스 (0) | 2019.09.15 |