实验3：Vue.js组件实验

Web前端开发技术实验报告

实验3：Vue.js组件实验

一、实验目的：

1. 理解Vue组件概念并掌握组件的注册与使用
2. 掌握组件之间的通信
3. 掌握插槽的编写与使用
4. 理解过渡与动画的概念与简单使用

二、实验要求：

1. 掌握Vue.js组件、插槽、过渡与动画的基本语法。
2. 编写程序并调试，完成以下实验内容。
3. 上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机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组件概念并掌握组件的注册与使用，初步掌握了组件之间的通信，熟悉了插槽的编写与使用，理解了过渡与动画的概念与简单使用。

同时我也发现很多知识还是没能掌握，导致在做实验的过程不断查找资料，以后还是继续跟紧老师的步伐不断练习，不断去积累才能将知识运用得得心应手，才能不断进步。