뷰 디렉티브(vue Directeve)

HTML 태그 안에 v- 접두사를 가지는 모든 속성이다.

디렉티브는 화면의 요소를 더 쉽게 조작할 수 있게 도와준다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.


v-bind 는 아이디, 클래스, 스타일 등의 HTML속성 값에 뷰 데이터 값을 연결할 때 사용한다.

<p v-bind:class="test">v-bind 테스트</p>


v-if 는 지정한 뷰 데이터값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.


v-for  은 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.


v-show  v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none; 으로 준다.


v-on  은 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.


v-model  은 Form에서 주로 사용되는 속성으로 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. * <input>, <select>, <textarea> 태그에만 사용할 수 있다.



'Web Front > Vue.js' 카테고리의 다른 글

[Vue.js] 뷰 CLI 를 통한 프로젝트 생성  (0) 2018.06.14

개념정리

라우팅과 SPA

2018. 6. 6. 17:06


라우팅(routing)

라우팅이란  어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정이다. 그리고, 웹 페이지 간의 이동 방법이다. 현대 웹 앱 형태 중 하나인 싱글 페이지 어플리케이션(SPA)에서 주로 사용된다.


라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐 아니라 일반적으로 브라우저에서 웹페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면이 깜빡이는 현상도 없앨 수 있다. 


뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면 전환을 하고 있으며, 프론트엔드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 통해 라우팅 방식의 페이지 이동을 구현 할 수 있다.



SPA(Single Page Application)

페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션




User Settings 파일을 열어서 아래와 같이 설정을 해주시면 됩니다.


{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
}

 


간단하쥬