Template (템플릿)
템플릿 정의 🧐
- HTML, CSS 등의 마크업 속성과 Vue 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 (화면을 구체적으로 꾸미는 방법 & 문법)
데이터 바인딩 방법 ⛓
데이터 바인딩 : HTML 화면 요소를 Vue 인스턴스의 데이터와 연결
1. 콧수염 괄호 {{ data }}
- 기본적인 텍스트 삽입 방식
- 간단한 자바스크립트 표현식 사용 가능
( 선언문, 분기 구문 사용 불가 / 삼항 연산자 사용 가능 )
2. 디렉티브
디렉티브 : HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미, Vue 데이터 값을 연결할 때 사용하는 데이터 연결 방식
- v-if : Boolean 값에 따라 화면에 태그 표시 여부 결정 ( 생성을 제어 )
- v-for : 자바스크립트 for in 형태로 반복 출력, 반드시 :key 속성을 추가해주어야 함
- v-show : Boolean 값에 따라 화면에 태그 표시 여부 결정 ( 생성은 되지만 display로 제어 )
- v-bind : HTML 태그의 기본 속성과 Vue 데이터 속성(인스턴스의 값) 연결
- v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용
- v-model: form에서 주로 사용, form의 값을 Vue 데이터와 즉시 동기화
디렉티브 약어
// 1. v-bind 약어
<div v-bind:data="data">v-bind 약어</div>
<div :data="data">v-bind 약어</div>
// 2. v-on 약어
<button v-on:click="clickElem">v-on 약어</button>
<button @click="clickElem">v-on 약어</button>ref 속성 ⛓
- Vue.js에서 제공하는 속성으로 이 요소를 참고하겠다는 의미
- this.$refs.ref로 사용 가능
<div id="app">
<input type="text" ref="crtInp">
</div>
const vm = new Vue({
el: '#app',
mounted() {
this.$refs.crtInp.value = 'Vue.js로 선택하는 경우'
}
})Vue.js의 고급 템플릿 기법 🛠
1. computed
정의 / 특징
- data속성 처럼 사용 가능하며 주로 원본을 참조하여 계산된 데이터로 사용
- 함수 안에 반드시 어떤 특정한 값을 return 받아야 사용 가능
- 원본이 갱신되면 계산된 데이터도 자연스럽게 갱신될 수 있게 this안의 특정한 원본 데이터가 연결되어 있어야 함
- 원본 데이터로 가공하기 때문에 원본 데이터가 변경되면 가공된 데이터가 같이 갱신
→ 갱신된 데이터로 다시 랜더링
사용되는 곳
- v-for로 데이터를 루프돌 때 데이터에 고유한 key 값을 이용하지 못하는 경우
- data를 가공해서 사용해야 하는데 반응성이어야 하는 경우
캐싱
- method에서 복잡한 로직으로 여러번 반복하게 되는 경우, 시스템에 부하를 줄 수 있음
→ computed의 캐싱 기능으로 보완 가능
2. watch 속성
- 데이터가 바뀌는 시기가 정확하지 않을 때(비동기) 특정한 데이터를 감시하고 있다가 변경되는 순간 같이 가공되게 만들어주는 역할
- computed 데이터의 변경도 감지를 해서 무언가의 로직을 수행할 수 있음
- 데이터가 변경되는 상태를 감지하기 때문에 비동기 처리에 유리하게 동작
출처 📝
- Do it! Vue.js 입문 - 장기효
위의 내용은 Vue.js를 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌
FrontEnd Developer