vue实现的例子

以下是几个基于 Vue.js 实现的典型示例，涵盖不同场景和技术要点：

基础计数器组件

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
}
</script>

表单双向绑定

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>实时预览: {{ message }}</p>
  </div>
</template>

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

动态列表渲染

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

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

组件间通信（Props + Events）

父组件:

<template>
  <child-component 
    :title="parentTitle" 
    @update-title="handleUpdate"
  />
</template>

<script>
import ChildComponent from './Child.vue'
export default {
  components: { ChildComponent },
  data() {
    return { parentTitle: '初始标题' }
  },
  methods: {
    handleUpdate(newTitle) {
      this.parentTitle = newTitle
    }
  }
}
</script>

子组件:

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('update-title', '新标题')
    }
  }
}
</script>

状态管理（Vuex）

Store 定义:

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

组件中使用:

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

这些示例覆盖了 Vue 的核心功能，包括数据绑定、组件化开发、状态管理等实际开发中的常见模式。