고정 헤더 영역
상세 컨텐츠
본문
뷰의 템플릿 문법
- 뷰로 화면을 조작하는 방법으로 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩
- 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법
- 가장 기본적은 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) 이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue.js!!!'
}
})
</script>
</body>
</html>✔ div 태그에 Mustache Tag를 이용해 뷰 인스턴스의 message 속성을 연결!
출력결과
디렉티브
- 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법으로화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공
- html 태그 안에 v-접두사를 가지는 모든 속성들을 의미
기본 디렉티브
1. v-text
: innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자 그대로 보여줌
e.g. <p v-text="desc"></p>
2. v-html
: innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현함
e.g. <p v-html="desc"></p>
❗ XSS(Cross Site Scripting) 공격에 주의
3. v-bind
: 태그와 태그 사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함
e.g. <img v-bind:src="imgPath" />
4. v-model
: 양방향 데이터를 공유할 때 사용함
e.g. <input type="text" v-model="name" /> <p v-text="name"></p>
5. v-show
: css의 display와 동일한 기능
e.g. <img v-bind:src="imgPath" v-show="true"/>
6. v-if
: if 조건문을 구현함
7. v-else
: else 조건문을 구현함
8. v-else-if
: else if 조건문을 구현함
9. v-for
: for 반복문을 구현함
e.g. <tr v-for="image in images"> ... </tr>
10. v-pre
: vue.js가 컴파일하지 않게함.
✔ {{ }}도 그대로 보여짐
e.g. <p v-pre>{{ name }}</p>
11. v-once
: vue.js가 처음 한 번만 렌더링을 수행함. 데이터가 변경되도 처음 값만 보여줌
12. v-cloak
: vuejs에서 렌더링이 완료되기 이전에, 브라우저에서 보이지 않도록 감춰주는 역할을 함.
✔ cf) vue.js의 렌더 flow
1) 브라우저 페이지 소스 로드
2) vue.js 프레임워크 실행
3) vue.js 처리 완료
❗ vue.js가 처리되는 3번 이전의 단계에서는 {{ }}같은 콧수염 표현식이나 v-if 등을 통하여 조건부 렌더링을 걸어놓았더라도 화면에 그대로 노출이 되어버린다!
→ vue.js에서 렌더링이 되기 전까지 아주 잠깐 보여지는 것을 막고자 사용하는 것이 v-cloak이다.
'Programming > Vue.js' 카테고리의 다른 글
| Nuxt.js 시작하기 - 설치, 프로젝트 생성(Vuetify) (0) | 2022.03.08 |
|---|---|
| Vue.js 시작하기 - Components Communication (0) | 2022.03.07 |
| Vue.js 시작하기 - Components (0) | 2022.03.07 |
| Vue.js 시작하기 - Instance (0) | 2022.03.07 |
| Vue.js 시작하기 - Reactivity (0) | 2022.03.07 |
댓글 영역