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>


目录
打赏
0
0
0
0
81
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
73 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
71 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
59 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
59 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
45 16
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
vue学习第8章(vue的购物车案例)
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。本篇分享一个综合练习小demo,包括目录结构、HTML、JS及CSS代码,通过增删商品实现总价计算。关注我,获取更多前端知识!🎉🎉🎉
56 1
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
63 2
|
4月前
|
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
31 1
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进,体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能,Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担,还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟,我们有理由相信,Vue将继续为前端开发提供强大且易用的工具。
105 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等