在第一题创建的项目基础上，新建一个名为Demo.vue的组件，将其渲染到页面，组件内容要求： 定义一个数据，数据内容为： ！！（对应自己是哪个专业的就把哪一条数据的name属性值改成自己的名字） 要求使用v-for指令将列表渲染到页面，预期效果为：

在Vue.js中，首先你需要确保已经在项目结构中有一个合适的`components`文件夹用于存放自定义组件。要在项目基础上新建一个名为`Demo.vue`的组件，你可以按照以下步骤操作：

1. 打开`src/components`文件夹，如果不存在，则需要先创建它。

2. 创建一个新的`.vue`文件，并命名为`Demo.vue`，文件内容应如下所示：

<template>
  <div class="demo-container">
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <p>{{ item.name }} - 我是{{ item.specialty }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data() {
    return {
      // 替换 '张三' 和 '前端工程师' 为你自己的名字和专业
      data: [
        { name: '张三', specialty: '前端工程师' },
        {/* 添加更多条目，替换为你的信息 */}
        { name: '李四', specialty: '后端开发者' },
        /* ... */
      ],
    };
  },
};
</script>

<style scoped>
.demo-container {
  list-style-type: none;
  padding: 0;
}
</style>

在这个组件中，我们定义了一个`data`数组，其中包含每个成员的信息。通过`v-for`指令遍历这个数组，将每个对象的`name`和`specialty`属性显示在列表项中。

预期效果就是，在页面上会看到一个列表，每行包含一个人的名字和他们的专业。