캡틴판교님의 Do it Vue.js를 보고 정리한 자료입니다.
출처: github.com/joshua1988/doit-vuejs
뷰 인스턴스 정의
뷰로 화면개발하기 위해 필수적으로 생성해야 하는 기본 단위
new Vue()
<html>
<head>
<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>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>뷰 인스턴스 옵션(#선택자는 css 선택자 규칙과 같음)el: '#app' -> <div id ="app></div>
template: HTML, css 등의 마크업 요소를 정의
methods: 화면 로직 제어와 관계된 메서드를 정의
created: 인스턴스가 생성되자마자 실행할 로직을 정의
뷰 인스턴스 라이프 사이클
[뷰라이프사이클 다이어그램]
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
<html>
<head>
<title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
{{ message }}
</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!'
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
mounted: function() {
console.log("mounted");
this.message = 'Hello Vue!'; //mounted 단계에서 기존에 정의된 data 속성의 message 값 변경
},
updated: function() {
console.log("updated");
}
});
</script>
</body>
</html>
'IT > Vue.js' 카테고리의 다른 글
| [vue.js] vue 라우터 (0) | 2021.02.20 |
|---|---|
| [vue.js] vue component 통신 (0) | 2021.02.19 |
| [vue.js] 컴포넌트(component) (0) | 2021.02.19 |
| quasar axios 적용 (0) | 2020.08.05 |
| vscode로 Vue.js 시작하기 (0) | 2020.07.28 |
