Vue如何在考试中搞出高质量的成绩
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分 |
五、 总结
提示：根据给分享注意操作，对应的分数肯定少不了。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue如何在考试中搞出高质量的成绩
本文地址： https://pptw.com/jishu/291385.html