Vue 인스턴스

 

Vue 인스턴스

 

<script src="https://unpkg.com/vue@3.2.30/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<div id="root">
  <p>test</p>
  <input type="text" v-model="add_name" placeholder="name" />
  <button @click="add">add</button>
  <ul>
    <li v-for="(item, i) in list">
      {{ item.id }} : {{ item.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '#root',
  data() {
    return {
      list: [
        { id: 1, name: "test1" },
        { id: 2, name: "test2" }
      ],
      add_name: ""
    };
  },
  methods: {
    add() {
      if (this.add_name) {
        const newItem = {
          id: this.list.length + 1,
          name: this.add_name
        };
        this.list.push(newItem);
        this.add_name = "";
      }
    }
  }
});

---