컴퓨터 탐험가 찰리

1. 라이프 사이클 Vue.js에서 라이프 사이클이란 하나의 인스턴스가 생성되고, 마운트 및 업데이트 되고, 사라지는 일련의 과정을 말한다. 그리고 Vue.js에서는 이러한 과정을 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 나누어 구분한다. 각 과정에 대해서 상세히 알아야겠지만, 기초 단계라 정확히 파악하기 보다는 전체적인 흐름만 파악하고 실제 프로젝트에서 이러한 과정들을 활용하면서 익숙해지고자 한다. 각 과정의 의미 1. creation(beforeCreate, created) 이 단계는 가장 처음 실행되는 단계로, 컴포넌트들이 DOM에 추가되기 전이다. 클라이언트와 서버의 렌더..

1. Slot의 필요성 Slot은 자식(하위) 컴포넌트를 그대로 유지하면서 다른 부모(상위) 컴포넌트들마다 다른 내용을 적용하고 싶을 때 사용한다. 기본적으로는 부모 컴포넌트의 요소를 자식 컴포넌트에 내려받는 방식으로 사용한다. 아래와 같이 About.vue라는 상위 요소 컴포넌트에 하위 요소로 Header.vue 컴포넌트가 있는 경우를 생각해보자. 이 상황에서 first, second, third의 윗 부분에 요소를 추가하고 싶다면? 하위 컴포넌트인 Header.vue에 요소를 직접 추가하면 된다. 하지만 Header.vue 컴포넌트는 다른 컴포넌트에서도 그대로 사용하고 싶은 상황이라면 slot을 사용하는 것이 유리하다. 아래와 같이 Slot을 이용하여 각 영역에 Here is... 구문을 추가하는 방..

1. 부모로부터 props를 받는 자식 컴포넌트 작성 지난 글에서 다룬 것처럼, 일단 부모로부터 props를 받는 자식 컴포넌트를 작성한다. 자식 컴포넌트로 InputField.vue를 만들고 이것을 부모 컴포넌트 Home.vue에서 불러오는 방식이다. [부모컴포넌트 Home.vue] inputField를 불러오고, 자신의 data인 title을 title 속성으로 바인딩하여 props로 내려준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Welcome to Home import inputField from '@/components/layout/inputField'; export default { data() { return { title : "" } }..

1. 자식컴포넌트에 props 보내기 1-1. 기본 페이지 및 컴포넌트 구성 props는 React에서와 마찬가지로 부모 컴포넌트의 데이터(상태값)를 자식 컴포넌트로 내려줄 때 사용한다. 작성하게 될 페이지 구성을 표현해보면 다음과 같다. Home.vue, About.vue 내부에 Header.vue 컴포넌트를 삽입한 형태다. 코드를 아래에서 확인해보자. App.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 App.vue에서 표시하는 정보입니다. Home About export default { name: 'App' } h3 { color: red; } Colored by Color Scripter cs Home.vue (부모 컴포넌트) 1 2 3..

1. 인스턴스 여러 개의 인스턴스 생성하기 new Vue 명령어를 통해서 Vue를 생성하고, el 객체에서 적용되는 id값만 바꿔서 적용해주면 된다. id=app 과 id=app2인 요소를 2개 만들고, 같은 인스턴스를 만들고 같은 메서드를 적용하되, el객체의 값을 바꿔주었다.(instance.html 파일) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 {{name}} change {{name}} change new Vue({ el: '#app', data: { name: 'charlie' }, methods: { changeName() { this.name = this.name +..