Vue란 무엇인가?

Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책  추천드립니다

구매를 원하시는 분은 요기를 클릭해주세요

해당 글은 책 내용을 바탕으로 작성되었습니다.

 

1. Vue.js

 

웹 페지이 화면을 개발하기 위한 프런트엔드 프레임워크

 

특징

리액트와 앵귤러에 비해 성능이 우수하고 빠름

리엑트의 가상 돔기반 렌더링 특징과 단방향 데이터흐름  그리고  앵귤러의 양방향 데이터 바인딩 특성 가짐

컴포넌트 기반 프레임워크

 

(렌더링: 브라우저에 웹 페이즈를 그래내는 동작)

(가상돔을 활용시 특정 돔 요소를  추가하거나 삭제하는 변경이 일어날때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신함)

 

 

2. 뷰 템플릿

 

뷰템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수 있는 형태의 HTML로 변환해 주는 속성

 

 

v-bind

아이디,클래스,스타일 등의 HTML 속성값에(Attributes) 뷰 데이터 값을 연결할 때 사용하는 데이터 연결방식

:로 간소화 가능

 

디렉티브

뷰 디렉티브란 HTMl 태그안에 v-접두사를 가지는 모든 속성

 

디렉티브 이름	역할
v-if, v-else,v-else if	지정한 뷰 데이터 값의 참,거짓여부에 따라 해당 HTML 태그를 화면에 표시
v-for	HTML 태그 반복
v-show	v-if와 비슷. 차이점은 v-if는 태그완적삭제/ v-show는 css효과만 display:none 실제태그 남아있음
v-bind	HTML태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면요소의 이벤트를 감지 처리
v-model	폼에서 주로 사용하는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가로직 수행가능 <input> <select> <textarea> 에 사용가능