vue入门demo

1.App.vue

<template>
  <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="age" label="年龄"> </el-table-column>
    <el-table-column prop="classroom" label="班级"> </el-table-column>
    <el-table-column>
      <template v-slot="scope">
        <el-button @click="handleClick(scope.row.id)" type="text" size="small"
          >删除</el-button
        >
      </template>
    </el-table-column>
    <el-table-column>
      <template v-slot="scope">
        <el-button @click="handleUpdate(scope.row)" type="text" size="small"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="收货地址" v-model="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" :label-width="formLabelWidth">
        <el-input v-model="form.classroom" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div :v-slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        age: "",
        classroom: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // axios.get('https://console-mock.apipost.cn/app/mock/project/a5027cdc-f1af-4dd2-acf1-d7298d2eb3e1/hello/list')
      axios.get("http://192.168.10.18:8080/hello/list").then((res) => {
        console.log(res.data);
        this.tableData = res.data;
        console.log(res);
      });
    },

    handleClick(id) {
      console.log(id);
      axios
        .get(`http://192.168.10.18:8080/hello/remove?id=${id}`)
        .then((res) => {
          console.log(res.status);
          this.getData();
        });
    },
    handAdd() {
      console.log(this.form, 6666);
      this.dialogFormVisible = false;
      if (this.form.name) {
        axios
          .post("http://192.168.10.18:8080/hello/edit", this.form)
          .then((res) => {
            console.log(res.status);
            this.getData();
            this.form = { name: "", age: "", classroom: "" };
          });
      } else {
        axios
          .post("http://192.168.10.18:8080/hello/add", this.form)
          .then((res) => {
            console.log(res.status);
            this.getData();
          });
      }
    },
    handleUpdate(e) {
      this.dialogFormVisible = true;
      this.form = e;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>