Vue的个人理解以及笔记

一.是什么以及做什么，如何安装？

概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

安装：

Vue.js三种方式安装

二.使用

介绍

Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。
data.vue实例的数据对象（就是vue存放数据的地方）vue会递归将data的属性转换为getter/setter，从而让data属性能够响应数据变化 对象必须是纯粹的对象（还有0个或多个key/value对）

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

基本语法

钩子函数

其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

说明：
是什么：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

做什么：Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

有哪些阶段：创建前/后, 载入前/后,更新前/后,销毁前/后，第一次加载页面会触发：beforeCreate, created, beforeMount, mounted 这几个钩子。注意：DOM渲染在mounted中就完成了

适合使用场景;

beforecreate : 可以在此阶段加loading事件，在加载实例时触发； created :
初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
mounted : 挂载元素，获取到DOM节点；
updated : 如果对数据统一处理，在这里写上相应函数；
beforeDestroy : 可以做一个确认停止事件的确认框；
nextTick : 更新数据后立即操作dom；

插值语法

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

说明：data vue实例的数据对象（就是vue存放数据的地方）vue会递归将data的属性转换为getter/setter，从而让data属性能够响应数据变化 对象必须是纯粹的对象（还有0个或多个key/value对）

v-bind：对于js中设定的值去绑定vue中设定的值,单向绑定
双向绑定使用v-model,只能引用在表单类元素（输入类中）

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???

事件

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo和@click="demo($event)"效果一致，但后者可以传参

修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”

v-if = “表达式”

表示如果表达式为真，则显示该标签，该指令根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom元素,它在表格里的使用情况可以做一下两种判断

使用场景;
1.多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2.进行两个视图之间的切换

v-for的使用

方式一：v-for循环普通数组：

{{i}},{{item}}

方式二：v-for循环对象数组：

{{user.id}},{{user.name}},{{i}}

方式三：v-for循环对象：在遍历对象身上的键值对的时候，除了有 val key，在第三个位置还有一个索引值

{{val}},{{key}}

方式四：v-for迭代数组

//in后面我们放过 普通数组 对象数组 对象 还可以放数字
//注意：如果使用 v-for 迭代数字的话，前面的count值从1开始

这是第{{count}}次循环

补充：
key的使用:对于设置的key的index的值，再次新增会重新渲染，最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性；
为什么要使用key？

1. 需要加入:key=”唯一标识”， 唯一标识尽量是id，目的是为了高效地更新虚拟DOM
2. 没有key时，状态默认绑定的是位置，有key时，状态根据key的属性值绑定到了响应的数组元素。
3. 推荐使用数组内的字段（保证唯一性）作为key的唯一标识，不建议直接使用index，
   原因是，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的

Form 表单组件

表单验证：el-form组件的属性rules上保存着所有的验证规则，model属性保存整个表单数据，验证逻辑的主体在el-form-item，根据prop字段名从el-form获取对应字段的value和验证逻辑，维护验证状态和验证信息。

它一般搭配输入框使用

其内部的一些属性详细见 Element

Table 表格组件

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

基本使用：当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。 可以使用 width 属性来定义列宽。
border：设置带边框表格，默认是true

其他属性见：Element表格

el-dialog：对话框（弹出框显示）

title设置标题
visible.sync控制弹框的显示
append-to-body支持弹框中继续打开弹框
el-dialog的before-close关闭按钮的钩子
span的slot='footer’弹框底部设置
el-dialog的center标题和底部居中显示
close-on-click-modal含义是：点击空白处是否关闭，默认true
点击空白处不关闭弹框 只需要 :close-on-click-modal=“false” 即可

