vue four day

数组使用方法：

Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。

变异方法

Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法：

push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
shift() 移除数组中的第一个项并返回该项，同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
reverse() 用于反转数组的顺序，返回经过排序之后的数组

非变异方法

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。

concat() 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
slice() 基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组。
map() 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组、
filter() 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

响应式改变数组及对象（也就是字典）数据

全局方法Vue.set(数组，索引，数据) ---还可以响应式修改字典数据Vue.set(dict，key，value）

实例方法vm.$set(数组，索引，数据）---还可以响应式修改字典数据vm.$set(dict，key，value）

图书馆里案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理案例</title>
    <style>
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-color: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
    </style>
</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" :disabled="flag">
                        <label for="name">
                            名称:
                        </label>
                        <input type="text" id="name" v-model="name">
                        <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,index in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>
                            <a href="" @click.prevent @click="change(index)">修改</a>
                            <span>|</span>
                            <a href="" @click.prevent @click="del(index)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                flag: false,
                change_index:0,
                books: [
                    {
                        id: 1,
                        name: "三国演义",
                        date: ""
                    },
                    {
                        id: 2,
                        name: "水浒传",
                        date: ""
                    },
                    {
                        id: 3,
                        name: "红楼梦",
                        date: ""
                    },
                    {
                        id: 4,
                        name: "西游记",
                        date: ""
                    }
                ]
            },
            methods: {
                handle: function () {
                    if (this.flag) {
                        // 修改数据
                        // Vue.set(this.books[this.change_index],this.id,this.name)
                        this.books[this.change_index].name=this.name
                        // 放开标志
                        this.flag=false
                    } else {
                        // 添加数据
                        this.books.push(
                            {
                                id: this.id,
                                name: this.name,
                                date: ""
                            }
                        )
                    }
                    this.id = "";
                    this.name = "";
                },
                change: function (index) {
                    // 点击修改按钮 需要做的事情
                    this.change_index = index
                    this.id = this.books[index].id
                    this.name = this.books[index].name
                    // 禁止修改id
                    this.flag = true
                },
                del:function(index){
                    this.books.splice(index,1)
                    // this.books.splice(index)
                }
            },

        })
    </script>
</body>

</html>

已完成增删改查，还有日期功能及一些场景功能明天再丰富。