用vue做一个静态网页包含注册登陆首页详情页（仅用于学习参考）

m0_68913934

已于 2023-05-14 23:59:39 修改

阅读量1.7k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-05-14 23:50:21 首次发布

本文链接：https://blog.csdn.net/m0_68913934/article/details/130675703

版权

以下是使用Vue.js和Vue Router实现一个静态网页包含注册登录、首页和详情页的示例代码：

首先，需要安装Vue.js和Vue Router:

npm install vue
npm install vue-router

然后，在index.html中添加一个空的<div>元素app用于挂载Vue实例，以及导入Vue.js与Vue Router：

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="main.js"></script>
</body>
</html>

接着，在main.js文件中创建Vue实例并配置Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from './components/Home.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue' 
import Detail from './components/Detail.vue' 

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/detail/:id', component: Detail, props: true }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  template: '<router-view></router-view>'
})

在上述代码中，我们定义了四个组件：Home、Login、Register和Detail，并使用VueRouter进行路由配置。在Vue实例中，我们将router-view组件设置为Vue实例的模板，这样就可以根据当前URL的不同，自动渲染对应的组件了。

下面是各个组件的示例代码：

Home.vue

<template>
  <div>
    <h1>Homepage</h1>
    <p>Welcome to my website.</p>
  </div>
</template>

<template>
  <div>
    <h1>Login</h1>
    <form>
      <label>Email:</label>
      <input type="email" v-model="email">
      <br>
      <label>Password:</label>
      <input type="password" v-model="password">
      <br>
      <button v-on:click.prevent="login()">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      // TODO: 实现登录逻辑
    }
  }
}
</script>

<template>
  <div>
    <h1>Register</h1>
    <form>
      <label>Name:</label>
      <input type="text" v-model="name">
      <br>
      <label>Email:</label>
      <input type="email" v-model="email">
      <br>
      <label>Password:</label>
      <input type="password" v-model="password">
      <br>
      <button v-on:click.prevent="register()">Register</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  methods: {
    register() {
      // TODO: 实现注册逻辑
    }
  }
}
</script>

Detail.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    title() {
      // 根据ID从数据库中查询标题
      return 'Example Title'
    },
    content() {
      // 根据ID从数据库中查询内容
      return 'Example Content'
    }
  }
}
</script>

src

├── components

│ ├── Home.vue

│ ├── Login.vue

│ ├── Register.vue

│ └── Detail.vue

├── main.js

└── index.html

m0_68913934

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
用vue做一个静态网页包含注册登陆首页详情页（仅用于学习参考）

组件设置为Vue实例的模板，这样就可以根据当前URL的不同，自动渲染对应的组件了。最后，需要将各个组件、路由和Vue实例导出，在浏览器中打开。在Vue实例中，我们将。
复制链接

扫一扫