화면 개발을 위한 기본 지식과 팁

템플릿

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

 

템플릿 사용방법

1. ES5에서 뷰 인스턴스의 Template 속성을 활용하는 방법

\

템플릿에서 사용하는 뷰의 속성

1. 데이터 바인딩

• 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.
• 주요 문법으로는 {{  }} 와 v-bind 속성이 있다. 

*{{ }}

• HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식
• v-once는 data 속성의 message 값이 바뀌어도 기존의 값을 고수한다.

기존 방식

v-once 방식

*v-bind

• 아이디,클래스,스타일 등의 HTML속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터  연결 방식
• v-bind:v-bind 속성으로 지정할 HTML 속성="이름" 또는 v-bind:props="이름"으로 사용한다.

자바스크립트 표현식

• 뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. {{ }}안에 자바스크립트 표현식을 사용한다.

*자바스크립트 표현식에서 주의할 점

 

• 복잡한 연산은 인스턴스 안-new Vue({})-에서 처리해야한다.
  연산은 인스턴스 안에서 computed로 사용한다. 

*this.이름을 통해 데이터값을 다른 속성에 적용할 수 있다.

• 분기구문은 {{ }}에서 사용할 수 없다. -if(true){ }불가-
  분기구문을 쓰고싶다면 삼항 연산자를 사용한다.

디렉티브

• HTML 태그안에 v-접두사 를 가지는 모든 속성들을 의미 

ex)

flag가 true라면 hi가 문서에 보이고 false라면 보이지 않는다.

 

*동적인 웹 앱을 구현할 때 자주 사용하는 주요 디렉티브

v-if	뷰 데이터의 참 거짓 여부에 따라 HTML 태그를 화면에 표시하거나 표시하지 않음
v-for	뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력
v-show	v-if와 유사하게 데이터의 진위 여부에 따라 HTML 태그를 화면에 표시 할지 말지 결정 v-if:해당 태그를 완전히 삭제 v-show:css 효과만 display:none;으로 주어 실제 태그는 남아 있음
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트를 감지하며 처리할 때 사용 v-on:click 클릭이벤트 감지 메서드 출력
v-model	Form에서 주로 사용, 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화  화면에 입력된 값을 저장하여 서버에 보내거나 watch와 동기화  <input>,<select>,<textarea>태그에만 사용 가능

*v-for

HTML for문 문장으로 쓰는게 특이하다. 매우 직관적이다.

4개의 데이터 크기는 4

결과값

*v-if,v-show

HTML

HTML

true

결과값

false

*v-bind

클릭

 

함수 발동

결과값

*이벤트 처리시 인자값 넘기기 

• method에 인자값을 넘겨 출력할 수도 있다.

인자값 10을 넣어줌

메소드

결과값

*이벤트 객체에 접근하기 

• 인자값을 지정하지 않고 method에 인자값을 받아오는 method를 작성하면 이벤트 객체에 대한 정보를 얻을 수 있다.

click

method

결과값

고급 템플릿 기법

• 실제 어플리케이션 개발시 유용한 속성으로 데이터 바인딩,디렉티브와 같은 기본적인 문법을 조합해 사용한다.

1.computed 속성

 

computed 속성의 장점

• data 속성 값의 변화에 따라 자동으로 다시 연산한다.
• 캐싱 능력 
  -동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 것 -

method속성과 computed 속성의 차이점 

• method는 호출할 때만 해당 로직이 수행-수동-
• computed는 대상 데이터의 값이 변경되면 자동적으로 수행-능동- 

2.watch속성

• watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행
• watch 속성은 computed 속성과 달리 호출과 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

*비동기 처리

• 웹 앱에서 데이터를 호출할 때 일반적으로는 서버에 Http 요청을 보낸다. 하지만 언제 서버에서 응답이 올지 모르기 때문에 다른 자바 스크립트 연산에 영향을 주지 못하도록 별도의 영역에서 해당 데이터를 요청하고 응답을 기다린다. 이것을 자바스크립트 비동기 처리 로직이라 한다.

 

함수 출력 

기존 값

변경된 값

변경된 값에 의해 출력된 함수