背景描述

        从业10年web开发，对于html、Jquery、JavaScript，不能说精通。但基础、深层次的使用，基本没啥问题。19年，公司有vue的项目，也了解了下，说实话，我没放在眼里。想研究，随时可以研究。后来，也简单看了一些书籍和资料，一直没有机会实战。这不，机会来了。

        公司一个项目，里边有一些复杂页面交互模块，同时要求美观，一直都是前端同事维护，也算是集成了vue的使用。最近需求来了，来了一个新同事，本来他一个人来搞，结果他评估了一个月，理由是对前端不熟悉（就是不分离的这一套）。领导考虑就安排来了，我来搞页面，他搞服务端代码。这不是尴尬吗？本来一个人搞定，硬生生拆2个人做。

        索性直接上vue吧，开干。

资源下载

Element - The world's most popular Vue UI framework

https://cdn.jsdelivr.net/npm/vue/dist/

所遇问题

图标缺失

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="/vue/axios@1.11.0/dist/axios.min.js"></script>

本来引入在线的，部署到服务器发现链接没法请求，报错。恩，一般来说，服务器访问外链确实有风险，我直接下载了这两个文件，到项目目录下。解决，但是一些字体样式也没了，不明白为什么。问了问kimi，说依赖2个字段，也一起下载就完了。同时改一下原来的js

@charset "UTF-8";
@font-face {
    font-family: element-icons;
    src: url('../../../fonts/element-icons.woff') format("woff"), url('../../../fonts/element-icons.ttf') format("truetype");
    font-weight: 400;
    font-display: "auto";
    font-style: normal
}

表单提交校验

-- 方法1
// 添加弹框保存方法
addFormSubmit(){
    const fn = (valid) => {
        if (valid) {
            this.addFormSubmitAct();
        } else {
            console.log('error submit!!');
            return false;
        }
    }
    this.$refs.addEleForm.validate(fn);
},


方法2
addFormSubmit(formName) {
this.$refs.addEleForm.validate((valid) => {
  if (valid) {
    this.addFormSubmitAct();
  } else {
    console.log('error submit!!');
    return false;
  }
});
},

官网demo
submitForm(formName) {
this.$refs[formName].validate((valid) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!');
    return false;
  }
});
},  

方法2是参考demo写的，什么问题呀，方法1是前端同事写的，试了半天反正好使。问问kimi吧。

嗨，版本问题吧。不纠结。

区别只有一点：
方法1 在调用 this.$refs.addEleForm.validate 时，传入的回调 fn 是一个 具名函数。
方法2 在调用 this.$refs.addEleForm.validate 时，传入的回调是一个 箭头函数表达式。
而 Element-UI 的 validate 方法在实现里会 把回调函数的形参个数（length）作为判断条件。
它大致是这样写的（伪代码）：

不是写法本身有对错，而是 Element-UI 早期版本对“箭头函数”兼容不好。
升级到 Element-UI ≥2.5.0 以后，官方已修复该问题，方法2 也能正常工作。
如果暂时不能升级，只要把箭头函数换成具名/匿名普通函数即可：

版本：2.15.14

el-container加div样式

花了一个布局，样式

                            <el-container v-loading="peopleDetailLoading">
                                <div style="width: 100%;">
                                    <el-row style="margin-bottom: 15px; clear: both;">
                                        <el-col :span="24"><div class="grid-content">
                                            <el-table :data="peopleDetailInfo.detectionOrderList">
                                                <el-table-column property="name" label="名称"></el-table-column>
                                                <el-table-column property="customerOrderNo" label="订单编号"></el-table-column>
                                                <el-table-column property="orderNo" label="查看报告"></el-table-column>
                                            </el-table>
                                        </div></el-col>
                                    </el-row>
                                    <el-row style="clear: both;">
                                        <el-col :span="12"><div class="grid-content doing-info">

                                            <div>
                                                <span>做题情况：{{ peopleDetailInfo.questionBankNames || '-'}}</span>
                                            </div>
                                            <div class="stats" v-if="peopleDetailInfo.questionBankNames">
                                                <div class="stat-item">
                                                    <p class="stat-value">{{ peopleDetailInfo.undoTopicCount || '-'}}</p>
                                                    <p class="stat-label">未做数量</p>
                                                </div>
                                                <div class="stat-item">
                                                    <p class="stat-value">{{ peopleDetailInfo.doneTopicCount || '-'}}</p>
                                                    <p class="stat-label">已作数量</p>
                                                </div>
                                                <div class="stat-item">
                                                    <p class="stat-value error">{{ peopleDetailInfo.wrongCount || '-'}}</p>
                                                    <p class="stat-label">错误数量</p>
                                                </div>
                                                <div class="stat-item">
                                                    <p class="stat-value">{{ peopleDetailInfo.correctRateDesc || '-'}}</p>
                                                    <p class="stat-label">正确率</p>
                                                </div>
                                            </div>

                                        </div>
                                        </el-col>
                                        <el-col :span="12"><div class="grid-content">
                                            <div class="homework-mind">
                                                <p>作业心得{{ peopleDetailInfo.selfAssessment}}</p>
                                            </div>
                                        </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-container>

如果没有dv这个层级，就会这样。

思考总结

这些前端框架，很不错。很丝滑，再也不用考虑一些布局，交互上的效果。官网样例demo也很充足，直接copy，直接用，调整下数据就行。

最大的特点是，页面渲染和数据是分离的，定义变量作为交互。其他完全不用考虑，赞