<template>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="80px">
            <el-form-item :hidden="dataForm.id === 0 ? false : true" label="员工选择" prop="uid">
                <!-- <el-input v-model="dataForm.uid" placeholder="员工id"
                    @blur="selectHuman(dataForm.uid)"></el-input> -->
                <el-select v-model="dataForm.uid" placeholder="请选择员工" @change="selectHuman(dataForm.uid)">
                    <el-option v-for="(item, index) in humanlist" :key="index" :label="item.name" :value="item.id"
                        @click="getInfo(item.id)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="emName">
                <el-input v-model="dataForm.emName" placeholder="姓名" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.sex" placeholder="性别" :disabled=true></el-input>
                <!-- <el-radio-group v-model="dataForm.sex">
                        <el-radio :label=0>男</el-radio>
                        <el-radio :label=1>女</el-radio>
                    </el-radio-group> -->

            </el-form-item>
            <el-form-item label="年龄" prop="age" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.age" placeholder="年龄" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.phone" placeholder="电话" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard" :class="{ 'is-required': !dataForm.id }" :label-width="formLabelWidth">
                <el-input v-model="dataForm.idCard" placeholder="身份证号"
                    onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"></el-input>
            </el-form-item>
            <el-form-item label="家庭地址" prop="address" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.address" placeholder="家庭地址" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.companyName" placeholder="公司名称" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="部门选择" prop="deptId">
                <el-select v-model="dataForm.deptId" placeholder="部门" :disabled=true>
                    <el-option v-for="(item, index) in dptlist" :key="index" :label="item.name" :value="item.id"
                        @click="getInfo(item.id)"></el-option>
                </el-select>
            </el-form-item>



            <el-form-item label="职位" prop="position" :class="{ 'is-required': !dataForm.id }">
                <el-input v-model="dataForm.position" placeholder="职位"></el-input>
            </el-form-item>
            <!-- 合同状态 -->
            <!-- <span v-show="scope.row.status == '2' ? true : false">1</span> v-show="!dataForm.id? true : false"  :disabled="checkShow()"-->
            <!-- <el-form-item label="合同状态" size="mini" prop="status" >
                    
                    <el-radio-group v-model="dataForm.status" :disabled=true>
                        <el-radio  :label=0>正常</el-radio>
                        <el-radio :label=1>即将逾期</el-radio>
                        <el-radio :label=2>逾期</el-radio>
                    </el-radio-group>
            </el-form-item> -->
            <!-- 合同类型 -->
            <el-form-item label="合同类型" size="mini" prop="type">
                <el-radio-group v-model="dataForm.type">
                    <el-radio :label=0>劳动合同</el-radio>
                    <el-radio :label=1>劳务合同</el-radio>
                    <el-radio :label=2>实习合同</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="签署时间" prop="signTime" :class="{ 'is-required': !dataForm.id }">
                <el-date-picker v-model="dataForm.signTime" type="datetime" placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="合同年数" size="mini">
                <!-- <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker> -->
                <!-- label="结束时间" prop="endTime" :class="{ 'is-required': !dataForm.id }" -->
               
                    <el-select v-model="dataForm.years" placeholder="请选择签约年数" 
                        clearable>
                        <el-option label="3年" value=3></el-option>
                        <el-option label="5年" value=5></el-option>
                        <el-option label="10年" value=10></el-option>
                    </el-select>
             
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <!-- 点击取消清空dataForm里的数据，以及关闭窗口-->
            <el-button @click="visible = false, cancelExpert('dataForm')">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        var validateSex = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('性别不能为空'))
            } else {
                callback()
            }
        }
        var validateAge = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('年龄不能为空'))
            } else {
                callback()
            }
        }
        var validatePhone = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('电话不能为空'))
            } else {
                callback()
            }
        }
        var validateIdCard = (rule, value, callback) => {
            // if (!this.dataForm.id && !/\S/.test(value)) {
            //     callback(new Error('身份证号不能为空'))
            // } else {
            //     callback()
            // }
            if (!value) {
                return callback(new Error("身份证号不能为空"));
            }
            if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
                callback(new Error("你输入的身份证长度或格式错误"));
            }
            //身份证城市
            var aCity = {
                11: "北京",
                12: "天津",
                13: "河北",
                14: "山西",
                15: "内蒙古",
                21: "辽宁",
                22: "吉林",
                23: "黑龙江",
                31: "上海",
                32: "江苏",
                33: "浙江",
                34: "安徽",
                35: "福建",
                36: "江西",
                37: "山东",
                41: "河南",
                42: "湖北",
                43: "湖南",
                44: "广东",
                45: "广西",
                46: "海南",
                50: "重庆",
                51: "四川",
                52: "贵州",
                53: "云南",
                54: "西藏",
                61: "陕西",
                62: "甘肃",
                63: "青海",
                64: "宁夏",
                65: "新疆",
                71: "台湾",
                81: "香港",
                82: "澳门",
                91: "国外"
            };
            if (!aCity[parseInt(value.substr(0, 2))]) {
                callback(new Error("你的身份证地区非法"));
            }
            // 出生日期验证
            var sBirthday = (
                value.substr(6, 4) +
                "-" +
                Number(value.substr(10, 2)) +
                "-" +
                Number(value.substr(12, 2))
            ).replace(/-/g, "/"),
                d = new Date(sBirthday);
            if (
                sBirthday !=
                d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
            ) {
                callback(new Error("身份证上的出生日期非法"));
            }

            // 身份证号码校验
            var sum = 0,
                weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
                codes = "10X98765432";
            for (var i = 0; i < value.length - 1; i++) {
                sum += value[i] * weights[i];
            }
            var last = codes[sum % 11]; //计算出来的最后一位身份证号码
            if (value[value.length - 1] != last) {
                callback(new Error("你输入的身份证号非法"));
            }
            callback();
        }




        var validateAddress = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('家庭地址不能为空'))
            } else {
                callback()
            }
        }
        var validateCompanyName = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('公司名称不能为空'))
            } else {
                callback()
            }
        }
        var validateDeptId = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('部门编号不能为空'))
            } else {
                callback()
            }
        }
        var validateposition = (rule, value, callback) => {
            if (!this.dataForm.id && !/\S/.test(value)) {
                callback(new Error('职位不能为空'))
            } else {
                callback()
            }
        }
        return {
            visible: false,
            humanlist: [],
            dptlist: [],
            dataForm: {
                id: 0,
                uid: '',
                emName: '',
                sex: '',
                age: '',
                phone: '',
                idCard: '',
                address: '',
                companyName: 'wedu',
                deptId: '',
                position: '',
                type: '',
                status: '',
                signTime: '',
                endTime: '',
                years: ''
            },
            dataRule: {
                uid: [
                    { required: true, message: '员工id不能为空', trigger: 'blur' }
                ],
                emName: [
                    { required: true, message: '员工姓名不能为空', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '性别不能为空', trigger: 'blur' },
                    { validator: validateSex, trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '年龄不能为空', trigger: 'blur' },
                    { validator: validateAge, trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                    { validator: validatePhone, trigger: 'blur' }
                ],
                idCard: [
                    { validator: validateIdCard, trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '家庭地址不能为空', trigger: 'blur' },
                    { validator: validateAddress, trigger: 'blur' }
                ],
                companyName: [
                    { required: true, message: '公司名称不能为空', trigger: 'blur' },
                    { validator: validateCompanyName, trigger: 'blur' }
                ],
                deptId: [
                    { required: true, message: '部门编号不能为空', trigger: 'blur' },
                    { validator: validateDeptId, trigger: 'blur' }
                ],
                position: [
                    { required: true, message: '职位不能为空', trigger: 'blur' },
                    { validator: validateposition, trigger: 'blur' }
                ],
                // type: [
                //     { required: true, message: '请选择合同', trigger: 'blur' },
                // ],
                // status: [
                //     { required: true, message: '请选择合同状态', trigger: 'blur' },
                // ],
                // signTime: [
                //     { type: 'data', required: true, message: '请选择日期', trigger: 'blur' },
                // ],
                // endTime: [
                //     { type: 'data', required: true, message: '请选择日期', trigger: 'blur' },
                // ],
                // mobile: [
                //     { required: true, message: '手机号不能为空', trigger: 'blur' },
                //     { validator: validateMobile, trigger: 'blur' }
                // ]
            }
        }
    },
    //生命周期函数的钩子，在vue这个实例被加载时就实现该方法
    created() {
        //获取员工列表（id和姓名）
        this.$http({
            url: this.$http.adornUrl('/contract/humanist'),
            method: "get",
            params: this.$http.adornParams(),
        }).then(({ data }) => {
            this.humanlist = data.list
        })
        //获取部门编号和id
        this.$http({
            url: this.$http.adornUrl('/contract/titlist'),
            method: "get",
            params: this.$http.adornParams(),
        }).then(({ data }) => {
            this.dptlist = data.titlist
        })
    },
    methods: {
        //查询是否是修改或者合同状态的显示
        // checkShow() {
        //     console.log(1)
        //     if(this.dataForm.id !==null && this.dataForm.id > 0) {
        //         console.log(2)
        //         if (this.dataForm.status == 2) {
        //             console.log(3)
        //             return true
        //         }else {
        //             console.log(4)
        //             return false
        //         }
        //     } else {
        //         console.log(5)
        //         return false
        //     }
        // },

        //判断是否是修改或者删除，用于设置显示
        showInOrNo(id) {
            //如果有id传值不为空就是修改
            if (id != null) {
                return true
            } else {
                return false
            }
        },
        init(id) {
            console.log('id=' + id)
            this.dataForm.id = id || 0
            this.visible = true
            if (this.dataForm.id) {
                this.$http({
                    url: this.$http.adornUrl(`/contract/info/${this.dataForm.id}`),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataForm.uid = data.contract.uid
                        this.dataForm.emName = data.contract.emName
                        this.dataForm.sex = data.contract.sex
                        this.dataForm.age = data.contract.age
                        this.dataForm.phone = data.contract.phone
                        this.dataForm.idCard = data.contract.idCard
                        this.dataForm.address = data.contract.address
                        this.dataForm.companyName = data.contract.companyName
                        this.dataForm.deptId = data.contract.deptId
                        this.dataForm.position = data.contract.position
                        this.dataForm.type = data.contract.type
                        this.dataForm.status = data.contract.status
                        this.dataForm.signTime = data.contract.signTime
                        this.dataForm.endTime = data.contract.endTime
                    }
                })
            }
        },



        //查询Human中的记录
        selectHuman(uid) {
            this.$http({
                url: this.$http.adornUrl(`/contract/human`),
                method: 'get',
                params: this.$http.adornParams({
                    id: uid
                })
            }).then(({ data }) => {
                console.log(data);
                if (data && data.code === 0) {
                    this.dataForm.uid = data.human.id
                    this.dataForm.emName = data.human.name
                    this.dataForm.sex = data.human.sex == 1 ? "男" : "女"
                    this.dataForm.age = data.human.age
                    this.dataForm.phone = data.human.phone
                    this.dataForm.address = data.human.address
                    this.dataForm.deptId = data.human.deptId
                } else {
                    this.$message.error(data.msg)
                }
                // this.$refs['dataForm'].resetFields()
            })
        },

        //js
        //取消dialog
        cancelExpert(dataForm) {
            this.$refs[dataForm].resetFields();
            this.addExpertInfo = false; //关闭对话框
        },

        // 表单提交
        dataFormSubmit() {
            console.log(this.dataForm.id);
            //校验表单
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.$http({
                        url: this.$http.adornUrl(`/contract/${!this.dataForm.id ? 'save' : 'update'}`),
                        method: 'post',
                        data: this.$http.adornData({
                            'id': this.dataForm.id || undefined,
                            'uid': this.dataForm.uid,
                            'emName': this.dataForm.emName,
                            'sex': this.dataForm.sex,
                            'age': this.dataForm.age,
                            'phone': this.dataForm.phone,
                            'idCard': this.dataForm.idCard,
                            'address': this.dataForm.address,
                            'companyName': this.dataForm.companyName,
                            'deptId': this.dataForm.deptId,
                            'position': this.dataForm.position,
                            'type': this.dataForm.type,
                            'status': this.dataForm.status,
                            'signTime': this.dataForm.signTime,
                            'endTime': this.dataForm.endTime,
                            'years': this.dataForm.years
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false
                                    this.$emit('refreshDataList')
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                        this.$refs['dataForm'].resetFields()
                    })
                }
            })
        },
    }
}
</script>

