Vue如何在考试中搞出高质量的成绩
一、 前言
提示：注意给分项目，不给分的地方写不写都无所谓，分高的一定要拿下。
二、高质量代码的特征
提示：写好一定的注释，对应的对齐方式也要板板正正的。
三、编程实践技巧
提示：结构都是成对千万别挨个敲，都成对的敲，免得出现各类异常。
四、 代码示例
提示：如敏捷开发、测试驱动开发、极限编程、结构化软件开发、持续集成和持续交付
项目层级：
login.html效果：
登陆失败弹出效果。
index.html效果：
模糊查询效果：
login.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1>登录/注册</h1> <fieldset> <legend>登录窗体</legend> <p> <input type="text" v-model="userName" placeholder="请输入用户名" /> </p> <p> <input type="password" v-model="pwd" placeholder="请输入用户密码" /> </p> <p> <input type="button" v-on:click="sub()" value="提交" /> </p> </fieldset> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: "#app", data: { isf: true, userName: "", pwd: "" }, methods: { //登录函数 sub: function() { if (this.userName == "admin" && this.pwd == "123456") { window.location.href = "index.html"; } else { alert("登录失败"); } } } }); </script> </body> </html>
index.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> * { margin: 0px; padding: 0px; } table, tr, th, td { border: 1px solid black; border-collapse: collapse; } table { width: 100%; text-align: center; } </style> <div id="app"> <input type="text" v-model="selectKey" placeholder="请输入查询关键字" /> <hr/> <table> <tr style="background-color: skyblue;"> <th>编号</th> <th>姓名</th> <th>简介</th> </tr> <tr v-for="item,index in newList"> <td>{{item.id}}</td> <td>{{item.userName}}</td> <td>{{item.introduce}}</td> </tr> </table> </fieldset> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: "#app", data: { list: [{ id: 1, userName: "貂蝉", introduce: "红昌姑娘一位非常美丽的歌姬" }, { id: 2, userName: "褒姒", introduce: "可怜的姑娘，老头是周幽王" }, { id: 3, userName: "王昭君", introduce: "昭君家境贫寒,无力行贿,毛延寿便把她画得很丑" }, { id: 4, userName: "西施", introduce: "其实跟夫差没关系，范蠡才是正宫。" }], selectKey: "" }, computed: { //计算属性，我们来用于模糊查询 newList: function() { //为了不影响原list数据，故而创建影分身 var _this = this; return _this.list.filter(function(o) { //使用indexOf判断字符串中是否有查询的关键字 //如果indexO返回-1代表没有 //返回非-1代表本字符串内有查询的字符，显示即可。 return o.userName.indexOf(_this.selectKey) != -1; }); } } }); </script> </body> </html>
样例效果：
InsCode审核中，可以直接点击预览项目。
得分标准：
| 编号 | 内容 | 分数 |
| 1 | 项目层级标准创建js文件夹下放置vue.min.js，外部login.html文件以及index.html文件。 | 5分 |
| 2 | login页面效果代码。 | 5分 |
| 3 | login.html页面与index.html页面正确引入vue.min.js文件(5分)，正确声明Vue并绑定app容器(5分)。 | 10分 |
| 4 | login.html页面input数据绑定Vue的data数据(5分)，并且在点击登陆的时候触发事件函数(5分)，如果userName=="admin"与pwd=="123456"时登陆成功(5分)，跳转到index.html页面(5分)。 | 20分 |
| 5 | 完成index页面的table代码格式(5分)，根据页面提示在Vue中声明data的list数组对象，包含id，userName，introduce(5分)，列表中遍历显示vue中的对象数据(10分)，完成页面列表显示样式效果(5分)。 | 25分 |
| 6 | 添加input标签用作模糊查询的输入元素模块，并在Vue中的data内绑定数据。 | 5分 |
| 7 | 添加computed属性(5分)，完成模糊查询操作。正确添加多层函数(5分)，完成过滤器函数(5分)，完成数据筛选(5分)。 | 20分 |
| 8 | 规范命名，有一定的缩进格式，代码整洁，有一定注释，可读性强。 | 10分 |
五、 总结
提示：根据给分享注意操作，对应的分数肯定少不了。
