用vue设计一个图书馆增删改查，用到var vm = new Vue

在Vue.js中设计一个图书馆管理系统，我们可以创建一个简单的Vue实例（vm），并利用组件化的方式来实现增删改查的功能。首先，我们假设有一个图书模型（Book）以及对应的视图和控制器。

1. 定义数据模型 (model)：

data() {
  return {
    books: [], // 初始书籍列表
    selectedBook: null, // 选中的书
  };
},

2. 创建增删改查操作函数 (methods):

methods: {
  addBook(book) {
    this.books.push(book);
  },
  deleteBook(id) {
    this.books.splice(id, 1);
  },
  updateBook(id, updatedBook) {
    this.books[id] = updatedBook;
  },
  selectBook(book) {
    this.selectedBook = book;
  }
}

3. 组件模板 (template)：

<template>
  <div id="library-app">
    <h2>图书列表</h2>
    <ul v-for="(book, index) in books" :key="index">
      <li @click="selectBook(book)">
        {{ book.title }} - {{ book.author }}
        <button @click="deleteBook(index)">删除</button>
      </li>
    </ul>

    <h3>选择的图书</h3>
    <span v-if="selectedBook">
      标题: {{ selectedBook.title }}，作者: {{ selectedBook.author }}
      <br />
      <button @click="updateBook(selectedBook.id, { title: '新标题', author: '新作者' })">修改</button>
    </span>
  </div>
</template>

4. 实例化Vue (instance creation)：

new Vue({
  el: '#library-app',
  data: this.data,
  methods: this.methods
})

在这个例子中，用户可以浏览、选择书籍进行编辑，点击删除按钮则从列表中移除。注意，在实际项目中，你可能需要连接到服务器API来获取和保存数据。