vue实现前端功能

Vue 实现前端功能的常见方法

组件化开发

Vue 的核心思想是组件化，通过将界面拆分为独立的、可复用的组件来构建应用。每个组件包含模板、脚本和样式三部分。例如，创建一个按钮组件：

<template>
  <button @click="handleClick" :class="['btn', type]">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: String,
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.btn {
  padding: 8px 16px;
}
.primary {
  background: blue;
}
</style>

状态管理

对于复杂应用，可以使用 Vuex 或 Pinia 管理全局状态。以 Pinia 为例：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">
    Count: {{ counter.count }}
  </button>
</template>

路由管理

Vue Router 实现单页应用导航：

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('@/views/About.vue') }
];

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

export default router;

API 交互

使用 axios 或 fetch 与后端 API 通信：

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const data = ref(null);

async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    data.value = response.data;
  } catch (error) {
    console.error(error);
  }
}
</script>

响应式数据处理

Vue 的响应式系统自动跟踪数据变化：

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

<template>
  <input v-model="firstName" />
  <input v-model="lastName" />
  <p>{{ fullName }}</p>
</template>

表单处理

Vue 提供 v-model 指令简化表单双向绑定：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" type="email" />
    <input v-model="form.password" type="password" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: ''
});

function handleSubmit() {
  console.log(form);
}
</script>

动画过渡

Vue 的 Transition 组件实现元素动画：

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="fade">
    <p v-if="show">Hello</p>
  </Transition>
</template>

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

自定义指令

创建自定义指令扩展功能：

// main.js
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

使用指令：

<input v-focus />