vue实现例子

Vue 实现示例

计数器应用

使用 Vue 3 的 Composition API 实现一个简单的计数器：

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

const count = ref(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

待办事项列表

实现一个基础的待办事项管理功能：

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

const newTodo = ref('')
const todos = ref([])

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push(newTodo.value)
    newTodo.value = ''
  }
}

function removeTodo(index) {
  todos.value.splice(index, 1)
}
</script>

表单验证示例

实现一个带有基本验证的表单：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>用户名:</label>
      <input v-model="form.username" @blur="validate('username')">
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label>邮箱:</label>
      <input v-model="form.email" @blur="validate('email')">
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

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

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

const errors = reactive({
  username: '',
  email: ''
})

function validate(field) {
  if (field === 'username' && !form.username) {
    errors.username = '用户名不能为空'
  } else if (field === 'email' && !/^\S+@\S+\.\S+$/.test(form.email)) {
    errors.email = '请输入有效的邮箱地址'
  } else {
    errors[field] = ''
  }
}

const isValid = computed(() => {
  return form.username && form.email && !errors.username && !errors.email
})

function submitForm() {
  console.log('表单提交:', form)
}
</script>

组件通信示例

父子组件之间的通信实现：

父组件 ParentComponent.vue：

<template>
  <ChildComponent 
    :message="parentMessage" 
    @update="handleUpdate"
  />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('来自父组件的消息')

function handleUpdate(newMessage) {
  parentMessage.value = newMessage
}
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <p>接收的消息: {{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script setup>
const props = defineProps({
  message: String
})

const emit = defineEmits(['update'])

function sendMessage() {
  emit('update', '来自子组件的新消息')
}
</script>

状态管理示例

使用 Pinia 进行状态管理：

store/counter.js：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

组件中使用：

<template>
  <div>
    <p>计数: {{ count }}</p>
    <p>双倍计数: {{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'
import { storeToRefs } from 'pinia'

const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore)
const { increment } = counterStore
</script>