前置条件

安装Visual Studio Code（代码编辑器）
电脑已安装node.js
配置好vue相关文件

开始构建

电脑任意位置新建文件夹命名为”Vue-图书管理”
新建文件index.html 并创建基本html结构

因为是局部使用vue ，需要cdn方式引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

开始 new vue实例并赋值为vm，在其内部构建

<script>
    const vm = new Vue({
      el:'#app', //获取vue的边界element元素 即展示的区域
      data:{

      },
      methods:{
                
      }
    })
</script>

将data里放入图书的数组数据

data:{
    books: [
        {
            id: 1,
            name: "三国演义",
            price: "12",
        },
        {
            id: 2,
            name: "水浒传",
            price: "20",
        },
        {
            id: 3,
            name: "红楼梦",
            price: "20512",
        },
        {
            id: 4,
            name: "西游记",
            price: "212",
        },
    ],
},

布局基本html样式

<h2>图书管理</h2>
<div id="app">
    <div >
        编号：<input type="text" v-model="obj.id">
        名称：<input type="text" v-model="obj.name"> 
        价格：<input type="text" v-model="obj.price">
        <button type="submit" @click="submit">提交</button>
    </div>
    <p>图书总数: {{num}}</p>
    <table border="1" cellspacing='0' width="300px">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in books" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <a href="">编辑</a> |
                <a href="">删除</a>
            </td>
        </tr>
    </table>
</div>

增加添加图书功能

<script>
      const vm = new Vue({
          el:'#app', //获取vue的边界element元素 即展示的区域
          data:{
              obj:{
                  id:'',
                  name:'',
                  price:'',
              },
              newobj:'',
              num:'',
              books: [
                  {
                      id: 1,
                      name: "三国演义",
                      price: "12",
                  },
                  {
                      id: 2,
                      name: "水浒传",
                      price: "20",
                  },
                  {
                      id: 3,
                      name: "红楼梦",
                      price: "21",
                  },
                  {
                      id: 4,
                      name: "西游记",
                      price: "22",
                  },
              ],
          },
          methods:{
              submit(){
                  // 1.获取用户输入的信息 并保存到data里的obj里
                  this.newobj = this.o    

                  // 2. 追加数组 将obj对象推入data中 books里
                  this.books.push(this.newob    

                  // 3. 清空输入框的信息
                  this.obj = {
                      id:'',
                      name:'',
                      price:'',
                  }
              },
          }
      })
</script>

编辑图书功能

<body>
    <h2>图书管理</h2>
    <div id="app">
        <div >
            编号：<input type="text" v-model="obj.id" :disabled="isDisabled">
            名称：<input type="text" v-model="obj.name"> 
            价格：<input type="text" v-model="obj.price">
            <button type="submit" @click="submit" :disabled="noSubmit">提交</button>
        </div>
        <p>图书总数: {{num}}</p>
        <table border="1" cellspacing='0' width="300px">
            <tr>
                <th>编号</th> 
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in books" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <a href="##" @click.prevent="editor(index)">编辑</a> |
                    <a href="##">删除</a>
                </td>
            </tr>
        </table>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    
    <script>
        Vue.config.productionTip= false;
        const vm = new Vue({
            el:'#app', //获取vue的边界element元素 即展示的区域
            data:{
                noSubmit:false, //禁止提交按钮的状态
                isDisabled:false, //默认可以点击
                indexData:'', //存储index标识
                obj:{
                    id:'',
                    name:'',
                    price:'',
                },
                newobj:'',
                num:'2',
                books: [
                    {
                        id: 1,
                        name: "三国演义",
                        price: "12",
                    },
                    {
                        id: 2,
                        name: "水浒传",
                        price: "20",
                    },
                    {
                        id: 3,
                        name: "红楼梦",
                        price: "21",
                    },
                    {
                        id: 4,
                        name: "西游记",
                        price: "22",
                    },
                ],
            },
            methods:{
                // 提交按钮
                submit(){
                    // 判断是否是提交新数据还是修改旧数据
                    if(this.isDisabled) {

                        //编辑功能:
                        // 方法 1： 获取index 找操作的行元素 修改它
                        // console.log('编辑');
                        // console.log('编辑的当前行',this.books[this.indexData]);
                        // this.books[this.indexData].name = this.obj.name
                        // this.books[this.indexData].price = this.obj.price
                        
                        // 方法 2： 找id  获取编辑的id == books里面的id
                        // 使用方法 some 查找原数组里是否有某元素 如果有返回true
                        // ele 可以获取books数组的每一项
                        this.books.some( (ele) => {
                           if( ele.id == this.obj.id){ //这个ele就是编辑的数据
                            ele.name = this.obj.name
                            ele.price = this.obj.price
                            return true
                           }
                        })

                        // 释放禁止按钮
                        this.isDisabled = false;
                    }else { //添加功能
                        // 1.获取用户输入的信息 并保存到data里的obj里
                        this.newobj = this.obj
    
                        // 2. 追加数组 将obj对象推入data中 books里
                        this.books.push(this.newobj)
    

                    }
                    // 3. 清空输入框的信息
                    this.obj = {
                        id:'',
                        name:'',
                        price:'',
                    }
                },
                // 编辑按钮
                editor(index){
                    //1 获取当前行的数据  渲染到文本框中
                    console.log(this.books[index]);
                    // this.obj.id = this.books[index].id
                    // this.obj.name = this.books[index].name
                    // this.obj.price = this.books[index].price
                    this.obj = this.books[index]

                    // 2. 编辑的时候--编号禁止操作
                    this.isDisabled = true;

                    // 3. 存储index下标---目的：提交的时候 修改的是哪个数据用
                    this.indexData = index;

                }
            },
            //侦听器
            watch:{
               "obj.name":function(val){
                    console.log('监听了数据变化',val);
                    var flag = this.books.some(ele => {
                        return ele.name == val
                    })
                    if(flag) {
                        this.noSubmit = true
                        alert('已经存在相同名称书籍')
                    } else {
                        this.noSubmit = false
                    }   
                    
                }
            }
        })
    </script>