이번 시간에는 가볍게 문법과 개념에 대해 훑어보려 합니다! 주요 개념들을 문법과 함께 살펴보도록 하겠습니다.😎
인스턴스는 Vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.
생성자 함수를 사용하여 인스턴스를 생성하는 방법이다.
new Vue({
// instance option properties
});
Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등 옵션 속성을 포함할 수 있다.
new Vue({
// instance option properties
template: "",
el: "",
methods: {}
// ...
});
인스턴스(객체)가 생성될 때 수행되는 초기화 작업
이런식으로 초기화 작업 외, 개발자가 의도하는 커스텀 로직을 작성할 수 있다.
new Vue({
data: {
a: 1
},
created: function() {
// this 는 vm 을 가리킴
console.log("a is: " + this.a);
}
});
vm이란 ViewModel의 약자라고 한다.
화면의 영역을 일정한 단위로 쪼개 분리시켜 재활용 가능한 형태로 관리하는 것이 컴포넌트이다.
<div id="app">
<my-component></my-component>
</div>
new Vue({
el: "#app",
// 컴포넌트 등록 코드
components: {
// '컴포넌트 이름': 컴포넌트 내용
"my-component": {
template: "<div>A custom component!</div>"
}
}
});
전역 컴포넌트 등록 방식이다.
Vue.component('my-component', {
// 컴포넌트 내용
template: '',
...
})
지역 컴포넌트 등록 방식이다.
var cmp = {
// 컴포넌트 내용
template: '',
...
}
new Vue({
components: {
'my-cmp' : cmp
}
})
상하 관계가 아닌 컴포넌트간의 통신을 위해서는 Event Bus를 활용한다.
// 화면 개발을 위한 인스턴스와 다른 별도의 인스턴스를 생성하여 활용
var eventBus = new Vue();
new Vue({
// ...
});
이벤트를 발생시킬 컴포넌트에서 $emit()
을 호출한다.
eventBus.$emit("refresh", 10);
이벤트를 받을 컴포넌트에서 $on()
이벤트를 수신한다.
// 이벤트 버스 이벤트는 일반적으로 라이프 사이클 함수에서 수신
new Vue({
created: function() {
eventBus.$on("refresh", function(data) {
console.log(data); // 10
});
}
});
뷰를 이용하여 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이브러리
라우팅 : 경로를 정하고 경로에 전달하는 일련의 과정 라우터 : 여러 경로 중 최적의 경로를 결정하여 라우팅 기능을 수행하는 것 라우트 : 경로https://kr.vuejs.org/v2/guide/index.html
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/