Vue Instance , methods

Vue2 에서는 뷰 인스턴스로 부르는 것을

 

Vue3 에서는 뷰 어플리케이션 인스턴스로 바뀌었다. 같은 것을 의미한다.

 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  {{message}}
</div>

<script>

  //Vue2
  new Vue({
    el: '#app'
  })

  new Vue({

  }).$mount('#app')

  //Vue3
  Vue.createApp({
    data() {
      return {
        message : 'hi'
      }
    }
  }).mount('#app');
</script>

 

첫 인스턴스를 생성할 때 기존의 new 인스턴스가 아닌 Vue.createApp인 api를 호출하는 방식으로 바뀌었음

 

method

//Vue2
new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
 
//Vue3
Vue.createApp({
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

el, template 등의 인스턴스 에서 사용하는 속성과 api는

컴포넌트 옵션 속성, 인스턴스 옵션, 옵션 API 등으로 부르며 모두 같은 말이다.

 

<div id="app">
    <p>
        {{count}}
    </p>
    <button v-on:click="addCount">+</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                count: 0
            }
        },
        methods: {
            addCount() {
                this.count++;
            },
        }
    }).mount('#app');
</script>

간단히 코딩해보자면 이렇다

 

1) data()는 사실 data : function() {} 이런 형태이다. 줄여준 것이고, 그안에 return 하는 객체에 속성:값을 넣어준다.

2) data 안의 값은 vue의 reactivity로 인해 get set 이벤트가 발생하면 값이 교체된다.

3) methods 속성으로 안에 함수를 정의할 수 있고 사용할 수 있다.

4) button에 속성으로 v-on:click에 methods에 정의한 함수를 넣으면 사용할 수 있다.

 

v-if, v-else, v-for, v-bind 등의 문법도 있다. 디렉티브라고 한다.

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                items:['삼성', '네이버', '인프런']
            }
        }
    }).mount('#app');
</script>

 

for문은 v-for로 사용할 수 있다.