使用Vue.js实现网页内容,运用所学Vue 有关的知识包括:数据绑定、内置指令、事件、方法、全局API、过渡动画、CLI、路由等内容,基于CLI环境开发、实现“home”组件、实现“list”组件、实现“content”组件和实现路由配置。来设计一个学生信息单页面
时间: 2023-11-30 20:04:52 浏览: 76
好的,下面是一个简单的学生信息单页面示例,使用 Vue.js 实现,包括数据绑定、内置指令、事件、方法、全局 API、过渡动画、CLI、路由等内容。
首先,我们需要安装 Vue CLI:
```
npm install -g @vue/cli
```
然后创建一个新的 Vue 项目:
```
vue create student-info
```
在创建项目时,选择默认配置即可。
接下来,我们需要安装 Vue Router:
```
npm install vue-router
```
然后在 `src` 目录下创建以下文件:
1. `App.vue`: 应用程序的根组件
2. `router.js`: 路由配置文件
3. `components/Home.vue`: 主页组件
4. `components/StudentList.vue`: 学生列表组件
5. `components/StudentInfo.vue`: 学生信息组件
下面是代码实现。
### App.vue
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/list">List</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
```
### router.js
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import StudentList from './components/StudentList.vue';
import StudentInfo from './components/StudentInfo.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/list', component: StudentList },
{ path: '/info/:id', component: StudentInfo },
];
const router = new VueRouter({
mode: 'history',
routes,
});
export default router;
```
### Home.vue
```html
<template>
<div>
<h1>Welcome to Student Info</h1>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
```
### StudentList.vue
```html
<template>
<div>
<h1>Student List</h1>
<ul>
<li v-for="student in students" :key="student.id">
<router-link :to="'/info/' + student.id">{{ student.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'StudentList',
data() {
return {
students: [
{ id: 1, name: 'Tom', age: 18 },
{ id: 2, name: 'Jerry', age: 19 },
{ id: 3, name: 'Peter', age: 20 },
],
};
},
};
</script>
```
### StudentInfo.vue
```html
<template>
<div>
<h1>Student Info</h1>
<div v-if="student">
<p>Name: {{ student.name }}</p>
<p>Age: {{ student.age }}</p>
</div>
<div v-else>
<p>No student found.</p>
</div>
</div>
</template>
<script>
export default {
name: 'StudentInfo',
data() {
return {
student: null,
};
},
methods: {
fetchStudent() {
const id = this.$route.params.id;
// 在实际应用中,可以通过 API 获取学生信息
const students = [
{ id: 1, name: 'Tom', age: 18 },
{ id: 2, name: 'Jerry', age: 19 },
{ id: 3, name: 'Peter', age: 20 },
];
this.student = students.find((s) => s.id === Number(id));
},
},
created() {
this.fetchStudent();
},
watch: {
'$route.params.id': function () {
this.fetchStudent();
},
},
};
</script>
```
最后,在 `main.js` 中导入 `router.js`:
```javascript
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
```
现在,启动开发服务器:
```
npm run serve
```
在浏览器中访问 `http://localhost:8080/` 即可查看学生信息单页面应用程序。
阅读全文