728x90
반응형
✔ 기본예제 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div class="app">
<div>{{ message }}</div>
<div>{{message1}}</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "안녕 Vue!",
message1: "안녕 Vue!!!!!"
};
},
}).mount(".app");
</script>
</body>
</html>mount(".app") 은 class app을 사용하여 메시지를 출력할 것이다
✔ 기본예제 1 결과
✔ 기본예제 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"><button @click="increase">숫자 세기: {{count}}</button></div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
count: 0,
};
},
methods: {
increase: function () {
this.count++;
},
},
}).mount("#app");
</script>
</body>
</html>button @ click ="increase" : 버튼을 클릭 시 increase 함수 발동하여 숫자 증가시키기
✔ 기본예제 2 결과
✔ 기본예제 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="reverseMessage">메시지뒤집기</button>
<button @click="message += '!'">"!" 추가하기</button>
<a href="https://vuejs.org" @click.prevent="notify"
>e.preventDefault()가 작동하는 링크</a
>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "안녕 Vue!",
};
},
methods: {
reverseMessage() {
this.message = this.message.split("").reverse().join("");
},
notify() {
alert(
"@click.prevent에서 기존기능인 e.preventDefault가 실행됨으로 탐색이 금지되었습니다!"
);
},
},
}).mount("#app");
</script>
</body>
</html>
✔ 기본예제 3 결과
반응형
'Frontend > Vue' 카테고리의 다른 글
| Vue 기본 예제2 (0) | 2023.03.02 |
|---|---|
| Vue 기본 (1) | 2023.02.25 |