element vue

作者：死亡之神发布日期:2025-02-23 浏览:121

<template>
  <div>
    <!-- 这是一个使用 Element UI 的 Vue 组件示例 -->
    <el-button type="primary" @click="handleClick">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: 'ElementVueExample',
  methods: {
    handleClick() {
      this.$message({
        message: '你点击了按钮!',
        type: 'success'
      });
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

解释说明：

模板部分 (<template>)：定义了一个包含 el-button 按钮的简单 Vue 组件。el-button 是来自 Element UI 的组件，用于创建一个按钮。
脚本部分 (<script>)：定义了组件的行为逻辑。handleClick 方法会在按钮被点击时触发，并使用 $message 全局方法显示一个成功消息。
样式部分 (<style scoped>)：可以在这里为组件添加特定的样式，scoped 属性确保样式仅应用于当前组件。

如果你需要更多关于 Element UI 的信息，可以参考 Element UI 官方文档。

上一篇：vue3全局变量

下一篇：vue3 ref和reactive的区别