vue.js 기본 원리 / 기초 사용 방법

출처 :https://wikidocs.net/17701 위키 독스를 보고 참고했습니다.

 

---

수업내용 복습

• 1 Vue.js 간단히 사용해보기

new Vue()  << Vue는 생성자로 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.

이 부분이 바로 인스턴스이다.

생성자를 사용하는 이유는 미리 개발해 놓고 정의해 놓은 다음에 

그 기능을  재정의하여 편리하게 사용하도록 하기 위해서 사용한다.

---

인스턴스 재정의 시 사용하는 옵션 속성은 여러가지가 있는데 대표적인 것들을 소개 해드리겠습니다.

• el - 인스턴스를 붙일 화면 요소(돔)를 정의. 뷰 인스턴트의 유효범위를 결정.
• data - 객체의 내용, 치환될 데이터 값을 정의.
• template - HTML, CSS 등의 마크업 요소를 정의. (뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음)
• method - 화면 로직 제어와 관계된 메서드를 정의. (이벤트나 화면 동작과 관련된 로직을 추가)
• created - 뷰 인스턴스가 생성되자마자 실행할 로직을 정의.

화면에서 인스턴스 옵션 속성을 적용하는 과정1. 뷰 라이브러리 파일 로딩2. 인스턴스 객체 생성 - created, template 실행3. 특정 화면 요소에 인스턴스를 붙임 - el로 정의된 위치에 인스턴스를 붙임4. 인스턴스 내용이 화면 요소로 변환 - data,method에 정의된 값으로 치환

---

뷰 컴포넌트

컴포넌트란 ? 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미

>> 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발

 

네비게이션바,테이블,리스트,input 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리함.

 

왼쪽 같은 모양에서 오른쪽같은 모양으로 구성해서 만들기 때문에 

뷰에서는 상위 컴포넌트, 하위 컴포넌트 라는 말로 관리를 한다.

---

1.Vue.js를 사용하기 위해서 Cdn 방식을 이용해서 script 안에 링크를 넣어준다.

2.div 안에 {{   }} 로 넣고 싶은 객체를 넣는다.

3. script 안에 new Vue를 만들어서 

el = 요소를 출력한다  >> 여기서는 #app니까 id가 app인 것을 출력하라~ 이 말인 것 같다.

data = { } >> 요소 안에서 내가 필요한 부분을 출력해야 하기 때문에 객체 형태로 만들어서 키/밸류 형태인 massage를 만들

어서 선언을 해주고 #app에서는  {{  }} 안에 넣어서 출력하는 것 같다. 

---

• 새로운 Vue_component를 만들어서 사용해보자

• 템플릿(Template)란?

: HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여

사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

• Vue.component <<

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미합니다.

컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있으며,

코드를 쉽게 이해하고 재사용할 수 있습니다.

 

추가로

개발자 툴에서 Vue를 보면 myComponet 이 생겨서 div안에서 작동되는 게 볼 수 있습니다.

 

 

---

• 지역 컴포넌트와 전역 컴포넌트

 

전역 컴포넌트는 Vue.component를 통해 직접 선언해주고

지역 컴퍼넌트는 변수를 선언한 후에  new Vue 안에서 실행된다.

---

• 지역 컴포넌트와 전역 컴포넌트의 차이점

지역 컴포넌트는 각각의 new Vue 안에서 선언되었을 때만 출력이 되고 

전역 컴퍼넌트는  <script> 안에서 처음에 선언하고 나면 어떤 new Vue에서도 적용이 된다.

---

index.html

app.js

파일을 각각 분리해서 사용할 땐 script src로 경로 지정해서 불러오면 된다.

---

 

참고 : https://memme.tistory.com/152?category=1013365 

[Do it! Vue.js 입문] 03. 뷰 인스턴스

 

참고 : https://memme.tistory.com/153?category=1013365 

[Do it! Vue.js 입문] 04. 뷰 컴포넌트