Vue가 제어하는 HTML코드에서 데이터를 출력하려면, 해당 영역에서만 사용 가능한 특수 구문이 존재.
Vue앱은 보이지 않는 곳에서 해당 HTML 코드를 스캔해서 지원되는 기능과 구문을 감지한다.
데이터를 출력하고자 하는 구문은 열고닫는 중괄호를 두개씩 적어야 한다. → {{ }}
기본 HTML 코드에서는 이런 구문을 사용해도 변화가 없다. 그냥 화면에 {{ }} 이렇게 출력되기만 한다.
Vue가 제어하는 HTML코드에서 {{ }} 구문을 사용하면 특별한 동작이 실행된다.
{{ }} 사이에는 반환된 data의 객체 프로퍼티를 참조할 수 있다.
index.html
<!DOCTYPE html>
<html lang="en">
<!--head 생략-->
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{ courseGoal }}</p> <!--반환된 data의 객체 프로퍼티 참조가능. Vue가 courseGoal에 저장된 값을 출력해야한다는걸 인식하고 실행.-->
</section>
</body>
</html>
app.js
const app = Vue.createApp({
data(){
return {
courseGoal: "Finish the course and learn Vue!" //{{}}구문을 이용하여 값 출력가능
}
},
methods: {
}
});
app.mount('#user-goal')
이런걸 '보간법(interpolation)'이라고 한다.
- {{ }} 안에 data에서 반환하는 객체의 일부인 프로퍼티를 참조하여 해당 프로퍼티의 값이 출력되도록 하는 방법.
- 보간법을 사용하면 Vue가 자동으로 값을 감지하고 해당 값을 출력한다.
- Vue가 제어하지 않는 다른 영역, 예를 들면 header에 보간법을 사용하면, 해당구문 자체가 텍스트로 출력된다. ex: {{ courseGoal }} 이렇게. 왜냐하면 보간법은 Vue만의 기능이기 때문!
** data에 반환되는 객체의 프로퍼티 값은 text 외에도 array, number, boolean, object 등 다 된다. 굉장히 flexible하다.
보간법은 Vue의 핵심 기능 중 하나!
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section2] 17. Vue앱의 '메서드' 이해하기 (0) | 2023.06.26 |
|---|---|
| [Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기 (0) | 2023.06.26 |
| [Udemy Vue 완벽가이드 Section2] 14. Vue앱 인스턴스 생성 및 연결하기 (0) | 2023.06.25 |
| [Udemy Vue 완벽가이드 Section1] 8. Vue vs 순수 JS (0) | 2023.06.23 |
| [Udemy Vue 완벽가이드 Section1] 7. Vue로 앱 재구축하기 (0) | 2023.06.23 |