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分 |
五、 总结
提示：根据给分享注意操作，对应的分数肯定少不了。