Vue基础补充以及表格案例的介绍

Vue基础补充以及表格案例的介绍

一：Vue基础的补充

1.1：v-model的使用

1. v-model 可以处理 input、textArea、select、radio、checkbox、button ；该属性只能用在表单标签，或有value属性的标签实现data中数据与所改变的数据进行双向绑定。

  <input type="text" v-model="msg">

var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello",
                range: 100
            },
            });

1.2：v-cloak的使用

1. v-cloak vue中自带的指令，作用是当加载完成后移除该指令属性，即我们希望任何在没有加载完之前呈现的样式都可以通过v-cloak渲染

  <style>
        [v-cloak] {
            background-color: burlywood;
        }
    </style>

<div id="app" v-cloak>
        {{msg}}
        {{range}}
        <p v-once>{{msg}}</p>
        <br>
        <input type="text" :value="msg" @input="changeInput($event)">
        <input type="text" v-model="msg" v-once>
        <!-- <input type="text" v-model="range">
        <input type="range" v-model="range"> -->
    </div>

这里我们设置一个定时器延迟5秒初始化vue的实例

 var vm =setTimeout(() => {
         new Vue({
            el: "#app",
            data: {
                msg: "Hello",
                range: 100
            },
            methods: {
                changeInput(e) {
                    this.msg = e.target.value;
                }
            },
        });   }, 5000);

5秒之前的样式

5秒之后的样式

1.3：v-once的使用

v-once 使用该指令，页面视图只渲染一次

{{msg}}
        {{range}}
        <p v-once>{{msg}}</p>
   <input type="text" v-model="msg">
   <input type="text" v-model="msg" v-once>
    new Vue({
            el: "#app",
            data: {
                msg: "Hello",
                range: 100
            },

可以看出被v-once修饰的标签就只渲染一次数据，其他的标签仍然能够通过v-model实现双向绑定

二：表格案例的介绍

因为这里并没有写与之对应的后端的接口而就是通过数组存放元素的方式在前端实现简单的添加，删除以及延迟查询，全选等简单功能

2.1：表格样式

  <style>
        .tb td label,
        .tb th label {
            display: block;
        }

        #app {
            width: 800px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: cornflowerblue;
            color: white
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid #000;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid #000;
            margin-bottom: 10px;
        }
    </style>

2.2：表格标签的使用

在这些标签中我们可以很清晰的看到有添加，搜索，删除，复选框多选等简单功能，每个功能都有其对应的事件，而我们在table标签里面通过v-for循环遍历获取data中的数据用来显示在表格中

 <div id="app">
        <!-- <input type="checkbox" id="chk"> <label class="" for="chk">hellohello</label> -->
       
        <div class="add">
            用户名：
            <input type="text" v-model="name">
            <button @click="addUser" :disabled="name==''">添加</button>
        </div>
        <div class="add">

            用户名：
            <input type="text" placeholder="请输入要搜索的条件" @input="search($event)">
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>
                        <label>
                            <input type="checkbox" v-model="allChecked" @change="checkAll">全选
                        </label>
                    </th>
                    <th>索引</th>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                <template v-for="(item,index) in list">
                    <tr v-if="item.isShow" :key="item.id">
                        <td><label><input type="checkbox" v-model="item.isChecked" @change="changeCheck"></label></td>
                        <td>{{index}}</td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date|timeHelper("yyyy-MM-dd HH:mm")}}</td>
                        <td>
                            <a href="#" @click.prevent="deleteUser(index)">删除</a>
                        </td>
                    </tr>
                </template>

                <tr v-if="list.length===0">
                    <td colspan="6">未获取到用户数据</td>
                </tr>
            </table>
        </div>
    </div>

2.3：初始化vue实例

因为在这里我们并没有与后端进行交互的操作，所以我们就只能在data中去初始化一些模板数据而不是通过调用后端的查询接口来获取数据

 var date = new Date();       
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: 1,
                        name: "小明",
                        date: new Date(),
                        isShow: true,
                        isChecked: false
                    },
                    {
                        id: 2,
                        name: "小刚",
                        date: new Date(),
                        isShow: true,
                        isChecked: false
                    },
                    {
                        id: 3,
                        name: "小红",
                        date: new Date(),
                        isShow: true,
                        isChecked: false
                    },
                ],
                name: '',
                id: 4,
                timeouter: null,
                allChecked: false
            },

2.4：往表单中添加元素

在这里我们就通过往data中的list里面push元素就行了，而在实际开发中我们会通过获取表单中的所有元素通过api传往后端接口，在后端返回添加成功的状态码后我们在返回一个弹窗给用户，之后再重新调用后端API的查询接口重新刷新表格元素

 addUser() {
                    if (this.name != "") {
                        this.list.unshift({
                            id: this.id++,
                            name: this.name,
                            date: new Date(),
                            isShow: true,
                            isChecked: false
                        })
                        this.name = '';
                    }
                }

2.5：延迟搜索

这里我们通过定时器来实现延迟查询的功能，我们再输入框中添加一个@input事件来实现对输入框中值的监听，但如果每改变一次值就触发一次查询事件，在实际开发过程中与后端进行频繁的交互这是一件十分消耗性能与时间的事，所以我们在触发该事件后延迟一段时间再去查询，并且每次触发该事件后都会清除掉之前的定时器，会重新创建一个定时器，这样就实现了一个简单的延迟查询操作。

    search(e) {
                    clearTimeout(this.timeouter);
                    this.timeouter = setTimeout(() => {
                        this.list.forEach(m => m.isShow = true);
                        var searchText = e.target.value.toUpperCase();
                        var filterList = this.list.filter(m => !m.name.toUpperCase().includes(searchText));
                        filterList.forEach(element => {
                            element.isShow = false;
                        });
                    }, 500)
                },

2.6：删除元素

这里就简单的通过list中的下表来进行数据的删除操作，而在实际开发过程中我们一般都会通过复选框所选择的元素通过数组的方式往后端传递所需要删除的元素来实现批量删除或者单个删除等操作，然后再调用后端的查询接口重新刷新表格中的元素

   deleteUser(index) {
                    if (confirm("是否确认删除")) {
                        this.list.splice(index, 1);
                    }
                }

2.7：html展示

当然我们在实际开发过程中都会调用自己的ui库