{{ counter }} 인식이 안되는 문제
366
작성한 질문수 3
섹션1) Vue란 무엇인가? 에서 예시로 써주신 코드입니다.
1. vue3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello Vue3</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="counter">
<button type="button" v-on:click="counter++">
Counter: {{ counter }}
</button>
</div>
<script>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>https://www.gymcoding.co/eb73a52b-f54a-48da-a4ab-b22b7f499a1c
강의 교안에 있는 코드를 그대로 복사했는데
{{ counter }} 로 나오는데 무엇이 문제일까요??..
2. javascript.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<button type="button" onClick="increment()">Counter: <span id="counter"></span></button>
<script>
let counter = 100;
function increment() {
counter++;
printCounter();
}
function printCounter() {
let $span = document.querySelector("#counter");
$span.textContext = counter;
}
printCounter();
</script>
</body>
</html>강의 6:52초에 나오는 코드를 그대로 따라 쳤는데,
여기도 Counter 숫자가 안나옵니다..ㅠ
답변 1
0
안녕하세요 🙂
Vue에서 CDN 주소가 변경이 되어 발생한 문제입니다.
개발자 도구를 보면
Uncaught ReferenceError: Vue is not defined
위와 같이 Vue가 정의되지 않았다는 에러를 확인할 수 있고요
아래 코드를
<script src="https://unpkg.com/vue@next"></script>아래와 같이 변경해 주시면 됩니다.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
해당 사항을 강의에 공유하도록 하겠습니다.
감사합니다 🙂
npm init vue@3.1.9
0
43
2
크롭 웹스토어 vue devtools 설치 관련
0
43
1
snippets 작성하는 부분 설명이 있었나요?
0
50
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
57
2
소스 공유 어디서 해야하는지 궁금합니다
0
62
2
component 등록과 사용
0
59
2
강의교안
0
58
2
eslint 룰 관련 질문이 있습니다.
0
66
2
npm init -y 명령어 실행에 관한 질문
1
156
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
1
169
2
깊은 감시자 질문
0
89
2
정리된 내용
0
157
2
화면이 왜 이렇게 뜨는걸까요?
0
187
2
왜 다르게 뜰까요..?ㅠㅠ
0
158
2
npm init vue , npm create vue@latest 명령 오류
0
295
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
141
2
watch강의 질문
0
153
1
강의 듣다가 질문드립니다.
0
122
1
이벤트 처리 부분 강의 실습
0
141
2
v-pre는 설명이 없나요?
0
154
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
147
1
개발자도구 Vue 탭 관련 문의
0
240
2
강의를 인텔리제이로 수업따라가도 되져?
0
178
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
282
2