莆田学院vue期末考试试题及答案

关于莆仙大学 Vue.js 期末试卷及其答案的具体内容并未在提供的参考资料中提及。然而，可以构建一个典型的 Vue.js 期末考试题目框架来帮助理解可能涉及的知识点。 ### 考试范围 #### 题目一：Vue 实例创建与生命周期 解释如何创建一个新的 Vue 应用实例并描述其主要的生命周期钩子函数。 ```javascript new Vue({ el: '#app', data() { return { message: 'Hello Vue!' } }, created() { console.log('Instance has been created.') }, mounted() { console.log('Mounted on the DOM.') } }) ``` #### 题目二：组件化开发 编写一段简单的父级和子级组件之间的通信代码片段，说明 props 和 events 的作用[^1]。 ```vue <!-- ParentComponent.vue --> <template> <div id="parent"> <child-component :message="parentMsg" @childEvent="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMsg: "Message from Parent" }; }, methods: { handleChildEvent(dataFromChild) { alleet(`Received ${dataFromChild}`); } } } </script> ``` #### 题目三：计算属性与侦听器 定义两个数据项 `firstName` 和 `lastName`, 使用 computed 属性生成全名(fullName)，以及监听这两个字段的变化更新 fullName[^2]。 ```javascript computed: { fullName() { return this.firstName + ' ' + this.lastName; } }, watch: { firstName(val) { this.fullName = val + ' ' + this.lastName; }, lastName(val) { this.fullName = this.firstName + ' ' + val; } } ``` #### 题目四：路由管理 简述 vue-router 中的基本概念，并给出配置多页面应用的基础例子[^3]。 ```javascript const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent } ]; const router = new VueRouter({ mode: 'history', routes }); ```