vue+elementui

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

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

    <!-- 使用 Element UI 的表格组件 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '', // 输入框的绑定值
      tableData: [ // 表格的数据
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    };
  },
  methods: {
    handleClick() {
      // 按钮点击事件处理函数
      alert('你点击了按钮');
    }
  }
};
</script>

<style>
/* 自定义样式 */
#app {
  margin: 20px;
}
</style>

解释说明

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

   • 使用了 el-button、el-input 和 el-table 组件，这些是 Element UI 提供的基础组件。
   • el-button 是一个按钮组件，绑定了一个点击事件 @click="handleClick"。
   • el-input 是一个输入框组件，使用 v-model 双向绑定数据到 inputValue。
   • el-table 是一个表格组件，展示了 tableData 中的数据，并设置了列的属性。

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

   • 定义了一个 Vue 组件，包含 data 和 methods。
   • data 中定义了 inputValue 和 tableData，分别用于存储输入框的值和表格的数据。
   • methods 中定义了 handleClick 方法，当按钮被点击时会触发这个方法并弹出一个提示框。

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

   • 简单地为整个应用添加了一些外边距。