잡다한 지식의 블로그
Vue.js Component 본문
Vue.js에서 Component란?
- 조합하여 화면을 구성할 수 있는 블록
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발가능.
- 코트를 쉽게 이해할 수 있으며 재사용이 쉬워진다.
Vue.js의 Component의 종류
1. 전역(Global)
- 모든 범위의 여러 인스턴스에서 공통으로 사용이 가능.
- Vue.component()를 사용하여 등록
2. 지역(Local)
- 특정 인스턴스에서만 사용이 가능.
- 인스턴스에 components속성을 추가하여 사용.
Vue.js의 Component(Global)의 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>component</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ name }}
<br>
<button @click = "change">vue1 변경</button>
<hr>
<component-button></component-button>
</div>
<hr>
<div id="app-1">
{{ name }}
<br>
<button @click = "change">vue2 변경</button>
<hr>
<component-button></component-button>
</div>
<script>
Vue.component('hello-world',{
template: `<div>hello world</div>`
});
Vue.component('component-button', {
template : `
<div>
{{ name }}
<hello-world></hello-world>
<button @click = "change">vue1 변경</button>
</div>
`,
data() {
return {
name : 'component'
}
},
methods : {
change() {
this.name = 'component updated';
}
}
});
const app = new Vue({
el: '#app',
data: {
name : 'first'
},
methods: {
change() {
this.name = 'firse vue'
}
}
})
const app1 = new Vue({
el: '#app-1',
data: {
name : 'second'
},
methods: {
change() {
this.name = 'second vue'
}
}
})
</script>
</body>
</html>
component.zip
0.00MB
Vue.js의 Component(Local)의 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>component</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<component_button></component_button>
</div>
<hr>
<div id="app-1">
{{ name }}
<br>
<button @click = "change">vue2 변경</button>
</div>
<script>
const Component_button = {
template :`
<div>
{{ name }}<br>
<button @click="change">component 변경</button>
</div>
`,
data() {
return {
name : 'component'
}
},
methods: {
change() {
this.name = 'component vue'
}
},
};
const app = new Vue({
el: '#app',
components : {
'component_button' : Component_button
}
})
const app1 = new Vue({
el: '#app-1',
data: {
name : 'second'
},
methods: {
change() {
this.name = 'second vue'
}
}
})
</script>
</body>
</html>
component (Local).zip
0.00MB
'Vue.js' 카테고리의 다른 글
| Vue.js CLI (0) | 2024.04.30 |
|---|---|
| Vue.js에서 멀티 인스턴스 사용하기 (0) | 2024.04.18 |
| Vue.js에서 v-for (0) | 2024.04.17 |
| Vue.js에서 조건부 렌더링 (0) | 2024.04.17 |
| Vue.js에서 Class와 Style 속성 Binding (0) | 2024.04.16 |
'Vue.js' Related Articles
more
Comments