programming/Vue

[Vue.js] #1 시작하기

euuuuuz: 2022. 3. 3. 11:32

빈 폴더에 index.html 새파일 추가

 

필수 핵심

1. vue 라이브러리 cdn

<script src="https://unpkg.com/vue"></script>

2. 정의한 app 마운트 위치 잡기

Vue.createApp(Counter).mount('#counter');

 

전체예시 코드

#index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Example 02</title>
  </head>
  <body>
    <div id="counter">
      <div>Counter : <span v-text="count"></span></div>
      <div>DoubleCounter : {{ count * 2 }}</div>
      <button v-on:click="increase">up</button>
      <button @click="decrease">down</button>
    </div>
  </body>
   <script src="https://unpkg.com/vue"></script>
    <script>
      const Counter = {
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          increase() {
            this.count++;
          },
          decrease() {
            this.count--;
          },
        },
      };
      Vue.createApp(Counter).mount('#counter');
    </script>
</html>

실행결과