vue怎么实现功能

Vue.js 实现功能通常涉及组件化开发、状态管理、生命周期钩子等核心概念。以下是常见功能的实现方式：

组件化开发

创建 .vue 单文件组件，包含 <template>、<script> 和 <style> 三部分。通过 props 接收父组件数据，$emit 触发父组件事件。

<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<script>
export default {
  props: ['buttonText'],
  methods: {
    handleClick() {
      this.$emit('button-clicked');
    }
  }
}
</script>

状态管理

简单场景使用 data 属性，复杂应用可引入 Vuex 或 Pinia。

// Vuex 示例
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

生命周期钩子

利用 created、mounted 等钩子执行特定逻辑。

export default {
  created() {
    console.log('组件实例已创建');
  },
  mounted() {
    this.fetchData();
  }
}

路由功能

使用 Vue Router 实现页面导航。

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

表单处理

v-model 实现双向数据绑定。

<template>
  <input v-model="username" placeholder="输入用户名">
</template>

<script>
export default {
  data() {
    return { username: '' }
  }
}
</script>

API 请求

结合 axios 或 fetch 进行数据获取。

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      console.error(error);
    }
  }
}