这里是我写的有个添加或者修改弹窗，注释都有，可以对照看
效果：

el-pagination分页组件的使用

其属性有：

layout属性：是个字符串类型的值，他表示都展示那些组件，以及这些组件展示的顺序，每个组件用逗号分隔，这里使用的值有total, sizes, prev, pager, next, jumper
current-page属性：代表的是当前页码，支持 .sync 修饰符，是number类型的值，默认是1。
page-sizes属性：代表的是每页显示多少条数据的选项，是一个number的数组，例如[5，10，15，20]，这个属性要配合着page-size属性一起用。
page-size属性：代表的是每页显示多少条数据，支持 .sync 修饰符，是一个number类型的值，默认是10。
total属性：代表的是总条数，是number类型的值。
size-change事件：每页展示数量发生变化时触发，回调参数每页数据的条数
current-change事件：当前页码发生变化时触发，回调参数当前页码。
实例：

el-upload:上传组件

drag是否激活拖放模式
multiple：支持多文件一起上传
:limit=“1” :on-exceed=“handleExceed”
限制为多少，如果超出支持上传文件数，会执行on-exceed所在的方法
:before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
class：可以自己修改一下样式
name：这个name很重要，错了后台接收不到文件，官方是这样解释的 上传的文件字段名,实际上就是后端对应的接口参数的名字，后端可能是这么定义的 public AjaxResult
uploadFile(MultipartFile file) throws Exception
action：就是后端接收文件的接口地址
headers：有些程序用token作为鉴权依据，通常把token放在header中，headers长这样子：headers: {Authorization: this.KaTeX parse error: Expected 'EOF', got '}' at position 21: ….getters.token }̲> beforeRemove：…confirm(确定移除
${file.name}？)

