今天晚上开始学习Vue,折腾了快4个小时才完成一个基本练习。
开始练习基本语法,只涉及元素、数据、计算方法,完成了练习。
后来想加入样式判断,本来用计算方法可以实现,但是想用计算属性就熬人了,关键在获取v-for里面的数据时以及正确的函数写法遇到了问题,反复查资料反复试,熬了2个多小时,不过最终解决了还是有所收获。
完成的练习:
<!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>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.table td{
background-color:#ffffff;
height:25px;
line-height:200%;
}
.normal{color: black;}
.GT90{color:red;}
.LT60{color: green;}
.bold{font-weight: bold;}
</style>
</head>
<body>
<div id="demo">
<!--界面模板-->
<!--mustache语法-->
<h1 align="center">{{title}}</h1>
<table cellpadding="1" cellspacing="1" align="center" class="table" bgcolor="#cccccc">
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>总分</td>
<td>操作</td>
</tr>
<tr v-for="(item,i) in list" :key="i">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td clase="normal" v-bind:class="ClassJudge(item.ChineseScore)">{{item.ChineseScore}}</td>
<td clase="normal" v-bind:class="ClassJudge(item.MathScore)">{{item.MathScore}}</td>
<td>{{item.ChineseScore + item.MathScore}}</td>
<td><a href="" @click.prevent="del(i)">删除</a></td>
</tr>
<tr>
<td><input type="text" placeholder="请输入学号" v-model="Id"></td>
<td><input type="text" placeholder="请输入姓名" v-model="Name"></td>
<td><input type="text" placeholder="请输入语文成绩" v-model="ChineseScore"></td>
<td><input type="text" placeholder="请输入数学成绩" v-model="MathScore"></td>
<td></td>
<td><input type="button" value="新增" @click="btnAdd"></td>
</tr>
<tr align="right">
<td colspan="6"><input type="text" placeholder="请输入搜索的姓名" class="t1" v-model="SearchName"><input type="button" value="搜索" class="t2" @click="btnSearch"></td>
</tr>
</table>
</div>
<script>
var vm=new Vue({
el:"#demo",//css选择器
data:{
//界面中Vue元素的相关数据
title:"学生成绩表",
Id:'',
Name:'',
ChineseScore:0.0,
MathScore:0.0,
SearchName:'',
list:[
{Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
{Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5},
{Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
{Id:104,Name:'小宋',ChineseScore:59,MathScore:97},
]
},
methods:{
btnAdd(){
var student={Id:this.Id,
Name:this.Name,
ChineseScore:parseFloat(this.ChineseScore),
MathScore:parseFloat(this.MathScore)
}
this.list.push(student)
this.Id='',
this.Name='',
this.ChineseScore=0,
this.MathScore=0
},
del(i){
this.list.splice(i,1)
},
btnSearch(){
var Newstudent=[]
this.list.forEach(item => {
if(item.Name.indexOf(this.SearchName)!=-1){
Newstudent.push(item)
}
});
this.list=Newstudent
}
},
computed:{
ClassJudge:function(){
return function(val){
if(parseFloat(val)>85) { return {GT90:true,bold:true} }
if(val<60){ return {LT60:true,bold:true}}
}
}
}
})
</script>
</body>
</html>
结果图:
总结:
1、Vue入门很快很容易,但是学好学精并不容易,内容太多了,尤其是后面要使用脚手架最终自己搭建框架有难度;
2、脚本基本上是固定写法,但是很灵活,比如同样的问题解决手段就很多,技巧很多,看掌握的程度;
3、很多前端开发都有这个框架,所以要学而且要学好。