뷰의 템플릿 문법
- 뷰로 화면을 조작하는 방법으로 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩
- 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법
- 가장 기본적은 데이터 바인딩 방식은 콧수염 괄호(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-접두사를 가지는 모든 속성들을 의미
기본 디렉티브
- v-text : innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자 그대로 보여줌
e.g.<p v-text="desc"></p> - v-html : innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현함
e.g.<p v-html="desc"></p>
❗ XSS(Cross Site Scripting) 공격에 주의
3.v-bind : 태그와 태그 사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함
e.g.<img v-bind:src="imgPath" /> - v-model : 양방향 데이터를 공유할 때 사용함
e.g.<input type="text" v-model="name" /> <p v-text="name"></p> - v-show : css의
display와 동일한 기능
e.g.<img v-bind:src="imgPath" v-show="true"/> - v-if : if 조건문을 구현함
- v-else : else 조건문을 구현함
- v-else-if : else if 조건문을 구현함
- v-for : for 반복문을 구현함
e.g.<tr v-for="image in images"> ... </tr> - v-pre : vue.js가 컴파일하지 않게함.
✔{{ }}도 그대로 보여짐
e.g.<p v-pre>{{ name }}</p> - v-once : vue.js가 처음 한 번만 렌더링을 수행함. 데이터가 변경되도 처음 값만 보여줌
- v-cloak : vuejs에서 렌더링이 완료되기 이전에, 브라우저에서 보이지 않도록 감춰주는 역할을 함.
✔ cf) vue.js의 렌더 flow
1) 브라우저 페이지 소스 로드
2) vue.js 프레임워크 실행
3) vue.js 처리 완료
❗ vue.js가 처리되는 3번 이전의 단계에서는 {{ }}같은 콧수염 표현식이나 v-if 등을 통하여 조건부 렌더링을 걸어놓았더라도 화면에 그대로 노출이 되어버린다!
> vue.js에서 렌더링이 되기 전까지 아주 잠깐 보여지는 것을 막고자 사용하는 것이 v-cloak이다.
개발하는 겨리