vue简单功能实现

Vue 实现计数器功能

创建一个基础的计数器组件，包含增加、减少和重置功能。

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

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

Vue 实现待办事项列表

构建一个简单的待办事项管理功能，支持添加和删除任务。

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

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo)
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

Vue 实现表单验证

创建一个带有基本验证功能的表单组件。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>用户名:</label>
      <input v-model="username" type="text">
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <label>密码:</label>
      <input v-model="password" type="password">
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errors: {}
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.username) this.errors.username = '用户名不能为空'
      if (!this.password) this.errors.password = '密码不能为空'
      return Object.keys(this.errors).length === 0
    },
    submitForm() {
      if (this.validateForm()) {
        console.log('表单提交:', {
          username: this.username,
          password: this.password
        })
      }
    }
  }
}
</script>

Vue 实现条件渲染

使用v-if和v-show指令实现条件渲染功能。

<template>
  <div>
    <button @click="toggleShow">切换显示</button>
    <p v-if="isVisible">使用v-if渲染的内容</p>
    <p v-show="isVisible">使用v-show渲染的内容</p>
  </div>
</template>

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

Vue 实现计算属性

展示计算属性的基本用法，自动计算并缓存结果。

<template>
  <div>
    <input v-model="firstName" placeholder="名">
    <input v-model="lastName" placeholder="姓">
    <p>全名: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`.trim()
    }
  }
}
</script>

这些示例涵盖了Vue的核心功能，包括数据绑定、事件处理、条件渲染、列表渲染、表单处理和计算属性等基本概念。每个示例都可以直接复制到Vue项目中运行，适合初学者理解和实践Vue的基本功能实现。