Uncaught SyntaxError: Invalid shorthand property initializer 에러

개발/Vue.js 2020. 12. 11. 15:39

데이터를 선언할 때, 객체인데 자꾸 선언을 잘못하여 발생한다.

 

 

  data() {

   

    return {  

      enteredGoalValue='', 

      goals: [] 

    };

  },

 

키 : 값

키 : 값

 

이렇게 콜론으로 적어야하는데, 자꾸 = 으로 적어서 에러가 발생하는 중이다. 적응하기 어렵다.

 

data() {

   

    return {  

      enteredGoalValue : '', 

      goals: [] 

    };

  },

 

으로 변경하면 에러가 없어지게 된다.

'개발 > Vue.js' 카테고리의 다른 글

[Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기  (0) 2020.12.09
[Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링  (0) 2020.12.08
Posted by sungho88
,

[Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기

개발/Vue.js 2020. 12. 9. 10:16

기능

 

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
Posted by sungho88
,

[Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링

개발/Vue.js 2020. 12. 8. 00:40

HTML에 Vue를 연결하기....가장 기초부터... 

 

1. index.html을 하나 만든 뒤, 아래 코드를 붙여넣는다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
  {{ message }}
</div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

이렇게 하고 실행하면 어떻게 될까?

 

결과 : {{message}}

 

어떻게 Vue를 연결시킬까? 이것은 .js파일에서 해줘야한다.

 

<script src="./app.js"></script>  를 </body>위에 추가해준다.

 

그 다음에...

 

2. app.js를 생성한다.

 

var app = new Vue({

  el: "#app",

  data: {

    message: "안녕하세요!",

  },

});

 

를 입력하고, index.html을 다시 확인해보자.

 

{{message}}가 아니라, 안녕하세요! 로 바뀐 것을 볼 수 있다.

 

이것이 Vue를 연결시킨 것이다!

 

이제 데이터와 DOM이 연결되었으며 반응형이 되었다.

즉, 수정하면 변경된 그 부분만 바로바로 업데이트되어 고쳐지는 것을 의미한다.

 

'개발 > Vue.js' 카테고리의 다른 글

Uncaught SyntaxError: Invalid shorthand property initializer 에러  (0) 2020.12.11
[Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기  (0) 2020.12.09
Posted by sungho88
,

티스토리툴바