vue实现页面各种案例

Vue 实现页面常见案例

Vue.js 是一个流行的前端框架，用于构建交互式用户界面。以下是一些常见的 Vue 页面实现案例及其方法。

表单处理

在 Vue 中，表单处理通常使用 v-model 指令实现双向数据绑定。例如，创建一个简单的登录表单：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据:', this.username, this.password)
    }
  }
}
</script>

列表渲染

使用 v-for 指令可以轻松渲染列表数据。以下是一个动态渲染任务列表的示例：

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task.name }}
      <button @click="removeTask(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { name: '学习 Vue' },
        { name: '完成项目' },
        { name: '阅读文档' }
      ]
    }
  },
  methods: {
    removeTask(index) {
      this.tasks.splice(index, 1)
    }
  }
}
</script>

条件渲染

通过 v-if 或 v-show 指令可以根据条件显示或隐藏元素。以下是一个切换显示内容的例子：

<template>
  <div>
    <button @click="toggleShow">切换显示</button>
    <p v-if="isVisible">这段内容会根据条件显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggleShow() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

组件通信

父子组件之间可以通过 props 和 $emit 进行通信。以下是一个简单的父子组件交互示例：

父组件：

<template>
  <child-component :message="parentMessage" @update-message="updateMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', '子组件更新的消息')
    }
  }
}
</script>

路由管理

使用 Vue Router 可以实现单页应用的路由功能。以下是一个基本的路由配置示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在组件中使用路由：

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于</router-link>
  <router-view />
</template>

状态管理

对于复杂应用，可以使用 Vuex 进行状态管理。以下是一个简单的 Vuex 示例：

store/index.js:

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

组件中使用：

<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">增加</button>
  </div>
</template>

动画过渡

Vue 提供了 <transition> 组件来实现元素的动画效果。以下是一个简单的淡入淡出动画：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">这是一段会淡入淡出的文字</p>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

这些案例涵盖了 Vue 开发中的常见场景，可以根据具体需求进行调整和扩展。