on-exceed：官方这么解释文件超出个数限制时的钩子 ,一般应用这个钩子弹出一个提示信息，告诉用户文件个数超过限制了
on-success ：绑定一个定义在 methods中的方法，调用一个匿名函数，将需要用到的信息参数传递进去。然后在匿名函数内部中，再通过返回值调用一个函数的形式，将信息参数传递过去。
before-upload：官方这么解释上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被
reject，则停止上传。 我们可以在上传之前判断一下用户选择的文件是不是符合要求，比如文件类型是否正确、文件大小是否超限等。

我的案例：

<!-- 文件上传 -->
<template>
    <el-dialog title="上传文件" :close-on-click-modal="false" @close="closeHandle" :visible.sync="visable">
        <!-- :file-list="fileList" -->
    <el-upload drag 
    :action="url" 
    ref="contractupload" 
    :before-upload="beforeUploadHnadle"
    :on-success="succseeHandle"
    :on-change="changeHandle"
    multiple
    
    :limit="1" :on-exceed="handleExceed"
    style="text-align: center;"
    :auto-upload="true"
    >
      <el-button type="primary" size="asmall">上传</el-button>
    </el-upload>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return{
            //弹窗关闭的条件
            visable:false,
            //请求的url
            url:'',
            //合同id
            cid:'',
            //用户id
            uid:'',
            //文件列表
            // filelist:[],
            //文件名称
            document:'',
            //判定对文件个数是否符合条件的两个比对值
            num:0,
            successNum:0,
        }
    },
    methods:{
        init(id,uid){
            //设置传递参数
            console.log(id),
            this.cid=id,
            this.uid=uid,
            this.url=this.$http.adornUrl(`/contract/upload?`)
            +`token=${this.$cookie.get("token")}`
            +`&uid=`+
            this.uid+
            `&id=`+
            id,
            this.visable=true
        },
        //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
        beforeUploadHnadle(file){
            //文件支持的类型有
            if(
                file.type!=="image/jpg"&&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif" &&
                file.type !== "application/pdf" 
            ){
                //传递错误信息
                this.$message.error("只支持jpg、png、gif格式的图片以及pdf!")
                return false;
            }this.num++;
        },

        //文件上传成功后的钩子
        succseeHandle(response,file){
            // this.fileList=this.filelist;
            console.log(response);
            console.log(file);
          
            this.successNum++;
            //判断响应的消息
            if(response&&response.code===0){
                //这里使用于多个文件上传的校验，比如上传三个文件，只成功了2个，这里就不会成功，就会有提示
                if(this.num===this.successNum){
                    this.$confirm("操作成功, 是否继续操作?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).catch(() => {
                        this.visible = false;
                    });
                }
            }else{
                //如果错误，显示错误提示
                this.$message.error(response.msg);
            }
                  //
            // if (this.fileList != null) {
            //         console.log(this.url);
            //         // 手动触发上传
            //         this.$refs.upload.submit();
            //       将文件清空处理
            //         this.$nextTick(() => {
            //           this.$refs.upload.clearFiles();
            //         });
        },
        //弹窗关闭的钩子
        closeHandle(){
            // this.fileList=[];
            //通过子组件更新父组件的getdataList，通过emit("父组件中定义的ref的")
            //主要是可以在子组件中触发父组件里面的方法
            this.$emit("refreshDataList")
        },
        //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        changeHandle(file){
            this.document=file.name;
            this.uid=file.uid;
            this.url = this.$http.adornUrl(`/contract/upload?`)
            + `token=${this.$cookie.get("token")}`
            + `&uid=` +
            this.uid +
            `&id=` +
            this.cid;
            console.log(this.url);
        },
        //在上传文件超出限制时
        handleExceed(file){
            this.$message.warning(`只允许一个文件,超出上传限制！！`);
            // this.fileList = [];        
        },
    }
}
</script>

