vue element ui

<template>
  <div id="app">
    <!-- Element UI 的按钮组件 -->
    <el-button type="primary" @click="handleClick">点击我</el-button>

    <!-- Element UI 的输入框组件 -->
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '' // 输入框的绑定值
    };
  },
  methods: {
    handleClick() {
      // 按钮点击事件处理函数
      this.$message({
        message: '你点击了按钮!',
        type: 'success'
      });
    }
  }
};
</script>

<style>
/* 引入 Element UI 的样式 */
@import "~element-ui/lib/theme-chalk/index.css";
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 el-button 和 el-input 组件，分别表示一个按钮和一个输入框。
   • el-button 绑定了一个点击事件 @click="handleClick"，当用户点击按钮时会触发 handleClick 方法。
   • el-input 使用了 v-model 指令与 inputValue 数据进行双向绑定。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数，返回一个对象，其中包含 inputValue，用于存储输入框的值。
   • 定义了一个 methods 对象，其中包含 handleClick 方法，该方法会在按钮被点击时执行，并弹出一个成功提示信息。

3. 样式部分 (<style>):

   • 引入了 Element UI 的默认样式文件，确保组件的样式正常显示。