Vue 常用组件介绍博客

Vue 常用组件介绍博客

Vue 在实际开发过程中,离不开各种常用组件。合理使用组件可以大幅提升开发效率和代码可维护性。本文将介绍 Vue 中一些常用组件及其使用示例。

一、Button 按钮组件

使用场景

用于提交、触发事件、操作入口。

示例

html 复制代码
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了');
    }
  }
}
</script>

二、Input 输入框组件

使用场景

用于数据录入、搜索输入、表单提交。

示例

html 复制代码
<template>
  <input v-model="inputValue" placeholder="请输入内容" />
  <p>你输入的是:{{ inputValue }}</p>
</template>

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

三、Dialog 弹窗组件

使用场景

用于提示、确认、展示信息。

示例

html 复制代码
<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>

    <div v-if="showDialog" class="dialog">
      <p>这是一个弹窗</p>
      <button @click="showDialog = false">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
}
</script>

四、Tabs 标签页组件

使用场景

用于内容分类展示、页面切换。

示例

html 复制代码
<template>
  <div>
    <button @click="activeTab = 'A'">标签A</button>
    <button @click="activeTab = 'B'">标签B</button>

    <div v-if="activeTab === 'A'">
      内容A
    </div>
    <div v-if="activeTab === 'B'">
      内容B
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'A'
    };
  }
}
</script>

五、Table 表格组件

使用场景

用于数据展示、批量操作、数据管理。

示例

html 复制代码
<template>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ]
    };
  }
}
</script>

六、总结

Vue 组件化开发思想非常重要,常用组件包括:

  • 按钮(Button)
  • 输入框(Input)
  • 弹窗(Dialog)
  • 标签页(Tabs)
  • 表格(Table)

掌握这些组件的使用,有助于提升前端开发效率。在企业级项目中,还可以使用 UI 框架(如 Element UI、Ant Design Vue、Naive UI)来提供更加丰富和美观的组件。

相关推荐
MediaTea10 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~10 小时前
CSS——重排和重绘
前端
奶糖 肥晨10 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法10 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
belldeep11 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang11 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高00711 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
正义的大古11 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
Hashan11 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js