728x90
Vue.js
Vue.js
- Evan You에 의해 만들어짐
- 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 progressive Framework
Vue.js특징
- Approachable (접근성)
- Versatile (유연성)
- Performant (고성능)
MVVM Pattern
- Model + View + ViewModel
- Model : 순수 자바스크립트 객체
- View : 웹페이지의 DOM
- ViewModel : Vue의 역할
기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 JQuery와 같은 라이브러리를 이용하였으나, Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다.
실습 1 : Hello VueJS 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script>
new Vue({
el: "#app", //엘리먼트 : app이라는 아이디에 연결
// data:{
// message: "안녕 VuewJS!!"
// }
data() {
return {
message:"Hello VueJs~~~"
}
},
})
</script>
</body>
</html>
Vue Instance
| 속성 | 설명 |
| el | Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element |
| data | Vue에 사용되는 정보 저장. 객체 또는 함수의 형태 |
| template | 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음 |
| methods | 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 |
| created | 뷰 인스턴스가 생성되자마자 실행할 로직을 정의 (라이프 사이클) |
Vue LifeCycle
: 라이프사이클은 크게 나누면 Instance의 생성, 화면부착, 데이터갱신, 소멸의 4단계로 나뉜다.
| LifeCycle 속성 | 설명 |
| beforeCreate | Vue Instance가 생성되고 각 정보의 설정 전에 호출. DOM과 같은 화면요소에 접근 불가 |
| created | Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출. Instance가 화면에 부착하기 전이기 때문에 template속성에 정의된 DOM 요소는 접근 불가 서버에 데이터를 요청(http통신)하여 받아오는 로직을 수행하기 좋다 |
| beforeMount | 마운트가 시작되기전에 호출 |
| mounted | 지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출 template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행 |
| beforeUpdate | 데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출 |
| updated | Vue에서 관리되는 데이터가 변경되어 DOM에 업데이트가 된 상태 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가 |
| beforeDestroy | Vue Instance가 제거되기 전에 호출 |
| destroyed | Vue Instance가 제거된 후에 호출 |
실습 2 : Vue LifeCycle 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>클릭카운트 : {{count}}</h2>
<button @click="count++"> 카운트 증가</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
count:0,
};
},
beforeCreate() {
console.log("beforeCreate호출!!!");
console.log("beforeCreate count : "+this.count);
},
created() {
console.log("created호출!!!");
console.log("Create count : "+this.count);
console.log("created el : ",this.$el);
},
beforeMount() {
console.log("beforeMount호출!!!");
console.log("beforeMount count : "+this.count);
},
mounted() {
console.log("mounted호출!!!");
console.log("mounted count : "+this.count);
console.log("mounted el : ",this.$el);
},
updated() {
console.log("updated호출!!!");
},destroyed() {
console.log("destroyed호출!!!");
},
})
</script>
</body>
</html>
-> beforeCreate에서는 아직 연결되지 않았기 때문에 count를 받아올 수 없다.
-> create에서는 아직 el구문을 호출할 수 없는것을 확인할 수 있다.
728x90
'WEB > Vue.js' 카테고리의 다른 글
| [Vue] Axios (0) | 2022.05.11 |
|---|---|
| [Vue] Vue Component (0) | 2022.05.10 |
| [Vue] Vue event (0) | 2022.05.10 |
| [Vue] Vue Instance (0) | 2022.05.10 |
| [Vue] Vue Directive (0) | 2022.05.04 |
댓글