선언적 렌더링
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>- 문자열 템플릿을 렌더링하는 것과 유사하지만, Vue.js 내부에서는 더 많은 작업을 하고 있음
- 데이터와 DOM이 연결되었으며 모든 것이 반응형이 되었음
- 콘솔창을 열고 app.message를 다른 값으로 설정하면 업데이트 된 값에 따라 변경되는 것을 확인 할 수 있음
- 더 이상 HTML과 직접 상호작용할 필요 없이 Vue 앱은 단일 DOM 요소(예시의 경우 #app)에 연결되어 DOM 요소를 완전히 제어함
- HTML은 엔트리 포인트 일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생함
디렉티브(directives)
// HTML
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
//JS
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
- v-bind 속성을 디렉티브라고 함
- 'v-' 접두사는 Vue에서 제공하는 특수 속성임 나타냄
- 렌더링된 DOM에 특수한 반응형 동작을 함
- 위의 예시는 기본적으로 해당 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지함
'Vue' 카테고리의 다른 글
| [시작하기] 사용자 입력 핸들링 (0) | 2023.05.25 |
|---|---|
| [시작하기] 조건문과 반복문 (0) | 2023.05.25 |
| 프로젝트 생성하기 (0) | 2023.05.22 |
| What is Vue.js? (0) | 2023.05.22 |
| Vue Practice (0) | 2023.04.29 |