Vue를 이용한 DOM 상호작용
Vue를 HTML의 어느 부분에 적용할지를 정해서 해당 HTML 태그를 제어할 수 있습니다.
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p></p>
</section>
</body>위 코드에서 Section 요소 전체를 Vue로 컨트롤 해보겠습니다. (Vue로 HTML 태그를 제어할 경우, 해당 요소의 하위 요소도 컨트롤이 가능합니다)
const app = Vue.createApp();
app.mount('#user-goal');위 코드에서 Vue 앱을 변수에 선언해주고, 컨트롤 할 HTML 태그의 CSS 선택자인 id를 mount()의 인자로 넣어줍니다.
mount() 안에는 문자열이 들어가며 CSS 선택자를 넣으면 해당 HTML 태그와 연결된다는 의미입니다.
보간법 (Interpolation)
이제 Vue 기능을 이용해 Section 태그와 상호작용을 할 수 있는데, 그러려면 createApp()의 인자로 객체를 전달해야 합니다.
앱을 구성할 때 사용할 수 있는 객체로, 이 Vue앱의 여러 옵션을 구성할 수 있습니다.
구성의 핵심 옵션으로 데이터를 구성하는 data가 있으며 프로퍼티의 이름은 무조건 data여야 합니다.
이 data는 값으로 함수를 가지며, 이 함수는 항상 객체를 반환합니다.
여기서 반환하는 객체는 어떤값이든 키:값 쌍으로 설정할 수 있습니다.
즉, data에서 반환하는 객체의 어떤 프로퍼티든 Vue가 컨트롤하는 HTML 코드에서 사용할 수 있게 된겁니다.
const app = Vue.createApp({
data: function() {
return {
courseGoal: 'Finish the course and learn Vue!'
};
}
});
app.mount('#user-goal');Vue가 제어하는 HTML 코드에서 데이터를 출력하려면 HTML 코드 내 특수한 속성을 사용해야 합니다.
컨텐츠를 출력하고자 사용하는 구문은 {{ }} 중괄호 2개를 사용합니다.
이 중괄호 2개 사이에는 반환된 data 객체 프로퍼티를 참조할 수 있습니다.
반환된 data 객체 프로퍼티란 위 코드에서 courseGoal부분이라고 할 수 있습니다.
즉 텍스트가 JavaScript로 되어있고 이런 특수한 구문을 보간법이라고 합니다.
v-bind 디렉티브 속성 바인딩
위와 동일하게 data의 객체 프로퍼티를 통해 HTML의 a태그의 href 속성에 링크를 전달하고 싶습니다.
그래서 vueLink라는 객체 프로퍼티를 1개 더 설정하고 링크를 주었습니다.
const app = Vue.createApp({
data: function() {
return {
courseGoal: 'Finish the course and learn Vue!',
vueLink: 'https://vuejs.org/'
};
}
});이때 href="{{ }}" 이런식으로 사용하면 정상적인 바인딩이 안됩니다.
이럴때 <a v-bind:href=""> 처럼 특수한 구문을 써서 Vue에게 바인딩을 지시합니다.
v-bind:옆에는 바인딩 될 HTML 태그의 속성을 넣어주면 됩니다. 위에서처럼 v-bind:href 이렇게 말이죠.
그럼 이제 중괄호는 생략하고 <a v-bind:href="vueLink"를 지정해주면 정상적으로 추가적인 데이터가 바인딩됩니다.
<p>Learn More<a v-bind:href="vueLink">about Vue</a></p>'📘 Frontend > Vue' 카테고리의 다른 글
| Vue - Event Modifier (0) | 2023.07.27 |
|---|---|
| Vue - Native Event Object (0) | 2023.07.27 |
| Vue - Event Binding 이해하기 (0) | 2023.07.27 |
| Vue - Methods & v-html Directive (0) | 2023.07.27 |
| Vue - Basic (2) | 2023.07.26 |