Vue.js
Vue.js 컴포넌트
jmeen
2021. 9. 14. 20:43
728x90
0. 먼저 vue.js cdn을 header에 등록한다.
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
이해하기 쉽게 몇개로만 나누어 보자.
1. 컴포넌트 등록
1-1. 전역 컴포넌트
<body>
<!-- 1. 컴포넌트 등록 -->
<div id="app">
<!-- 3- 전역변수 "gobal-component" 사용 -->
<gobal-component></gobal-component>
</div>
<script>
// 1- 전역변수 "gobal-component" 생성
Vue.component("gobal-component", {
template: '<h1>글로벌 컴포넌트입니다.</h1>'
})
// 2- 새 인스턴스 생성
let app = new Vue({ el: '#app' })
</script>
</body>이렇게 Vue.component로 등록한 전역변수는 app 인스턴스에서 component를 등록하지 않아도, 바로 #app에서 사용이 가능하다.
1-2. 지역 컴포넌트
<body>
<!-- 컴포넌트 등록 -->
<div id="app">
<!-- 1-전역변수 "gobal-component" 사용 -->
<gobal-component></gobal-component>
<!-- 2_지역번수 "local-Component" 사용 -->
<local-component></local-component>
</div>
<script>
// 1-1_전역변수 "gobal-component" 생성
Vue.component("gobal-component", {
template: '<h1>글로벌 컴포넌트입니다.</h1>'
})
// 2-1_지역변수 "local-component" 생성
let localComponent = {
template: '<h2>로컬 컴포넌트입니다.</h2>'
}
// 1-2_새 인스턴스 생성
let app = new Vue({
el: '#app',
components: {
// 2-2_지역변수를 인스턴스 내부 components옵션에 할당
"local-component": localComponent,
}
})
</script>
</body>이렇게 적으면 지역 컴포넌트. 직접 인스턴스 옵션으로 등록을 해줘야 사용할 수 있다.
주의!! 컴포넌트 이름의 규칙이 있다. 자기들 말로는 적용하지 않는다는데, 어기면 실행이 안된다.
반드시 컴포넌트 이름은 소문자여야 하고, 하이픈으로 구분해야 한다.
2. 데이터
data는 반드시 함수여야 한다.
<body>
<div id="app">
<data-component></data-component>
</div>
<script>
Vue.component("data-component", {
template: ' <p>{{message}}</p>',
data: function () {
return {
message: "이것은 Data 예제입니다."
}
}
})
let app = new Vue({
el: '#app',
components: {
"local-component": localComponent,
}
})
</script>
</body>3. 데이터 전달하기. Props
부모가 가진 데이터를 자식 컴포넌트로 전달 할 수 있다.
<body>
<div id="propex">
<child-component v-bind:propsdata="message"></child-component>
</div>
<script>
// 자식객체 생성
let childcmp = {
props: ['propsdata'],
template: "<h1>전달받은 메세지는 {{propsdata}} 입니다.</h1>"
}
// 부모객체 생성
let propEx = new Vue({
el: '#propex',
data: function () {
return {
message: "이 구문은 자식에게 주는 문장입니다."
}
},
components: {
"child-component": childcmp
}
})
</script>
</body>* v-model : 양방향 데이터 전송 : 주로 set/get에 사용
* v-bind : 단방향 데이터 전송
주의해야 할 점:
- 부모 객체에는 template이 있으면 안된다.
- 자식객체가 먼저 정의되어야 한다. 위부터 순차적으로 읽어 내려온다.
4. 이벤트 연결 v-on
클릭같은 뭔가의 이벤트를 연결할때 사용한다.
<body>
<div div id="propex">
<child-component v-bind:propsdata="message"></child-component>
<button v-on:click="clickevent">클릭이벤트</button>
</div>
<script>
// 자식객체 생성
var childcmp = {
props: ['propsdata'],
template: "<h1>전달받은 메세지는 {{propsdata}} 입니다.</h1>"
}
// 부모객체 생성
var propEx = new Vue({
el: '#propex',
data: function () {
return {
message: "이 구문은 자식에게 주는 문장입니다."
}
},
components: {
"child-component": childcmp
},
methods:{
clickevent:function(){
console.log("event!")
}
}
})
</script>부모 컴포넌트에 methods 아래 함수를 입력해 두고, 발생시 그부분을 호출한다.