Vue图书管理系统案例

1. 变异方法(修改原有数据)

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

2. 替换数组（生成新的数组）

filter()

concat()

slice()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
    </head>
    <body>
        <div id="app">
            <div>
                <span>
                    <input type="text" v-model="fname">
                    <button type="button" @click="add">添加</button>
                    <button type="button" @click="del">删除</button>
                    <button type="button" @click="change">替换</button>
                </span>
            </div>
            <ul>
                <li :key='index' v-for="(item,index) in list">{{item}}</li>
            </ul>
        </div>
        
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    list:['apple','orange','banana'],
                    fname:'',
                },
                methods:{
                    add:function(){
                        this.list.push(this.fname)
                    },
                    del:function(){
                        this.list.pop();
                    },
                    change:function(){
                        this.list=this.list.slice(0,2);
                    }
                }
            })
        </script>
    </body>
</html>

3. 修改响应式数据

Vue.set(vm.items,indexOfItem,newValue)
vm.$set(vm.items,indexOfItem,newValue)

参数一表示要处理的数组名称
参数二表示要处理的数组的索引
参数三表示要处理的数组的值

索引修改的不是响应式的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
    </head>
    <body>
        <div id="app">
            <ul>
                <li :key='index' v-for="(item,index) in list">{{item}}</li>
            </ul>
            
            <div>
                <div>{{info.name}}</div>
                <div>{{info.age}}</div>
                <div>{{info.gender}}</div>
            </div>
        </div>
        
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    list:['apple','orange','banana'],
                    info:{
                        name:'list',
                        age:12
                    }
                },
            })
            
            vm.$set(vm.list, 1 ,'lemon');
            
            vm.$set(vm.info, 'gender','female')
        </script>
    </body>
</html>

图书管理

图书列表

实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮

2. 添加图书

实现表单的静态效果
添加图书表单域数据绑定
添加按钮事件绑定
实现添加业务逻辑

3. 修改图书

修改信息填充到表单
修改后重新提交表单
重用添加和修改的方法

4. 删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
    </head>
    <body>
        <div id="app">
            <div class="grid">
                <div>
                    <h1>图书管理</h1>
                    <div class="book">
                        <div>
                            <label for="id">
                                编号：
                            </label>
                            <input type="text" id="id" v-model="id">
                            <label for="name">
                                名称：
                            </label>
                            <input type="text" id="name" v-model="name">
                            <button type="button" @click="handle">提交</button>
                        </div>
                    </div>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr :key='item.id' v-for="item in books">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.data}}</td>
                            <td>
                                <a href="" @click.prevent="toEdite(item.id)">修改</a>
                                <span>|</span>
                                <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                    
                </table>
            </div>
        </div>
        
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    books:[{
                        id:1,
                        name:'三国演义',
                        date:''
                    },{
                        id:2,
                        name:'水浒传',
                        date:''
                    },
                    {
                        id:3,
                        name:'红楼梦',
                        date:''
                    },
                    {
                        id:4,
                        name:'西游记',
                        date:''
                    }
                    
                ]
                },
                methods:{
                    handle:function(){
                        var book={};
                        book.id = this.id;
                        book.name =this.name;
                        book.date = '';
                        this.books.push(book);
                        // 清空表单
                        this.id = '';
                        this.name ='';
                    },
                    toEdite:function(id){
                        // 根据ID查询出要编辑的数据
                        console.log(id)
                        var book = this.books.filter(function(item){
                            return item.id == id;
                        })
                        console.log(book)
                        this.id= book[0].id;
                        this.name=book[0].name;
                    },
                    deleteBook:function(id){
                        this.books= this.books.filter(function(item){
                            return item.id !=id;
                        })
                    }
                }
            })
        </script>
    </body>
</html>