Vue如何在考试中搞出高质量的成绩

简介: 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分

五、 总结

提示:根据给分享注意操作,对应的分数肯定少不了。

相关文章
|
1天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
11 0
|
1天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
6 0
|
1天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
5 0
|
1天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
6 1
|
1天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
16 0
|
1天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
15 0
|
1天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
9 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
979 0
|
6天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
32 3
|
1天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
12 1