1. <div id="app"> </div>
- index.html 파일에서 app 이라는 이름의 id를 가진 Vue 객체를 app.js 파일에서 정의해준다.
const app = new Vue.createApp({
- app.js 파일에서 정의된 객체 app 안에는 data() { 여기 안에 } 객체 app의 다양한 속성(properties)들을 담을 수 있다.
const app = Vue.createApp({
data() {
return {
title: 'The Final Empire',
author: 'Brandon Sanderson',
age: 45
}
}
})
- index.html 파일에서 속성변수들의 값을 가져와서 브라우저에 보여줄 때는 {{ 변수 이름 }} 형태로 소환하면 된다.
(단, <div id="app"> 태그 안에서만 소환 가능)
<div id="app">
<p>{{ title }} - {{ author }} - {{ age }}</p>
</div>
(1) index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Vue</title>
<script src="https://unpkg.com/vue@3.0.2"></script>
</head>
<body>
<h1>Hello, Vue :)</h1>
<div id="app">
<p>{{ title }} - {{ author }} - {{ age }}</p>
</div>
<script src="app.js"></script>
</body>
</html>(2) app.js
const app = Vue.createApp({
data() {
return {
title: 'The Final Empire',
author: 'Brandon Sanderson',
age: 45
}
}
})
app.mount('#app')
2. directive ; v-on
- directive : 버튼 등의 태그 안에 끼어 들어가서 동적으로 사용자의 동작에 따라 변화하는 요소를 만드는 것
- 형태: v-on: click ="age++" ( click시 age가 1씩 증가한다.)
※ 이때 " " 안에는 완전한 javaScript 언어로 작성한다. ( 따라서 변수도 {{ }} 필요없이 바로 age 이렇게 쓴다.)
- @ = v-on: (v-on:click="age++" = @click="age++")
- [ directive를 활용하여 객체 app의 함수 사용하기 ]
(1) app.js 파일의 const app 정의 부분에서 data() { ... }는 app의 속성을 정의하는 테두리였다.
app이 사용할 함수들을 정의하는 테두리는 methods: { ... }이다. 객체 app만의 함수를 {...}안에 정의한다.
이때 함수를 정의할 때 사용하는 app 객체의 속성 변수명은 this.변수명 으로 사용해야한다.
<app.js ↓>
const app = Vue.createApp({
data() {
return {
title: 'The Final Empire',
author: 'Brandon Sanderson',
age: 45
}
},
methods: {
changeTitle() {
this.title = 'Words of Randiance'
}
}
})
app.mount('#app')(2) index.html 에서 app.js의 methods에서 정의한 app 객체의 함수를 사용하는 방법은 다음과 같다.
<div @click=" 함수이름 or 함수이름(투입값) ">Change book title(클릭할 텍스트)</div>
- 이것도 app 객체의 함수를 불러오는 것이므로 속성때와 마찬가지로 <div id="app"> </div> 태그 안에 있어야 한다.
- 만약 투입값(argument)을 가져오는 함수를 정의할 경우는 다음과 같다.
[ app.js ]
methods: {
changeTitle(title) {
this.title = title
}
[ index.html ]
<div @click="changeTitle(Happy)">Change book title</div>
: Change book title 텍스트를 클릭하면 app의 원래 title변수의 값이 Happy로 변경됨.
'Front-End > Vue.js' 카테고리의 다른 글
| [2021-09-05] 12~27강 (0) | 2021.09.07 |
|---|---|
| [2021-09-02] 10 ~ 11강 (0) | 2021.09.03 |
