Vue3 - Instance

목차

• Vue3 - Component 간 통신
• Vue3 - Component
• Vue3 - Composition API
• Vue3 - Instance
• Vue3 - Reactivity
• Vue3 - 시작하기

Vue 3 Instance 와 속성

Vue.createApp({
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

methods

<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>

Vue Directive

v-for

<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>