1.Vue-在独立页面实现Vue的增删改查

题记

在独立页面实现Vue的增删改查，以下是具体的代码，和操作流程。

编写index.html页面

index.html文件如下：

复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Vue CRUD Example</title>
  <!--在线导入vue文件-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <meta charset="UTF-8">
</head>
<body>
  <!--这是一个Vue应用的根元素，id为"app"。
    在这个元素中，你可以构建和渲染Vue组件，实现动态的交互和数据绑定。-->
  <div id="app">
    <h1>学生列表</h1>
    <!--通过v-model指令与Vue实例中的searchQuery属性进行双向数据绑定。
      在输入框中输入内容时，searchQuery属性的值会自动更新，反之亦然-->
    <input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!--这是一个Vue的循环指令v-for，用于在表格中动态渲染学生列表。
        它会遍历filteredStudents数组中的每个元素，并为每个元素创建一个表格行。
        在每一行中，通过双花括号语法{{ student.name }}和{{ student.age }}来显示学生的姓名和年龄-->
        <tr v-for="(student, index) in filteredStudents" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>
            <!--这两个按钮都绑定了点击事件，
              当点击"编辑"按钮时，会调用editStudent方法，并传递当前学生的索引作为参数-->
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>添加/编辑学生</h2>
    <!--通过@submit.prevent指令，阻止表单默认的提交行为，
      以便在调用saveStudent方法时进行自定义处理-->
    <form @submit.prevent="saveStudent">
      <label>索引:</label>
      <span>{{editingIndex}}</span>&nbsp
      <label>姓名:</label>
      <!--通过v-model指令与Vue实例中的newStudent.name属性进行双向数据绑定-->
      <input type="text" v-model="newStudent.name" required>
      <label>年龄:</label>
      <input type="number" v-model="newStudent.age" required>
      <!--提交按钮的文本是根据editingIndex变量的值来确定的。
        如果editingIndex为null，表示当前是添加学生的操作，按钮文本为"添加"；
        如果editingIndex不为null，表示当前是编辑学生的操作，按钮文本为"保存"。-->
      <button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>
    </form>
  </div>

  <script>

    new Vue({
      el: '#app',
      //在data属性中，定义了一个名为students的数组，用于存储学生的信息
      data: {
        students: [
          { name: 'ngxe', age: 18 },
          { name: 'ng1', age: 20 },
          { name: 'ng2', age: 22 }
        ],
        // 还定义了一个newStudent对象，用于存储正在添加或编辑的学生的临时数据
        // editingIndex变量用于记录正在编辑的学生的索引。
        // searchQuery变量用于存储用户输入的查询关键字。
        newStudent: {
          name: '',
          age: ''
        },
        editingIndex: null,
        searchQuery: ''
      },
      // 在computed属性中，定义了一个名为filteredStudents的计算属性，
      // 它根据searchQuery的值对students数组进行过滤，
      // 如果searchQuery为空，则返回所有学生信息；否则，返回包含查询关键字的学生信息。
      computed: {
        filteredStudents() {
          if (this.searchQuery === '') {
            return this.students;
          } else {
            //使用Array的filter方法遍历students数组，并对每个学生对象的姓名进行判断
            //使用了箭头函数语法，表示对每个学生对象进行匿名函数的操作。
            //在函数体内部，使用了String的includes方法，
            //判断学生的姓名中是否包含了searchQuery属性的值（即用户输入的查询关键字）。
            //如果包含了，就将该学生对象保留在过滤后的数组中。
            return this.students.filter(student => {
              return student.name.includes(this.searchQuery);
            });
          }
        }
      },
      methods: {
        //saveStudent方法用于保存或更新学生信息。
        //通过判断editingIndex是否为null来确定当前是添加学生还是编辑学生的操作。
        //如果editingIndex为null，表示当前是添加学生的操作，将newStudent对象添加到students数组中。
        //如果editingIndex不为null，表示当前是编辑学生的操作，
        //将newStudent对象替换students数组中对应索引的学生信息。
        //将editingIndex重置为null，表示编辑操作已完成。
        //将newStudent对象重置为空对象，以清空输入框中的内容。
        saveStudent() {
          if (this.editingIndex === null) {
            // 添加学生
            this.students.push({ ...this.newStudent });
          } else {
            // 编辑学生
            this.students[this.editingIndex] = { ...this.newStudent };
            this.editingIndex = null;
          }
          this.newStudent = { name: '', age: '' };
        },
        //editStudent方法用于编辑学生信息。
        //当点击编辑按钮时，传入对应学生的索引作为参数。
        //在方法内部，将该学生的信息复制到newStudent对象中，以便在表单中显示出来。
        //同时，将editingIndex设置为该学生的索引，以标记当前正在编辑的学生。
        editStudent(index) {
          this.newStudent = { ...this.students[index] };
          this.editingIndex = index;
        },
        //在方法内部，使用splice方法从students数组中删除对应索引的学生信息。
        deleteStudent(index) {
          this.students.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Vue CRUD Example</title>
  <!--在线导入vue文件-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <meta charset="UTF-8">
</head>
<body>
  <!--这是一个Vue应用的根元素，id为"app"。
    在这个元素中，你可以构建和渲染Vue组件，实现动态的交互和数据绑定。-->
  <div id="app">
    <h1>学生列表</h1>
    <!--通过v-model指令与Vue实例中的searchQuery属性进行双向数据绑定。
      在输入框中输入内容时，searchQuery属性的值会自动更新，反之亦然-->
    <input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!--这是一个Vue的循环指令v-for，用于在表格中动态渲染学生列表。
        它会遍历filteredStudents数组中的每个元素，并为每个元素创建一个表格行。
        在每一行中，通过双花括号语法{{ student.name }}和{{ student.age }}来显示学生的姓名和年龄-->
        <tr v-for="(student, index) in filteredStudents" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>
            <!--这两个按钮都绑定了点击事件，
              当点击"编辑"按钮时，会调用editStudent方法，并传递当前学生的索引作为参数-->
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>添加/编辑学生</h2>
    <!--通过@submit.prevent指令，阻止表单默认的提交行为，
      以便在调用saveStudent方法时进行自定义处理-->
    <form @submit.prevent="saveStudent">
      <label>索引:</label>
      <span>{{editingIndex}}</span>&nbsp
      <label>姓名:</label>
      <!--通过v-model指令与Vue实例中的newStudent.name属性进行双向数据绑定-->
      <input type="text" v-model="newStudent.name" required>
      <label>年龄:</label>
      <input type="number" v-model="newStudent.age" required>
      <!--提交按钮的文本是根据editingIndex变量的值来确定的。
        如果editingIndex为null，表示当前是添加学生的操作，按钮文本为"添加"；
        如果editingIndex不为null，表示当前是编辑学生的操作，按钮文本为"保存"。-->
      <button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>
    </form>
  </div>

  <script>

    new Vue({
      el: '#app',
      //在data属性中，定义了一个名为students的数组，用于存储学生的信息
      data: {
        students: [
          { name: 'ngxe', age: 18 },
          { name: 'ng1', age: 20 },
          { name: 'ng2', age: 22 }
        ],
        // 还定义了一个newStudent对象，用于存储正在添加或编辑的学生的临时数据
        // editingIndex变量用于记录正在编辑的学生的索引。
        // searchQuery变量用于存储用户输入的查询关键字。
        newStudent: {
          name: '',
          age: ''
        },
        editingIndex: null,
        searchQuery: ''
      },
      // 在computed属性中，定义了一个名为filteredStudents的计算属性，
      // 它根据searchQuery的值对students数组进行过滤，
      // 如果searchQuery为空，则返回所有学生信息；否则，返回包含查询关键字的学生信息。
      computed: {
        filteredStudents() {
          if (this.searchQuery === '') {
            return this.students;
          } else {
            //使用Array的filter方法遍历students数组，并对每个学生对象的姓名进行判断
            //使用了箭头函数语法，表示对每个学生对象进行匿名函数的操作。
            //在函数体内部，使用了String的includes方法，
            //判断学生的姓名中是否包含了searchQuery属性的值（即用户输入的查询关键字）。
            //如果包含了，就将该学生对象保留在过滤后的数组中。
            return this.students.filter(student => {
              return student.name.includes(this.searchQuery);
            });
          }
        }
      },
      methods: {
        //saveStudent方法用于保存或更新学生信息。
        //通过判断editingIndex是否为null来确定当前是添加学生还是编辑学生的操作。
        //如果editingIndex为null，表示当前是添加学生的操作，将newStudent对象添加到students数组中。
        //如果editingIndex不为null，表示当前是编辑学生的操作，
        //将newStudent对象替换students数组中对应索引的学生信息。
        //将editingIndex重置为null，表示编辑操作已完成。
        //将newStudent对象重置为空对象，以清空输入框中的内容。
        saveStudent() {
          if (this.editingIndex === null) {
            // 添加学生
            this.students.push({ ...this.newStudent });
          } else {
            // 编辑学生
            this.students[this.editingIndex] = { ...this.newStudent };
            this.editingIndex = null;
          }
          this.newStudent = { name: '', age: '' };
        },
        //editStudent方法用于编辑学生信息。
        //当点击编辑按钮时，传入对应学生的索引作为参数。
        //在方法内部，将该学生的信息复制到newStudent对象中，以便在表单中显示出来。
        //同时，将editingIndex设置为该学生的索引，以标记当前正在编辑的学生。
        editStudent(index) {
          this.newStudent = { ...this.students[index] };
          this.editingIndex = index;
        },
        //在方法内部，使用splice方法从students数组中删除对应索引的学生信息。
        deleteStudent(index) {
          this.students.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>

打开页面

可以使用vscode的live server打开页面

展示图

后记

觉得有用可以点赞或收藏！