사과는 별로 안좋아하지만..
사과파이 성공적
'취미 > 제과제빵 준비과정' 카테고리의 다른 글
| [첫 실패] 오븐에 지나치게 오래 구운 초코머핀의 참혹한 현장 (0) | 2020.12.19 |
|---|---|
| 슈크림 만들어먹기 (0) | 2020.12.19 |
| 제과기능사 D+13) 초코머핀 만들기 (0) | 2020.11.09 |
| 제과기능사 D+12) 쇼트브레드 빵 만들기 (0) | 2020.11.05 |
| 제과기능사 D+11) 브라우니 만들기 (0) | 2020.11.04 |
데이터를 선언할 때, 객체인데 자꾸 선언을 잘못하여 발생한다.
data() {
return {
enteredGoalValue='',
goals: []
};
},
키 : 값
키 : 값
이렇게 콜론으로 적어야하는데, 자꾸 = 으로 적어서 에러가 발생하는 중이다. 적응하기 어렵다.
data() {
return {
enteredGoalValue : '',
goals: []
};
},
으로 변경하면 에러가 없어지게 된다.
'개발 > Vue.js' 카테고리의 다른 글
| [Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기 (0) | 2020.12.09 |
|---|---|
| [Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링 (0) | 2020.12.08 |
기능
1. 1~9까지의 숫자 중, 임의의 숫자를 2개 불러온다.
2. 입력창(Input)에 정답을 입력하면 정답/오답을 판독하여 알려준다.
3. 자동으로 다음 문제로 이동한다.
이 것은 HTML에서 Vue 인스턴스의 데이터를 사용하는 방법과 메소드를 호출하는 방법을 익히는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이것은 테스트</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{first}} 곱하기 {{second}}는 얼마입니까?</h1>
<input type="number" v-model="value" />
<button @click="checkResult">제출</button>
<h2>{{result}}</h2>
</div>
<script>
const app = new Vue({
el: "#root",
data: {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: "",
result: "",
},
methods: {
checkResult() {
if (this.first * this.second === parseInt(this.value)) {
this.result = "정답입니다! 다음 문제 갑니다";
this.value = "";
setTimeout(() => {
this.first = Math.ceil(Math.random() * 9);
this.second = Math.ceil(Math.random() * 9);
this.result = "";
}, 2000);
} else {
this.result = "틀렸습니다. 다시 입력하세요.";
this.value = "";
}
},
},
});
</script>
</body>
</html>
'개발 > Vue.js' 카테고리의 다른 글
| Uncaught SyntaxError: Invalid shorthand property initializer 에러 (0) | 2020.12.11 |
|---|---|
| [Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링 (0) | 2020.12.08 |
