오늘은 전역 컴포넌트를 등록하는 방법에 대해 작성할려고 한다~ 일단, 아래와 같이 코드를 작성해보자. 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있기 때문에 Vue로 접근이 가능하다.따라서 아래 그림과 같이 Vue에 Component를 등록할 수 있다. [질문1]이 코드에서 Vue는 무엇인데에????? > Vue는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 말하는 것! 그렇다면 컴포넌트를 등록하면 html에 어떻게 사용할 수 있을까?답은 공통점으로 찾아보자... 자... 동일한 코드가 어디 보일꺼야.... 눈을 떠... 힌트를 보여줄께~ [질문2]등록한 컴포넌트를 어떻게 html 테그에 연결할 수 있는가? > 컴포넌트 이름을 이용한다. ex) --------------------..

Component란? 조합하여 화면을 구성할 수 있는 블록 Component의 목적? 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하기 위함 컴포넌트 관계를 가시화하면 위 그림과 같은 형태의 관계를 확인할 수 있다. 다시말해서, 컴포넌트는 "화면 구성의 한 단위"라고도 할 수 있으며, 세부적으로 화면이 쪼개질 때. 상.하위 컴포넌트로 나누어진다고 한다. 컴포넌트 간의 관계는 Vue에서 화면을 구성하는데 아주 중요한 역할을 한다고 한다.

각각의 라이프사이클에 커스텀로직을 추가했을 때 코드에서 어떻게 동작하는지 확인해봅시다~ 이번 실습에서 확인해 볼 라이프사이클은 beforeCreate, created, mounted, updated 총 4가지이다. 실습 시작~~ 아래와 같이 코드들을 작성하여 html 파일로 저장하였다. 이후 저장된 파일을 Chrome으로 확인해보았을 때, 콘솔창에 표시되는 값은 아래 그림과 같았다. 분명히 update에 대한 코드를 작성했는데도 불구하고, console창에 로그가 찍히지 않은 이유!!message 데이터의 값이 변경되지 않았기 때문!!따라서, update 콘솔 로그가 찍히도록 하기위해서는 아래 그림과 같이 코드를 한 줄 더 추가해야한다. 이 코드는 update 전에 작성한다.웹 페이지에 id가 "app"..

Lifecycle : Application이 가지는 생명 주기단계) 객체 생성, 객체 변경(update), 객체 소멸 등 Lifecycle 속성 : 인스턴스 상태에 따라 호출할 수 있는 속성들 Lifecycle 속성 종류 설명 인스턴스 생성 beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 created data 속성과 methods 속성에 정의된 값에 접근할 수 있는 단계 beforeMount el 속성에서 지정한 화면에 인스턴스를 부착하기 전에 호출되는 단계 mounted el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계 template 속성에 정의한 화면 요소에 접근 가능. 화면 요소를 제어하는 로직을 수행하기 좋은 단계 인스턴스를 화..

이전 블로그에서 Hello를 화면에 표시하는 실습과 Vue Instance에 대해서 언급했었다.오늘은 Vue 인스턴스를 생성하고, 그 옵션 값에 대해 설명하려한다. [Hello를 화면에 표시하는 실습]https://brainmemory.tistory.com/36 [Vue Instance]https://brainmemory.tistory.com/37 ... Hello를 화면에 표시하는 실습을 하면서 아래 그림을 첨부했었다. Vue Instance에 대한 내용을 작성하면서 아래 그림을 첨부했었다. 그 중 "//......" 에 들어갈 수 있는 옵션들에 대해서 오늘 요약해보려고 한다.options 들에는 아래 그림과 같이 template, el, data, methods, created 등이 있다. optio..

Vue 인스턴스란?- Vue로 화면을 개발함에 있어 가장 중요한 요소- 컴포넌트와 밀접한 관계 있음 개발할 때 아래와 같은 흐름으로 이어나갈 것이다! 1. Vue 라이브러리로 로딩 2. 접근 가능한 Vue라는 객체에, 화면에서 사용할 옵션(데이터, 속성, 메서드 등등)을 포함하여 화면 단위를 생성. 따라서 위와 같은 코드에서 new Vue 를 이용 → Vue를 생성.Vue 안에 사용되는 옵션(데이터, 속성, 메서드) 등이 작성되어있을 경우 해당 옵션을 가진 인스턴스 생성이 될 것이다. 이어서 Vue 인스턴스를 생성에 대한 글은 다음 시간에 할 예정이다....