Vue?
-
Evan you가 만들었으며 2014년 릴리즈를 시작으로 자바스크립트 프레임워크이다.
-
SPA(single page application)으로 되어있으며 vue router를 사용한다.
-
컨트롤러 대신 뷰 모델을 가지는 MVVM패턴을 기반으로 디자인되었으며 재사용이 가능한 UI들을 묶어서 사용할수있다.
-
MVVM패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리로 로직과 UI의 분리를 위해 설계된 패턴이다.
-
웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 view 역할을하고 JS가 Model역할을 한다.
-
뷰모델이 없는경우에는 직접모델과 뷰를 연결해야 하며 그걸 연결해주는것이 MVVM모델이다.
Vue 설치
-
Npm init vue@latest
:우선 node.js를 설치한 후 입력하여 Vue의 packasge.json 파일을 만든다. -
Cd 프로젝트명
: vue 프로젝트를 만든다. -
npm install
: 필요한 npm 설정파일들을 설치한다.
Vue 구조와 특징/장점
-
MVVM패턴을 사용
-
Virtual DOM을 사용
-
Angular React에 비해 매우 작고 가벼우며 복잡도가 낮다.
-
템플릿과 컴포넌트를 사용하여 재사용이 가능한 유저 인터페이스를 묶고 viewLayer를 정리하여 사용한다.
-
데이터 바인딩과 화면단위를 컴포넌트 형태로 제공하며, 관련 API를지원하는데 궁극적인 목적이 있다.
-
view와 model간 양방향 바인딩이 가능하지만 컴포넌트 간 통신의 기본 골격은 리엑트의 단방향 데이터흐름을 사용한다.
: 가장적은 러닝커브를 가지고 리액트와 앵귤러의 장점을 적용시켰다
Vue React 공통점
-
Virtual DOM 렌더링
-
컴포넌트를 제공함
-
뷰에만 집중을 하고 있고, 라우터, 상태관리를 위해선 써드파티 라이브러리를 사용함
-
Sever Side Rendering
-
라우터, 번들러 state management 와 결합이 쉬움
Vue React 차이점
-
리엑트는 라이브러리로 함수 자바스크립트에 가깝고, Html css조차도 자바스크립트로 다 해버린다.
기능들이 간단하지만 더 복작한걸 구현하려면 직접 만들어야한다. -
뷰는 프레임워크로 html과 css, 자바스크립트 특성을 각각 다 살려서 편하게 만든것이다.
기능들이 이미 갖춰진 상태로 초보한테 편리하며,Html css JS의 역할이 명확하고 프레임워크로서 더욱 갖춰져있다.
Vue 문법
-
Vue Instance
: Vue 객체를 생성 후 el, data, template, method, life cycle hook 등 인스턴스 옵션 속성을 포함할 수 있다.index.html <div id="vue-app"> <h1>{{ greet("afternoon") }}</h1> <p>Name : {{ name }}</p> <p>Job : {{ job }}</p> </div> app.js new Vue({ el: "#vue-app", data: { name: "Smooth", job: "developer" }, methods: { greet: function(time) { return `Good ${time} ${this.name}`; } } });
: 이렇게 메소드 속성도 추가할 수 있고 Vue 객체 안에서 this는 생성된 Vue 객체를 가리킨다.
-
Vue Directive
: 디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는것이다. -
Data Binding
: v-bind:디렉티브를 사용해서 속성을 사용할 수 있다.index.html <div id="vue-app"> <h1>Data Binding</h1> <a v-bind:href="website">블로그</a> <input type="text" v-bind:value="name" /> </div> app.js new Vue({ el: "#vue-app", data: { name: "Smooth", job: "developer", website: "https://velog.io/@smooth97/Vue.js" }, methods: { greet: function(time) { return `Good ${time} ${this.name}`; } } }); //data 속성에 html을 연결할 수도 있다. websiteTag: '<a href="https://velog.io/@smooth97/Vue.js">Blog</a>' <p v-html="websiteTag"></p> -
중요한점은 v-bind로 props의 이름과 데이터값을 넘겨주고 컴포넌트 란에서 props를 받고 template으로 설정 해준다.
-
Event Emit
: app-content라는 컴포넌트를 만들고 change라는 메서드를 만들어서 올려준다 v-on이라는것 을 설정해주고 온클릭시 change라는 메소드가 발생하게 되고 그담에 chaneStr 메소드가 작동함으로써 str의 값이 클릭 되었을때 변경되게 설정한다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <app-header v-bind:title="str"></app-header> <app-contents v-on:change="changeStr"></app-contents> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 인스턴스 옵션 el: "#app", data: { str: "프롭스 문자열", }, methods: { changeStr: function () { this.str = "변경됐습니다."; }, }, components: { //컴포넌트 이름: 컴포넌트 내용 "app-header": { // app-header 컴포넌트 내용 props: ["title"], template: "<h1>{{title}}</h1>", }, "app-contents": { template: "<main>컨텐츠<button v-on:click='change'>메세지 변경</button></main>", methods: { change() { this.$emit("change"); }, }, }, }, }); </script> </html>
