1. 뷰인스턴스 : new Vue()
- Vue를 생성자라고 함
- 생성자를 생성하는 이유 : 뷰로 개발 할 때 필요한 기능들을 재정의하여 편리하게 사용하도록 하기 위해서
2. 뷰인스턴스 옵션 속성
- el 속성 : id 속성
- data 속성 : el 속성에 매칭되는 data값 지정 가능
-- #app (id속성)dms 돔요소중 app이라는 아이디를 가진 요소(el속성)를 의미
- 그 외에도
-- template : 화면에 표시할 , html , css 등의 마크업요소를 정의하는 속성
-- method: 화면 로직 에어와 관계된 메서드를 정의하는 속성. ex) 마우스 클릭 이벤트
-- created : 뷰 인스턴스가 생성되자마자 실행될 로직을 정의할 수 있는 속성
예제1)
----------------
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{}
</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>
3. 인스턴스의 유효범위
-- 뷰인스턴스를 생성하면 html 특정 범위 안에서만 옵션 속성들이 적용되어 나타남
<div id="app">
</div>
{}
==> 인스턴스의 유효범위를 벗어나 선언한 message
message값이 치환되지 않음
4. 뷰 인스턴스 라이프 사이클
인스턴스생성 => 이벤트 및 라이프사이클 초기화 => beforeCreate => 화면에 반응성 주입 => created => el, template속성 확인 => template속성 내용을 render()로 변환 =>beforeMount => $el 생성 후 el 속성 값을 대입 => mounted =>인스턴스를 화면에 부착=> 인스턴스의 데이터 변경 => beforeUpdate => 화면 재 렌더링 및 데이터 갱신=> updated => 인스턴스 내용 갱신 => 인스턴스 접근 가능 => beforeDestroy => destroyed(컴포넌트, 인스턴스 , 디렉티브 모두 헤제)
render() 함수는 자바스크립트로 화면의 돔을 그리는 함수
'Programming > Vue.js' 카테고리의 다른 글
| [VUE] CLI V3 프로젝트 개발 시 유용한 vscode 확장프로그램 목록 (0) | 2021.12.28 |
|---|---|
| [VUE] cli 3프로젝트 8080 포트 변경 (0) | 2021.12.28 |
| [VUE] VUE CLI 프로젝트 생성 시 권한이 없다는 에러 해결 (0) | 2021.12.27 |
| [Vue] Vue.js 설치하고 실행하기 (0) | 2021.05.20 |
| [Vue.js] vue-cli3 proxy 설정 (0) | 2019.03.07 |