其他的组件以及属性使用

activated生命周期函数，是配合 keep-alive 进行使用或者路由跳转。进入页面时，mounted 与 activated 生命周期函数都会执行，当前 keep-alive 时或者路由跳转，进行了缓存，这时返回上一页 ，mounted生命周期函数不会执行，而 activated 会执行。

$http.adornUrl方法通常用于在URL中添加请求参数、处理动态路由参数或处理其他URL相关的逻辑。它可以帮助我们在发送请求之前对URL进行修改，以满足特定的需求

$http.adornData：用于对请求参数或响应数据进行加工、转换或处理。具体而言，$http.adornData应用;
1.参数加工：在发送请求前，可以使用$http.adornData对请求参数进行处理，比如添加一些固定的参数、对某些参数进行加密等。2.响应数据处理：在接收到后端返回的数据后，可以使用$http.adornData对响应数据进行处理，比如解密、格式化、过滤等。

Vue中的template和render都是用来定义组件的视图的方式，template是一种声明式的模板语法，定义组件的结构和样式，使用Vue指令和表达式动态的渲染数据；
它其中的属性之一：slot-scope 取得作用域插槽 设置修改和删除的按钮，scope可以随便替换其他名称，只是定义对象来代表取得的data数据
render是一种函数式的渲染方式，可以通过JavaScript代码来定义组件的结构和样式，同时也可以使用Vue的API来动态地渲染数据。相比于template，render更加灵活和强大，可以实现更加复杂的组件结构和交互效果。

cancelExpert(‘数据名’)我这里是dataForm

Vue中的传参方式

1.$ref
$ref用于数据之间的传递，如果ref用在子组件上能通过$ref获取到子组件节点、事件、数据、属性，主要还是父组件向子组件通信
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

2.$emit
$emit用于事件之间的传递， 可以实现子组件传参给父组件
$emit主要是可以在子组件中触发父组件里面的方法

3.props
props用于父组件向子组件传递数据信息，传参方式是单向传输，只能父组件传给子组件，不能实现子组件传参给父组件.
props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

其他未使用到的，后续也会整理，这里是我入门到现在了解到的知识点，看完的各位看官请一键三连，谢谢！！！！！！！！！