Vue.js 2 项目实战(二):图书管理案例

简介: Vue.js 2 项目实战(二):图书管理案例

前言

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

核心特性

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

优点

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

知识点

1. 创建 Vue 实例

2. v-bind 数据绑定

3. @click 点击事件绑定

4. v-show 显示或隐藏元素

项目效果

原始效果

点击任意删除按钮后

页面源代码

<!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>


相关文章
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
292 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
404 17
|
7月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
233 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
333 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
7月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
287 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
7月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
299 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
7月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
212 16
|
10月前
|
分布式计算 JavaScript 前端开发
vue学习第8章(vue的购物车案例)
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。本篇分享一个综合练习小demo,包括目录结构、HTML、JS及CSS代码,通过增删商品实现总价计算。关注我,获取更多前端知识!🎉🎉🎉
111 1