싱글파일 컴포넌트란 쉽게 말해서, Root하위에 있는 컴포넌트를 파일로 따로 구분해서 사용하는 것을 말한다.
App.Vue파일을 생성해보자.
싱글파일 컴포넌트의 기본 구조는
<HTML 영역>
</HTML 영역>
<JS영 역>
</JS 영역>
<CSS 영역>
</CSS 영역>
이런식으로 나뉘어져 있는데, 소스상으로 보면 아래와 같다.
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>이와같은 템플릿을 사용하기 위해선 VSC 에디터 상에서 'vbase'라고 입력 후에 Enter키를 입력하면 된다.
버전마다 scf, vueinit등 다른것으로 알고있다. 나는 Vue.js 3버전을 사용해 개발중.
예시코드
<!-- template 하위에는 하나의 element만 있어야한다.-->
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data(){
return {
msg : 'hi'
}
}
}
</script>
<style lang="scss" scoped>
</style>컴포넌트 생성
컴포넌트는 ./src/components폴더에 모아둔다.
AppHeader.vue파일 생성
컴포넌트를 생성할시에는 HTML에서 제공하는 기본태그와 혼동되지않게 두 단어를 조합해서 명명한다.
예제1
App.vue
<!-- template 하위에는 하나의 element만 있어야한다.-->
<template>
<div>
<app-header v-bind:propsdata="str" v-on:renew="renewStr"></app-header>
{{ msg }}
</div>
</template>
<script>
import AppHeader from './components/AppHeader.vue';
export default {
data(){
return {
msg : 'hi',
str : '으랏차차차차!!'
}
},
components:{
'app-header':AppHeader
},
methods:{
renewStr(){
this.str = '데이터 바뀜';
}
}
}
</script>
<style lang="scss" scoped>
</style>
AppHeader.vue
<template>
<div>
<header>
<h1>
{{ propsdata }}
</h1>
<button v-on:click="sendEvent">클릭</button>
</header>
</div>
</template>
<script>
export default {
data(){
return{
header : '에베베벱!!'
}
},
methods:{
sendEvent(){
this.$emit('renew');
}
},
props:['propsdata']
}
</script>
<style lang="scss" scoped>
</style>
예제2
App.vue
<template>
<div>
<form v-on:submit.prevent="submitForm">
<div>
<label for="username">id:</label>
<input id="username" type="text" v-model="username">
</div>
<div>
<label for="password">pw:</label>
<input id="password" type="password" v-model="password">
</div>
<button type="submit">login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return {
username: '',
password: '',
}
},
methods:{
submitForm(){
//console.log(this.username, this.password);
var url = 'https://jsonplaceholder.typicode.com/users';
var data = {
username : this.username,
password : this.password
}
axios.post(url, data)
.then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
}
}
}
</script>
<style lang="scss" scoped>
</style>'정리 > Vue.js' 카테고리의 다른 글
| Vue.js npm run serve시에 [Failed to resolve loader: sass-loader]에러 수정 (0) | 2023.10.19 |
|---|---|
| Vue.js todo어플리케이션 favicon/font 설정하기 (1) | 2023.10.18 |
| Vue Cli란? (0) | 2023.09.25 |
| Vue.js 템플릿 문법 - watch (0) | 2023.09.22 |
| Vue.js 템플릿 문법 (0) | 2023.09.22 |