Vue.js 2 项目实战（二）：图书管理案例

Suc2es2

于 2024-07-22 19:04:38 发布

阅读量216

点赞数 7

分类专栏： Vue.js 文章标签： vue.js 前端 javascript html5 css css3 前端框架

本文链接：https://blog.csdn.net/2302_82189125/article/details/140576993

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过采用易于上手的结构和强大的功能，使前端开发变得更加简便和高效。以下是 Vue.js 的一些关键特性和优点：

核心特性

声明式渲染
- Vue.js 使用声明式语法来描述用户界面，数据和视图是双向绑定的。当数据变化时，视图会自动更新。
组件系统
- Vue.js 提供了一个灵活的组件系统，允许开发者将 UI 分解成可复用的组件，每个组件都有自己的逻辑和样式。
单文件组件 (SFC)
- Vue.js 允许开发者将 HTML、CSS 和 JavaScript 放在同一个 .vue 文件中，这样可以更容易地管理组件。
虚拟 DOM
- Vue.js 使用虚拟 DOM 来优化更新过程，通过最小化实际 DOM 操作来提高性能。
反应式数据绑定
- Vue.js 提供了响应式的数据绑定系统，使得数据与 DOM 之间的同步变得简单和高效。
指令
- Vue.js 提供了一组内置指令（如 v-bind、v-model 和 v-for），帮助开发者轻松地操作 DOM。

优点

易于上手
- Vue.js 的学习曲线较低，适合新手入门，并且文档详细、社区活跃。
灵活性
- Vue.js 可以与现有项目集成，也可以用于构建复杂的单页面应用（SPA）。
性能高效
- 得益于虚拟 DOM 和响应式系统，Vue.js 在处理大量数据更新时表现出色。
生态系统
- Vue.js 拥有丰富的生态系统，包括 Vue Router、Vuex、Vue CLI 等工具和库，支持开发者在不同场景下使用。
强大的社区支持
- Vue.js 有一个全球活跃的社区，提供了大量的插件、教程和支持资源。

知识点

1. 插值语法

2. v-for 遍历渲染数组

3. @click 点击事件绑定方法

4. 定义方法

5. filter() 方法删除元素

项目效果

原始效果

点击任意删除按钮后

页面源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>小黑的书架</h1>
        <ul>
            <!-- v-for="item in booklist"：这是 Vue 的循环指令，用于基于 booklist 数组生成多个 <li> 元素。对于 booklist 中的每个元素，都会生成一个列表项。 -->
            <!-- :key="item"：这里应该是 :key="item.id"，因为 Vue 需要一个唯一的键值来识别列表中的每个元素。通常使用对象的 id 属性作为键值。 -->
            <li v-for="item in booklist" :key="item">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <!-- @click="del(item.id)"：这是一个事件监听器，当按钮被点击时，会调用 del 方法，并传递当前循环项的 id 属性作为参数 -->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
</body>
    <script>
        const app = new Vue({
            // el: '#app' 表示将 Vue 实例挂载到 HTML 页面中的一个 DOM 元素上
            el: '#app',
            // data: {} 是一个对象，包含了 Vue 实例的初始数据状态
            data: {
                booklist: [
                    { id: 1, name: '《红楼梦》', author: '曹雪芹'},
                    { id: 2, name: '《西游记》', author: '吴承恩'},
                    { id: 3, name: '《三国演义》', author: '罗贯中'},
                    { id: 4, name: '《水浒传》', author: '施耐庵'},
                ]
            },
            // 这是 Vue.js 组件中定义方法的开始标记。methods 是一个对象，其中的每个属性都是组件的方法
            methods: {
                del (id) {
                    // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
                    // 这是一个箭头函数，它接收数组中的每个元素作为参数（在这里是 item）。
                    // item.id !== id：这是一个比较操作，检查 item 的 id 属性是否不等于传递给 filter 方法的 id 参数。如果不等于，返回 true；如果等于，返回 false
                    this.booklist = this.booklist.filter(item => item.id !== id)
                }
            }
        })
    </script>
</html>