Vue.js 项目组件

本页面提供了关于 Vue.js 项目中常用的组件介绍和示例。以下是一些常用的 Vue.js 组件：

• 导航栏
• 表单输入
• 列表展示

导航栏

导航栏组件通常用于在页面上提供顶部导航功能。

<template>
  <nav>
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/about">关于我们</router-link></li>
      <li><router-link to="/contact">联系方式</router-link></li>
    </ul>
  </nav>
</template>

导航栏示例

表单输入

表单输入组件用于收集用户输入的数据。

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" placeholder="请输入您的名字" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log('提交的数据:', this.formData);
    }
  }
};
</script>

表单输入示例

列表展示

列表展示组件用于展示一系列数据。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目一' },
        { id: 2, name: '项目二' },
        { id: 3, name: '项目三' }
      ]
    };
  }
};
</script>

列表展示示例

更多信息，请访问我们的Vue.js 教程页面。