[인프런] Vue.js 란?

View : 브라우저에서 사용자에게 비춰지는 화면이다. 따라서 화면에 입력박스나 버튼들이 해당된다.

화면에 나타내는 요소 즉 html은 돔을 이용해 자바스크립트로 조작이 가능하게 구성이 되어져있다.

- 뷰의 특징

뷰의 특징 1. DOM Listeners

특정 사용자가 키보드를 입력하거나 버튼을 클릭하게되면 즉 이벤트를 중간에 DOM Listeners로 뷰가 청취하게 된다.

뷰는 이벤트들을 잡아 자바스크립트에 이는 데이터를 바꿔주거나 자바스크립트에서 지정했던 특정 로직에서 실행을 함

뷰의 특징 2. Data Bindings

자바스크립트의 데이터가 변하면 Data Bindings를 타게 되는데

예를들어 자바스크립트의 문자열이나 숫자가 변하게 되면 data bindings을 이용해 바로 화면에 적용이 된다.

※ MVVN 패턴이란..

MVVN 패턴 :

1. View에 입력이 들어오면 Command 패턴으로 ViewModel에 명령을 합니다.

2.ViewModel은 필요한 데이터를 Model에 요청 합니다.

3.Model은 ViewModel에 필요한 데이터를 응답 합니다.

4.ViewModel은 응답 받은 데이터를 가공해서 저장 합니다.

5.View는 ViewModel과의 Data Binding으로 인해 자동으로 갱신 됩니다.

Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.

View : 사용자에서 보여지는 UI 부분입니다.

View Model : View를 표현하기 위해 만든 View를 위한 Model입니다.

View를 나타내 주기 위한 Model이자 View를 나타내기 위한

데이터 처리를 하는 부분입니다.

출처: https://beomy.tistory.com/43 [beomy]

※ Command 패턴 확인해보기

- HELLO Vue.js 를 띄워보자.

1. 뷰를 사용하기 위해선 뷰 라이브러리를 사용해야 하늗데 일단은 cdn방식으로 뷰를 가져와서 넣어주자.

2. 뷰가 그려질 타겟

3. 뷰 인스턴스

4. 콧수염 템플릿

보간법 = 콧수염 템플릿 = Mustache : {{ }}

뷰에서 선언한 변수를 사용하거나 간단한 자바스크립트를 사용할 수 있다.

(뒤에 더 설명)

- 데이터 바인딩방법중 하나

{{ }} 을 사용하여 화면에 나타내는 방법