实验3：Vue.js组件实验
Web前端开发技术实验报告
实验3：Vue.js组件实验
一、实验目的：
- 理解Vue组件概念并掌握组件的注册与使用
- 掌握组件之间的通信
- 掌握插槽的编写与使用
- 理解过渡与动画的概念与简单使用
二、实验要求：
- 掌握Vue.js组件、插槽、过渡与动画的基本语法。
- 编写程序并调试，完成以下实验内容。
- 上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机20-1班01张三实验3” 标识。各班学委收齐本班本次实验后进行打包（打包文件为.rar或.zip类型），使用名称如“1班Web前端开发技术实验3”提交。
三、实验内容：
1、编写组件，用于显示“你好！XXX”。其中XXX由外部调用者传入，运行效果如图1所示。
图1 实验题1运行截图
2、编写插槽，用于显示“你好！XXX”。其中XXX由外部调用者传入，运行效果与图1相同。
3、利用组件和插槽，实现父组件向子组件传值“次数”，网页刚打开时效果如图2 所示。此时点击子组件中的“点击次数×0”按钮，程序运行效果如图3 所示。
图2 实验题3运行截图1
图3 实验题3运行截图2
4、实现购物时货物入车的动画。点击“购买”按钮，代表货物的红色小球从按钮处飞出，并进入到代表购物车的矩形区域。程序运行效果如图4、图5 所示。
图4 实验题4运行截图
图5 实验题4运行截图
四、实验过程中遇到的问题及解决手段：
1.报错如图e
图e 报错截图
解决方法：没有根标签，用<div></div>标签包裹图s中红色方框的代码即可。
图s
五、实验结果和源代码
1.实验1
1.1实验结果
图1 实验题1运行截图
1.2实验代码
//student.vue文件
<template>
<div>
<div v-for="s in students">
<h2>你好！{{s.name}}！</h2>
</div>
</div>
</template>
<script>
export default {
name:'Student',
props: {
// 对‘子组件接收的数据名称’进行声明，需要标明接收数据的类型‘Array’
students: Array
},
}
</script>
<template>
<div>
<Student :students="students"/>
</div>
</template>
//App.vue文件
<script>
//引入组件
import Student from './components/Student'
export default {
name:'App',
components:{
Student
},
data:{
students:[{name:"张三"},{name:"李四"}]
}
// data() {
// return {
// // 这是‘父组件传递的数据名称’的定义
// students:[{name:"张三"},{name:"李四"}]
// }
// }
}
</script>
//main.js文件
/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`<h1>你好啊</h1>`,
// components:{App},
})
2.实验2
2.1实验结果
图2 实验题2运行截图
2.2实验代码
Student.vue 文件
<template>
<div>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
</div>
</template>
<script>
export default {
name:'Student',
props: {
// 对‘子组件接收的数据名称’进行声明，需要标明接收数据的类型‘Array’
students: Array
},
}
</script>
App.vue文件
<template>
<div >
<Student>
<div v-for="(g,index) in students" :key="index">你好！{{g.name}}！</div>
</Student>
</div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
name:'App',
components:{
Student
},
data() {
return {
// 这是‘父组件传递的数据名称’的定义
students:[{name:"张三"},{name:"李四"}]
}
}
}
</script>
main.js文件
/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`<h1>你好啊</h1>`,
// components:{App},
})
3.实验3
3.1实验结果
图3 实验题3运行截图
图4 实验题3运行截图
3.2实验代码
components/S.vue
<template>
<div>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
</div>
</template>
<script>
export default {
name:'S',
props: {
// 对‘子组件接收的数据名称’进行声明，需要标明接收数据的类型‘Array’
students: Array
},
}
</script>
App.vue
<template>
<div >
<div>你点击了按钮{{count}}次</div>
<S>
<button v-on:click="count++">点击次数x{{count}}</button>
</S>
</div>
</template>
<script>
//引入组件
import S from './components/S'
export default {
name:'App',
components:{
S
},
data() {
return {
count:0,
}
}
}
</script>
Main.js
/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
new Vue({
el:'#app',
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`<h1>你好啊</h1>`,
// components:{App},
})
4.实验4
4.1实验结果
图5 实验题4运行截图
图6 实验题4运行截图
4.2实验代码
<template>
<div>
<!-- 小球运动 -->
<!-- 这个是触发小球运动-->
<button v-on:click="flag = !flag">加入购物车</button>
<!-- <div @click="flag = !flag">加入购物车</div> -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flag"></div>
</transition>
<div class="square"></div>
</div>
</template>
<script>
export default {
name:'App',
data(){
return{
flag:false
}
},
methods:{
// 注意：动画的钩子函数第一个参数:el,表示：要执行的动画的那个dom元素，是一个原生的js，Dom对象
// 可以认为：el是通过 document.getElementById('')方式获取到原生的js Dom对象
beforeEnter(el) {
// beforeEenter 表示动画入场之前，此时。动画尚未开始。可以在beforeEnter 中设置元素的开始动画之前的起始样式
// 设置 小球开始动画之前的，起始位置
el.style.transform = "translate(0,0 )";
},
enter(el, done) {
// 这个是强制动画（Height，Top，lefft，）
el.offsetWidth;
//enter 表示动画开始只求的样式可以设置小球完成动画的结束状态,translate的两个参数是小球运动的坐标：
el.style.transform = "translate(700px,200px)";
// 这个是动画的秒数为1秒
el.style.transition = "all 1s ease";
// 这个相当与调用afterEnter这个方法
done();
},
}
}
</script>
<style scoped>
.ball {
width: 10px;
height: 10px;
background: red;
border-radius: 20px;
}
.square{
width: 5vw;
height: 5vw;
background: blue;
position: absolute;
top:240px;
left:710px;
}
</style>
Main.js
/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
new Vue({
el:'#app',
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`<h1>你好啊</h1>`,
// components:{App},
})
六、本次实验的体会（结论）：
通过这次实验，我理解了Vue组件概念并掌握组件的注册与使用，初步掌握了组件之间的通信，熟悉了插槽的编写与使用，理解了过渡与动画的概念与简单使用。
同时我也发现很多知识还是没能掌握，导致在做实验的过程不断查找资料，以后还是继续跟紧老师的步伐不断练习，不断去积累才能将知识运用得得心应手，才能不断进步。