1. 项目概述

本教程旨在通过构建一个学生列表应用，帮助读者从零开始学习Vue.js框架。我们将实现一个简单的学生信息管理页面，包含学生信息的展示和增删改查功能。通过这个项目，读者将深入了解Vue的数据绑定和动态渲染技巧。

2. 准备工作

在开始这个项目之前，请确保您具备以下基础：

  • HTML、CSS和JavaScript知识
  • 对Vue.js有基本了解

此外，您还需要引入Vue.js库到您的项目中。可以使用以下CDN链接引入Vue2：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

3. 创建项目结构

首先，创建一个基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<body>
    <div id="app">
        <!-- 学生列表展示 -->
        <h1>学生列表</h1>
        <ul>
            <li v-for="(student, index) in students" :key="index">
                {{ student.name }} - {{ student.age }} - {{ student.gender }}
            </li>
        </ul>
        <!-- 添加学生信息 -->
        <h2>添加学生信息</h2>
        <form @submit.prevent="addStudent">
            <input type="text" v-model="newStudent.name" placeholder="姓名">
            <input type="number" v-model.number="newStudent.age" placeholder="年龄">
            <select v-model="newStudent.gender">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
            <button type="submit">添加</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

4. 实现Vue实例

接下来，创建一个名为app.js的JavaScript文件，并实现Vue实例：

new Vue({
    el: '#app',
    data: {
        students: [
            { name: '张三', age: 20, gender: 'male' },
            { name: '李四', age: 21, gender: 'female' }
        ],
        newStudent: {
            name: '',
            age: null,
            gender: ''
        }
    },
    methods: {
        addStudent() {
            if (this.newStudent.name && this.newStudent.age && this.newStudent.gender) {
                this.students.push({ ...this.newStudent });
                this.newStudent = { name: '', age: null, gender: '' };
            } else {
                alert('请填写完整信息！');
            }
        }
    }
});

5. 数据绑定与动态渲染

在上面的代码中，我们使用了Vue的数据绑定和动态渲染功能：

  • 使用v-for指令遍历students数组，将每个学生信息渲染到列表中。
  • 使用v-model指令实现表单输入与数据模型的双向绑定。
  • 使用@submit.prevent事件监听表单提交事件，并在addStudent方法中处理添加学生信息的功能。

6. 总结

通过本教程，您已经成功实现了一个简单的学生列表应用，并掌握了Vue的数据绑定和动态渲染技巧。这些技能将在您后续的Vue.js开发实践中发挥重要作用。

接下来，您可以根据自己的需求扩展这个应用，例如添加编辑和删除学生信息的功能。祝您学习愉快！