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>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<section id="assignment">
<!-- 1) Output your name -->
<h2>{{ myname }}</h2>
<!-- 2) Output your age -->
<p>{{ myage }}</p>
<!-- 3) Output your age + 5 -->
<p>{{ myage + 5 }}</p>
<!-- 4) Output a random number (0 to 1) -->
<p>{{ randomNumber() }}</p>
<div>
<!-- 5) Display some image you found via Google -->
<img v-bind:src="imgUrl" width="300"/>
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" v-bind:value="myname"/>
<div>
<button @click="ageUp()">누르면 나이 5씩 증가</button>
</div>
</section>
</body>
</html>
JavaScript
const app = Vue.createApp({
data() {
return {
myname: "2DC",
myage: 29,
imgUrl: "https://cdn.pixabay.com/photo/2012/10/06/22/18/horse-60153_960_720.jpg"
}
},
methods: {
ageUp() {
this.myage += 5
},
randomNumber() {
return Math.random()
}
}
}).mount("#assignment")
