파일들
- index.html
- main.js
- App.vue
- Btn.vue
- Hello.vue
- 추가로 webpack.config.js에서
alias : {
'~' : path.resolve(__dirname , 'src')
}~를 지정해주었다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>main.js
import {createApp} from 'vue'
import App from '~/App'
//전역등록
import Btn from '~/component/Btn'
const app = createApp(App)
app.component('Btn',Btn)
app.mount('#app')전역으로 Btn이 App컴포넌트를 통해 만들어진 application에 등록된 상태이다.
App.vue
<template>
<button @click="reverseMsg">
click!
</button>
<Hello
:message="msg"
:name="name"
/>
</template>
<script>
import Hello from '~/component/Hello.vue'
export default{
components : {
Hello
},
data(){
return {
msg : 'Hello Vue!',
name : '123'
}
},
methods : {
reverseMsg(){
this.msg = this.msg.split('').reverse().join('')
}
}
}
</script>
msg의 Hello Vue!와 name의 123을 Hello태그와 함께 처리
Btn.vue
<template>
<button @click="log">
Click me!
</button>
</template>
<script>
export default {
methods:{
log(){
console.log('Click')
}
}
}
</script>
Hello.vue
<template>
<h1 @click="update">
{{ newMessage }}
</h1>
<h2>{{ name }}</h2>
</template>
<style scoped lang="scss">
$color : orange;
h1{
color:$color;
}
</style>
<script>
export default{
props : {
message : String,
name : [String, Number]
},
data(){
return {
newMessage : this.message
}
},
methods:{
update(){
this.newMessage ='Good'
}
}
}
</script>
<Hello :message="msg" :name="name"/>의 message와 name을 props로 받아 처리해서 해당 태그들에 적용시킨다.
나의 하루를 가능한 기억하고 즐기고 후회하지말자