index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="Vite + Vue" />
</template>
HelloWorld.vue
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
vue.js 예제
예제 - 버튼 이름 바꾸기
ref와 reactive 차이 참고
<script setup>
import { ref } from 'vue'
import { reactive } from "vue";
// 방법 1
const greeting = ref("Good Morning");
function click(){
if(greeting.value === "Good Morning"){
greeting.value = "Good Evening";
} else {
greeting.value = "Good Morning";
}
}
// 방법 2
const data = reactive({
msg : "Good Morning",
});
function myclick(){
data.msg = "Good Evening";
}
</script>
<template>
<h3>{{ greeting }}</h3>
<button type="button" @click=click>Change</button>
<h3>{{data.msg}}</h3>
<button type="button" @click=myclick>Change</button>
</template>
예제 - 로또 생성
<script setup>
import { ref } from 'vue'
const arr = [1,2,3,4,5, 6,7,8,9,10,
11,12,13,14,15, 16,17,18,19,20,
21,22,23,24,25, 26,27,28,29,30,
31,32,33,34,35, 36,37,38,39,40,
41,42,43,44,45];
const num1 = ref("__");
const num2 = ref("__");
const num3 = ref("__");
const num4 = ref("__");
const num5 = ref("__");
const num6 = ref("__");
const lotto = () => {
for(var i=0; i<100; i++){
var rand = parseInt(""+Math.random()*45);
// var rand = Math.floor(""+Math.random()*45);
var tem = arr[0];
arr[0] = arr[rand];
arr[rand]=tem;
}
var lottoArr = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
lottoArr.sort((a,b) => a-b);
num1.value = ""+lottoArr[0];
num2.value = ""+lottoArr[1];
num3.value = ""+lottoArr[2];
num4.value = ""+lottoArr[3];
num5.value = ""+lottoArr[4];
num6.value = ""+lottoArr[5];
}
</script>
<template>
<table border="1">
<tr>
<td>{{num1}}</td>
<td>{{num2}}</td>
<td>{{num3}}</td>
<td>{{num4}}</td>
<td>{{num5}}</td>
<td>{{num6}}</td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="로또생성하기" @click=lotto>
</td>
</tr>
</table>
</template>
예제 - 구구단
<script setup>
import {reactive} from 'vue'
const data = reactive({
txt : "__"
})
function myclick(){
let dan = parseInt(document.querySelector('#it').value);
data.txt = "";
for(var i=1; i<=9; i++){
data.txt += dan + " * " + i + " = " + dan*i +"<br>";
}
}
</script>
<template>
<table border="1" id="app">
<tr>
<th>출력 단수</th>
<td>
<input type="text" id="it"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" @click="myclick" value="구구단"/>
</td>
</tr>
<tr>
<td colspan="2">
<div v-html="data.txt">
</div>
</td>
</tr>
</table>
</template>
예제 - 가위바위보
<script setup>
import {reactive} from 'vue'
const data = reactive({
com : "__",
result : "__",
mine : "가위"
})
const arr = ["가위", "바위", "보"];
function game(){
var rnd = parseInt(""+Math.random()*3);
data.com = arr[rnd];
if (data.mine==data.com){
data.result = "비김"
} else if((data.mine=="가위" && data.com=="보") || (data.mine=="바위" && data.com=="가위") || (data.mine=="보" && data.com=="바위")){
data.result = "이김"
} else {
data.result = "짐"
}
}
</script>
<template>
<table border="1">
<tr>
<td>나</td>
<td>
<select v-model="data.mine">
<option value="가위">가위</option>
<option value="바위">바위</option>
<option value="보">보</option>
</select>
</td>
</tr>
<tr>
<td>컴퓨터</td>
<td>
<input type="text" v-model="data.com" />
</td>
</tr>
<tr>
<td>결과</td>
<td>
<input type="text" v-model="data.result" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="게임시작" @click="game">
</td>
</tr>
</table>
</template>
예제 - 전화기
<script setup>
import {reactive} from 'vue'
const data = reactive({
telnum : ""
})
function call(){
alert(data.telnum+"으로 전화거는 중...");
}
const click = (event) => { // 화살표함수는 this불가능
var num = event.target.value;
data.telnum += num;
}
</script>
<style>
table{
text-align: center;
}
#it{
width: 100px;
}
</style>
<template>
<table border="1">
<tr>
<td colspan="3">
<input type="text" v-model="data.telnum"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="btn" @click="click">
</td>
<td>
<input type="button" value="2" class="btn" @click="click">
</td>
<td>
<input type="button" value="3" class="btn" @click="click">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="btn" @click="click">
</td>
<td>
<input type="button" value="5" class="btn" @click="click">
</td>
<td>
<input type="button" value="6" class="btn" @click="click">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" class="btn" @click="click">
</td>
<td>
<input type="button" value="8" class="btn" @click="click">
</td>
<td>
<input type="button" value="9" class="btn" @click="click">
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="btn" @click="click">
</td>
<td colspan="2">
<input type="button" value="☎" @click="call">
</td>
</tr>
</table>
</template>
예제 - 숫자맞추기 (Up & Down)
<script setup>
import {reactive, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted} from 'vue'
const data = reactive({
num : "",
result : "",
correct : 0,
cnt : 0
})
onMounted(()=>{
com();
})
onBeforeMount(() => {
console.log(onBeforeMount);
})
onBeforeUnmount(() => {
console.log(onBeforeUnmount);
})
onUnmounted(() => {
console.log(onUnmounted);
})
function com(){
data.correct = parseInt(""+Math.random()*99)+1
}
function updown(){
if(data.num==""){
data.num = "0";
}
let inum = parseInt(data.num);
if(inum>=100 || inum<=0) {
alert("1~99 숫자 사이를 입력해주세요");
data.num = "";
return;
}
if(inum==data.correct){
data.result += data.num + " 정답입니다 \n";
++data.cnt;
alert(data.num + " 정답입니다. \n"+data.cnt+"회차에 맞추셨습니다");
} else if(inum>data.correct){
data.result += data.num + " DOWN \n";
++data.cnt;
} else if(inum<data.correct) {
data.result += data.num + " UP \n"
++data.cnt;
} else {
alert("잘못된 입력입니다");
}
data.num = "";
}
</script>
<template>
<table border="1">
<tr>
<th>맞출 수</th>
<td>
<input type="text" v-model="data.num" placeholder="1~99"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="맞춰보기" @click="updown">
</td>
</tr>
<tr>
<td colspan="2">
<textarea v-model="data.result" rows="20"/>
</td>
</tr>
</table>
</template>
<style>
input[type="text"]{
width: 70px;
}
</style>
