通过vue的单文件组件数据绑定、指令、事件对象、事件修饰符、计算属性、侦听器和样式绑定，写一份“学习计划表”

在Vue中创建一个简单的“学习计划表”，我们可以利用单文件组件(SFC)结构，结合数据绑定、指令、事件处理等特性。下面是一个基本的示例：

<!-- 学习计划表.vue -->
<template>
  <div class="learning-plan">
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>课程主题</th>
          <th>目标完成度</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(plan, index) in plans" :key="index">
          <td>{{ plan.date }}</td>
          <td><input type="text" v-model="plan.topic" /></td>
          <td>
            <span @click="updateCompletion(index)" .class="{ incomplete: plan.completion < 0.5 }">{{ plan.completion * 100 }}%</span>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addPlan">添加新计划</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plans: [
        { date: '2023-01-01', topic: '', completion: 0 },
      ],
    };
  },
  methods: {
    addPlan() {
      this.plans.push({ date: new Date(), topic: '', completion: 0 });
    },
    updateCompletion(index) {
      const newCompletion = prompt('请输入完成度(0-1)');
      if (newCompletion) {
        this.plans[index].completion = parseFloat(newCompletion);
      }
    },
  },
};
</script>

<style scoped>
.learning-plan table {
  width: 100%;
}
.incomplete {
  color: red;
}
</style>

在这个例子中：
- `v-model`用于数据绑定，将输入框的值关联到`plans`数组中的`topic`字段。
- `@click`指令绑定了`updateCompletion`方法，当点击百分比显示区域时，弹出提示输入完成度并更新状态。
- `.class="{ incomplete: plan.completion < 0.5 }"`实现了基于数据动态改变类名的样式绑定。
- `v-for`指令用于循环渲染学习计划行。
- `methods`里定义了添加新计划和修改完成度的方法。