Web前端开发技术实验报告
实验1：Vue基础实验
一、实验目的：
- 掌握Vue实例的创建方法
- 理解并初步掌握Vue实例的生命周期及钩子函数的使用
- 掌握计算属性与侦听器使用方法
二、实验要求：
- 掌握Vue的基本语法及使用。
- 编写程序并调试，完成以下实验内容。
- 上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机20-1班01张三实验1” 标识。各班学委收齐本班本次实验后进行打包（打包文件为.rar或.zip类型），使用名称如“1班Web前端开发技术实验1”提交。
三、实验内容：
1、一个简单的一定范围内（如1~100）的猜数游戏。用户在一个输入框里输入所猜的数，如果输入的值不正确，就提示数猜大了或小了；如果输入正确时就祝贺用户猜对。（可分是否利用Vue生命周期钩子函数两种情况实现。）
2、定义一个对象，对象中有姓名和城市，在页面中显示自我介绍，例如“我叫什么，我来自哪个城市”。分别使用methods（方法）、computed（计算属性）和watch（侦听器）三种方式实现。其运行效果如图2所示。
3、定义一个数组，数组中有产品的名称、单价和购买的个数，使用三者中最优的方式计算购物车中产品的总价格。然后，修改产品的数量，重新计算总价格。，其运行效果如图3所示。
四、实验过程中遇到的问题及解决手段：
1.第一次打开页面，结构是空白如图1
图1
解决方法：寻找了很久发现是代码没有保存如图2，保存后重新打开即可
图2
2.在计算总价时的问题，出现NaN如图3
图3
解决问题：调试了很久发现变量名写错如图4，price写成prece，修改成price即可
图4
五、实验结果和源代码
（一）.实验1
1.实验结果：如图4，图5
图4
图5（猜了5次三种情况的呈现效果图）
2.实验源代码
<html>
<head>
<meta charset="UTF-8" />
<title>猜大小游戏</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="guess">
<h1>猜数游戏</h1>
随机生成的数为{{num}}
<br>
{{info}}
<br>
<input v-model="num1" v-show="input_status" :disabled="isdisabled">
<button @click="playGame" v-show="hidden_status">
{{message}}
</button>
<ul>
<li v-for="info_ in info_list">
第{{info_.id}}次猜数字,输入了<span>「{{info_.num}}」</span>,提示:{{info_.text}}
</li>
</ul>
</div>
<script src="index.js"></script>
</body>
<script>
var item = 0;
var guess_num = new Vue({
el: "#guess",
data: {
num: '',
num1: '',
info: "请按「开始游戏」开始猜数字游戏",
hidden_status: true,
input_status: false,
message: '开始',
isdisabled: false,
info_list: []
},
watch: {
num1: function (newNum1, oldNum1) {
this.info = '开始比较';
guess_num.changed_num()
}
},
created: function () {
this.num = Math.floor(Math.random() * 100 + 1);
},
methods: {
changed_num: function () {
var regNeg = /[0-9]*/;
let flag = true;
if (this.num1 == this.num) {
this.info = '你猜对了!';
this.hidden_status = true;
this.isdisabled = true;
} else if (this.num1 == '') {
flag = false;
this.info = '请输入一个小于100整数';
} else if (this.num1 > 100) {
this.info = '请输入一个小于100的值';
} else if (this.num1 > this.num) {
this.info = '你输入的数字比要猜的数字大';
} else if (!regNeg.test(self.num1)) {
this.info = '请输入一个整数数字';
} else {
this.info = '你输入的数字比要猜的数字小';
}
//避免重复输入
this.info_list.forEach(item => {
if (this.num1 == item.num) {
flag = false
}
});
if (flag) {
item++;
this.info_list.push({id: item, num: this.num1, text: this.info});
}
},
playGame: function () {
if((this.message)==("重新开始")){
this.num = Math.floor(Math.random() * 100 + 1);
}
this.message = "重新开始";
this.hidden_status = false;
this.input_status = true;
this.isdisabled = false;
this.num1 = '';
item = 0;
self.info = '请输入数字';
this.info_list = [];
}
},
})
;
</script>
</html>
（二）.实验2
1.实验结果，如图6，图7
图6
图7
2.实验源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>1_2</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
名字：<input type="text" v-model="person.name"> <br/><br/>
城市：<input type="text" v-model="person.city"> <br/><br/>
<!-- methods()方法实现 -->
<!-- 自我介绍:<span>{{showpage()}}</span> -->
<!-- computed和watch方法实现 -->
自我介绍:<span>{{showpage}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
person:{name:"佩奇",city:"茂名"},
// whatch实现方法
showpage:"我叫佩奇来自茂名"
},
// methods:{
// showpage(){
// return "我叫"+this.person.name + "来自" + this.person.city;
// }
// },
// computed:{
// showpage(){
// return "我叫"+this.person.name + "来自" + this.person.city;
// }
// }
watch:{
'person.name'(val){
this.showpage ="我叫"+val + "来自" + this.person.city;
},
'person.city'(val){
this.showpage ="我叫"+this.person.name + "来自" + val;
}
}
})
</script>
</html>
（三）.实验3
1.实验结果，如图8，图9
图8
图9
2.实验源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>1_3</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<li v-for="store_ in store">
<input type="checkbox" :checked="store_.j" @change="handleCheck(store_.id)"/>
<span>{{store_.name}}</span>
单价：{{store_.price}}
数量：{{store_.count}}
<button @click="store_.count++">+1</button>
</li>
总价： <span>{{allPrice}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
store:[
{id:1,name:'小猪',price:100,count:0,j:false},
{id:2,name:'佩奇',price:50,count:0,j:false},
]
},
methods:{
handleCheck(id){
console.log('@---p')
this.store.forEach((s)=>{
if(s.id===id)
s.j=!s.j;
})
}
},
computed:{
allPrice(){
var p=0;
this.store.forEach((s)=>{
if(s.j) p=p+s.price*s.count;
})
return p;
},
}
})
</script>
</html>
六、本次实验的体会（结论）：
通过这次实验，我掌握了Vue实例的创建方法，理解并初步掌握了Vue实例的生命周期及钩子函数的使用，掌握了计算属性与侦听器使用方。同时发现自己还有很多不足，整体的代码结构还是不够熟练，日后会加强练习，花更多的时间去学习，努力掌握老师教过的知识，不断提示自己。
