-
07. 뷰 템플릿(Template)FrontEnd/Vue.js 2021. 9. 11. 15:05반응형
뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다.
1. 데이터 바인딩(Data Binding)
데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있습니다.
1) {{}} - 콧수염 괄호
<div id="app"> <!-- 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않은 경우 <div id="app" v-once> 사용 --> <!-- data 속성의 message 속성 값 연결 --> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>> data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다.
2) v-bind
v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다. v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여줍니다.
<html> <head> <title>Vue Template - Data Binding</title> </head> <body> <div id="app"> <p v-bind:id="idA">아이디 바인딩</p> <p v-bind:class="classA">클래스 바인딩</p> <p v-bind:style="styleA">스타일 바인딩</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { idA: 10, classA: 'container', styleA: 'color: blue' } }); </script> </body> </html>> v-bind: 문법을 :로 간소화할 수 있습니다. 약식 문법 사용 시 기본 문법과 혼용해서 사용하지 않는 것이 좋습니다. 가급적 v-bind 속성을 이용하는 것이 기존 HTML문법과 구분도 되고 가독성이 좋습니다.
2. 자바스크립트 표현식
1) 자바스크립트의 선언문과 분기 구문은 사용할 수 없습니다.
2) 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 합니다.
<html> <head> <title>Vue Template - Javascript Expression</title> </head> <body> <div id="app"> <!-- 1. --> {{ var a = 10; }} <!-- X, 선언문은 사용 불가능 --> {{ if (true) {return 100} }} <!-- X, 분기 구문은 사용 불가능 --> {{ true ? 100 : 0 }} <!-- O, 삼항 연산자로 표현 가능 --> <!-- 2. --> {{ message.split('').reverse().join('') }} <!-- X, 복잡한 연산은 인스턴스 안에서 수행 --> {{ reversedMessage }} <!-- O, 스크립트에서 computed 속성으로 계산 후 최종 값만 표현 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join(''); } } }); </script> </body> </html>3. 디렉티브(Directive)
뷰 디렉티브(Directive)란 HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미합니다. 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능입니다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브(Reactive)하게 반응하여 변경된 데이터 값에 따라 갱신됩니다.
디렉티브 이름 역할 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> 태그에만 사용할 수 있습니다. <html> <head> <title>Vue Template - Directives</title> </head> <body> <div id="app"> <a v-if="flag">두잇 Vue.js</a> <ul> <li v-for="system in systems">{{ system }}</li> </ul> <p v-show="flag">두잇 Vue.js</p> <h5 v-bind:id="uid">뷰 입문서</h5> <!-- clickBtn(10) 처럼 메서드 호출 시 인자 값을 넘길 수 있다. --> <button v-on:click="clickBtn">Click</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { flag: true, systems: ['android', 'ios', 'window'], uid: 10 }, methods: { // 인자를 전달하지 않아도 해당 돔 요소의 이벤트 객체 접근 가능 clickBtn: function(event) { console.log(event); } } }); </script> </body> </html>4. 고급 템플릿 기법
1) computed 속성
데이터 연산들을 정의하는 영역으로 data속성 값의 변화에 따라 자동으로 다시 연산한다는 점과 캐싱(연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작)의 장점을 가집니다.
<html> <head> <title>Vue Template - Javascript Expression</title> </head> <body> <div id="app"> {{ reversedMessage }} <p>{{ message }}</p> <button v-on:click="reverseMsg">문자열 역순</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join(''); } }, methods: { reverseMsg: function() { this.message = this.message.split('').reverse().join(''); return this.message; } } }); </script> </body> </html>> methods 속성은 호출할 때만 해당 로직 수행, computed 속성은 대상 데이터 값 변경 시 자동 수행
> methods 캐싱 X, computed 캐싱 O (복잡한 연산을 반복 수행해서 화면에 나타내야 한다면 computed 속성 사용)
2) watch 속성
watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행합니다. computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에 watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합합니다.
<html> <head> <title>Vue Template - Watch</title> </head> <body> <div id="app"> <input v-model="message"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, watch: { message: function(data) { console.log("message의 값이 바뀝니다 : ", data); } } }); </script> </body> </html>반응형'FrontEnd > Vue.js' 카테고리의 다른 글
09. 뷰 CLI(Command Line Interface) (0) 2021.09.11 08. 싱글 파일 컴포넌트 체계(Single File Components) (0) 2021.09.11 06. 액시오스(Axios) (0) 2021.09.11 05. 뷰 라우터(Router) (0) 2021.09.11 04. 뷰 컴포넌트(Component) (0) 2021.09.10