vue 实现 功能

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

数据绑定与响应式更新

通过v-model实现双向数据绑定，适用于表单输入：

<template>
  <input v-model="message" placeholder="输入内容">
  <p>{{ message }}</p>
</template>

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

条件渲染

使用v-if和v-show控制元素显示：

<template>
  <div v-if="isVisible">条件渲染内容</div>
  <button @click="toggleVisibility">切换显示</button>
</template>

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

列表渲染

v-for指令实现动态列表：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '项目1' },
        { name: '项目2' }
      ]
    }
  }
}
</script>

事件处理

通过v-on或@语法绑定事件：

<template>
  <button @click="handleClick">点击事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

组件通信

父子组件通过props和$emit通信：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMsg" @update="handleUpdate"/>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="$emit('update', newValue)">更新</button>
  </div>
</template>

状态管理（Vuex）

复杂应用中使用集中式状态管理：

// store.js
import Vuex from 'vuex'
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)

生命周期钩子

在特定阶段执行逻辑：

export default {
  created() {
    // 实例创建后调用
  },
  mounted() {
    // DOM挂载后调用
  },
  beforeDestroy() {
    // 实例销毁前清理
  }
}

路由管理（Vue Router）

实现单页面应用导航：

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

// 组件内导航
this.$router.push('/about')

以上示例覆盖了Vue开发中的核心功能实现方式，可根据具体需求组合使用这些技术点。