반응형
안녕하세요.
Vue js의 문법을 습득하며 다시 정리해보기 위해 글을 작성합니다.
CDN
먼저 vue를 사용하기 위해 필요한 cdn입니다. 가장 최신 버전의 vue를 제공합니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
VUE INSTANCE
-인스턴스 생성
<body>
<div id="app"></div>
</body>
<script>
const app = new Vue({
el: "#app"
});
</script>
VUE COMPONENT
1. 전역 컴포넌트
<body>
<div id="root">
<my-component></my-component>
</div>
</body>
<script>
Vue.component('my-component', {
template: "<h2>My Component!!</h2>"
})
let root = new Vue({
el: "#root"
})
</script>전역 컴포넌트의 경우 주로 공통의 template 형태의 컴포넌트를 재사용하여 사용합니다.
2. 지역 컴포넌트
<body>
<div id="root">
<local-component></local-component>
</div>
</body>
<script>
let component = {
template: "<h2>My Component!!</h2>";
}
let root = new Vue({
el: "#root",
components: {
"local-component": component
}
})
</script>
render 결과
위 두 예제에서 render 이후의 결과물은 아래와 같습니다.
<body>
<div id="root">
<h2>My Component!!</h2>
</div>
</body>
PROPERTIES
뷰 인스턴스를 생성할 때 자주 사용될 속성입니다.
- el: ''
- 뷰 인스턴스를 붙일 Element를 지정합니다.
- el: "#root"
- data: {}
- 뷰 인스턴스가 사용할 데이터를 정의합니다.
- data: { msg: '', counter: 0 }
- methods: {}
- 뷰 인스턴스에서 매칭되는 사용자 함수를 정의합니다.
- methods: {onClickFunc(e){ console.log(e); } }
- components: {}
- 지역 컴포넌트를 등록할 때 정의합니다.
- components: { 'local-component': {template: '<h2>My Component!!</h2>'} }
위 속성들의 집합체를 표현하자면,
const root = new Vue({
el: '#root',
data: {
msg: '',
counter: 0
},
methods: {
onClickFunc(e) {
console.log(e);
}
},
components: {
'local-component': {template: '<h2>My Component!!</h2>'}
}
})위와 같이 작성할 수 있습니다.
vue 인스턴스 내에 작성할 수 있는 속성은 더 많습니다. 라이프 사이클만 해도 8개의 속성이 추가됩니다.
처음 vue를 익히실 때 자주 사용하게 될 문법들을 중심으로 또,
뷰 인스턴스와 컴포넌트의 생성을 간단히 기록해보았습니다.
감사합니다.
반응형