문제상황
이것은 vuejs 공식페이지에 들어가자마자 보이는 문구이다.
그렇다.. vue를 하게 되었다.. (3로 마이그레이션 언제하지..)
자세한 기능이나 이런것들은 따로 작성하지 않을 것이다. 공식문서가 훨씬 잘나와있음.
내가 코드분석하면서 이해한 것 위주로 작성된 것임. (내가 보려고 작성했단 뜻)
main.js
- 진입점
- new Vue : Vue 인스턴스 생성
el: "#app": Vue 인스턴스가 마운트될 HTML 요소를 지정.
"#app"은 HTML 문서 내에서 id가 "app"인 요소를 찾아 사용.router: Vue Router 인스턴스를 사용하여 라우팅 기능을 추가render: (h) => h(App): 애플리케이션의 루트 컴포넌트인App컴포넌트를 렌더링.
(h) => h(App)는 렌더링 함수를 나타내며,h는 createElement 함수를 의미한다.
App.vue
컴포넌트에서 data() {} 형태로 쓰는 이유
-> 컴포넌트를 여러개 썼을때 데이터가 공유되는 현상을 막기 위해 항상 새로운 객체를 생성해 return 하는 메서드를 지정해줌
[created()](https://ko.vuejs.org/api/options-lifecycle.html#created): 컴포넌트가 생성되었을 때 실행되는 라이프사이클 훅.[mounted()](https://ko.vuejs.org/api/options-lifecycle.html#mounted): 컴포넌트가 마운트된 후에 실행되는 라이프사이클 훅.- 참고: https://ko.vuejs.org/api/options-lifecycle.html
-
@*close*="eventName"- 사용자가 직접 정의한 커스텀 이벤트
- 커스텀 이벤트를 사용하여 부모 컴포넌트와 통신하고 상호작용할 수 있다.
@close이벤트는 부모 컴포넌트에서 발생, 해당 컴포넌트 내부에서 닫기 동작이 수행될 때 이벤트를 발생시킨다.
이 이벤트는 부모 컴포넌트에서@close속성을 사용하여 해당 이벤트에 대한 핸들러를 등록할 수 있다.- 부모 내부에서
@click="$emit('close')"이런식으로 이벤트를 발생시킨다.
computed
- 템플릿 코드 대신 사용할 수 있다.
- data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.
- 인자를 받지 않는다.
- HTTP 통신과 같이 브라우저 리소스가 많이 필요한 코드들은 watch나 methods에 넣는 것이 적합하다.
watch
- 특정 데이터나 표현식의 변화를 감지하고, 그에 따라 특정 동작을 수행하는 역할
computed vs watch
- watch 속성은 감시할 데이터를 지정하고 데이터가 바뀌면 함수를 실행하는 방식 → 명령형 프로그래밍
- computed 속성은 계산해야하는 목표 데이터를 정의하는 방식 → 선언형 프로그래밍
$emit
- 컴포넌트 내에서 커스텀 이벤트를 발생시킬 수 있다.
$emit('close')는close라는 이름의 커스텀 이벤트를 발생시키는 것을 의미한다.
slot
- 부모가 되는 컴포넌트에서 자식 컴포넌트의 템플릿의 일부를 삽입하는 기능
- 부모 component
<template>
<div class="home">
<MyCom></MyCom>
<MyCom>
<template v-slot:name>aila</template>
</MyCom>
<MyCom>
<template v-slot:age>999</template>
</MyCom>
</div>
</template>
<script>
import MyCom from "@/components/MyCom.vue"
export default {
components: {
MyCom,
},
}
</script>v-bind - :
v-on - @
v-slot - #
으로 축약가능
- 자식 component
<template>
<div class="mycom">
<p>name:<slot name="name">namsun</slot></p>
<p>address:<slot name="age">99</slot></p>
</div>
</template>