运用vue开发基础知识，实现添加学生5门科目的成绩，并计算出平均值，涉及到的姓名，班级用自己的信息，具体要求如下: 点击添加成绩，可从课程数据数组中，选择一门课添加，成绩随机生成一门成绩添加成功后，将本门课程从课程数组中删除，下次不可再选择!点击删除成绩，将本门课程重新添加至课程数字中，下次可添加该门课. 5072101 2 3 当课程数组中的课程全部添加完成后，提示，无课程添加: 5当页面中，没有成绩时，点击删除成绩提示，无成绩可删除

首先，我们需要定义一个Vue组件来实现这个功能。该组件应该包含以下数据和方法：

data: {
  students: [], // 学生列表
  courses: ["语文", "数学", "英语", "物理", "化学"], // 课程列表
  scores: [] // 成绩列表
},
methods: {
  addScore: function() {
    // 从课程列表中随机选择一门课程
    var courseIndex = Math.floor(Math.random() * this.courses.length);
    var course = this.courses[courseIndex];
    
    // 在0-100之间生成一个随机成绩
    var score = Math.floor(Math.random() * 101);
    
    // 查找第一个没有该课程成绩的学生
    var studentIndex = -1;
    for (var i = 0; i < this.students.length; i++) {
      if (!this.hasScore(this.students[i], course)) {
        studentIndex = i;
        break;
      }
    }
    
    // 如果所有学生都已经有了该课程成绩，则提示无课程可添加
    if (studentIndex === -1) {
      alert("无课程可添加");
      return;
    }
    
    // 将成绩添加到该学生的成绩列表中
    this.students[studentIndex].scores.push({
      course: course,
      score: score
    });
    
    // 将该课程从课程列表中删除
    this.courses.splice(courseIndex, 1);
    
    // 将该成绩添加到成绩列表中
    this.scores.push({
      student: this.students[studentIndex].name,
      course: course,
      score: score
    });
  },
  
  removeScore: function() {
    // 如果没有成绩，则提示无成绩可删除
    if (this.scores.length === 0) {
      alert("无成绩可删除");
      return;
    }
    
    // 获取最后一个成绩的课程名称
    var course = this.scores[this.scores.length - 1].course;
    
    // 将该课程添加回课程列表中
    this.courses.push(course);
    
    // 从最后一个学生的成绩列表中删除该成绩
    var student = this.students[this.students.length - 1];
    var scores = student.scores;
    for (var i = 0; i < scores.length; i++) {
      if (scores[i].course === course) {
        scores.splice(i, 1);
        break;
      }
    }
    
    // 从成绩列表中删除该成绩
    this.scores.pop();
  },
  
  hasScore: function(student, course) {
    // 检查该学生是否已经有了该课程成绩
    var scores = student.scores;
    for (var i = 0; i < scores.length; i++) {
      if (scores[i].course === course) {
        return true;
      }
    }
    return false;
  },
  
  getAverageScore: function(student) {
    // 计算该学生的平均成绩
    var scores = student.scores;
    var sum = 0;
    for (var i = 0; i < scores.length; i++) {
      sum += scores[i].score;
    }
    return sum / scores.length;
  }
}

然后，我们需要在模板中使用这些数据和方法来呈现学生列表、成绩列表和课程列表。模板应该包含以下内容：

<div>
  <h2>添加成绩</h2>
  <button @click="addScore">添加成绩</button>
  <button @click="removeScore">删除成绩</button>
  <p v-if="courses.length === 0">无课程可添加</p>
  <p v-if="scores.length === 0">无成绩</p>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>班级</th>
        <th v-for="course in courses">{{ course }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students">
        <td>{{ student.name }}</td>
        <td>{{ student.class }}</td>
        <td v-for="course in courses">
          <span v-if="hasScore(student, course)">{{ getScore(student, course) }}</span>
          <span v-else>-</span>
        </td>
      </tr>
    </tbody>
  </table>
  <h2>成绩列表</h2>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>课程</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="score in scores">
        <td>{{ score.student }}</td>
        <td>{{ score.course }}</td>
        <td>{{ score.score }}</td>
      </tr>
    </tbody>
  </table>
</div>

最后，我们需要在Vue实例中创建学生列表，并将组件挂载到页面上：

new Vue({
  el: "#app",
  data: {
    students: [
      { name: "张三", class: "一年级", scores: [] },
      { name: "李四", class: "二年级", scores: [] },
      { name: "王五", class: "三年级", scores: [] },
      { name: "赵六", class: "四年级", scores: [] },
      { name: "钱七", class: "五年级", scores: [] }
    ]
  },
  components: {
    'score-manager': {
      data: {
        // ...
      },
      methods: {
        // ...
      },
      template: `
        <div>
          <!-- ... -->
        </div>
      `
    }
  }
});

这样，我们就完成了一个基于Vue的添加学生成绩的应用程序。