How Vue produces high-quality results in the exam
I. Introduction
Tip: Pay attention to the items that are given points. It doesn’t matter whether you write or not to write the places that don’t give points. You must win the ones with high points.
2. Characteristics of high-quality code
Tip: Write certain notes, and the corresponding alignment must be correct.
3. Programming practice skills
Reminder: The structures are all in pairs, so don't knock them one by one, but knock them in pairs, so as to avoid all kinds of abnormalities.
4. Code example
Tips: such as agile development, test-driven development, extreme programming, structured software development, continuous integration and continuous delivery
Project level:
login.html effect:
Login failed pop-up effect.
index.html effect:
Fuzzy query effect:
login.html code
<!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.htmlcode
<!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>Sample effect:
In the InsCode review, you can directly click to preview the project.
Scoring criteria:
| serial number | content | Fraction |
| 1 | The project level standard creates vue.min.js, external login.html files and index.html files under the js folder. | 5 points |
| 2 | Login page effect code. | 5 points |
| 3 | The login.html page and index.html page correctly introduce the vue.min.js file (5 points), correctly declare Vue and bind the app container (5 points). | 10 points |
| 4 | The input data on the login.html page is bound to the data data of Vue (5 points), and the event function is triggered when the login is clicked (5 points). If userName="admin" and pwd="123456" the login is successful (5 points) points), jump to the index.html page (5 points). | 20 points |
| 5 | Complete the table code format of the index page (5 points), declare the list array object of data in Vue according to the page prompt, including id, userName, introduce (5 points), traverse the list to display the object data in Vue (10 points), Complete the page list display style effect (5 points). | 25 points |
| 6 | Add the input tag as the input element module of fuzzy query, and bind data in data in Vue. | 5 points |
| 7 | Add the computed attribute (5 points) to complete the fuzzy query operation. Correctly add multi-layer functions (5 points), complete filter functions (5 points), and complete data filtering (5 points). | 20 points |
| 8 | Standardized naming, certain indentation format, clean code, certain comments, and strong readability. | 10 points |
V. Summary
Tip: According to the operation of giving attention to sharing, the corresponding score must be indispensable.