학습결과
- interpolation(보간법)은 태그 내부의 텍스트 노드를 채워넣을 때 쓸 수 있다.
ex) <h1> {{ vuedata }} </h1>
- v-bind는 태그의 어트리뷰트에 데이터를 바인딩 시켜줄 때 사용할 수 있다.
ex) <a v-bind:href="vuedata"> 주소를 눌러요 </a>
VUE 내부동작 추론
- 최상단에 vue가 cdn으로 설치가 되어있기 때문에 vue 문법을 사용할 수 있게 된다.
- vue는 html 상단에서 vue cdn과 app.js를 defer로 미리 다운로드한 뒤 HTML 파싱이 끝날때까지 대기한다.
(defer 키워드로 인해 js코드 다운로드와 html 파싱이 동시에 이루어지나, js의 실행은 html 파싱이 전부 이뤄진 뒤 실행된다. 따라서 vue의 내부 동작은 js가 dom을 변경함으로써 이뤄질 것이다.)
- HTML 파싱이 끝난 뒤,
vue는 html 코드소스를 읽어가며 {{ }} (mustatch 문법)을 캐치하여 인스턴스에 맞는 데이터를 바인딩 시켜준다.
- 이 때 태그의 텍스트 노드 부분은 {{ }} 문법으로 데이터를 바인딩하는게 가능하지만,
태그의 어트리뷰트 부분은 {{ }} 문법 사용이 불가능하다.
- 이를 원활하게 해주는 것이 v-bind:Attribute 문법이고, 어트리뷰트에 변수를 넣는 방법이라고 간단하게만 인식해도 사용에 큰 무리는 없을 것이다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header id="user-header">
<h1>Vue Course Goals</h1>
<p>{{ headerText }}</p>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{ courseGoal }}</p>
<p>Learn more <a v-bind:href="vueLink">about Vue</a></p>
</section>
</body>
</html>
- v-bind의 쉬운 사용 방법이다.
- 먼저 그냥 href="vueLink"와 같이 입력해준다
- 이 후, 뒤에 접두사로 v-bind:를 붙여준다.
- v-bind:href="vueLink" ...
JavaScript
const header = Vue.createApp({
data() {
return {
headerText: "헤더 인스턴스의 텍스트입니다."
}
}
}).mount('#user-header')
const app = Vue.createApp({
data() {
return {
courseGoal: '뷰 열심히 공부하기',
vueLink: "https://vuejs.org/"
}
}
}).mount('#user-goal')
- vue 인스턴스를 여러개 만들어서 여러개의 HTML 태그에 접목시켜보았다.
- 당연하겠지만, 된다.
