Vue.js 2 项目实战(二):图书管理案例
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过采用易于上手的结构和强大的功能,使前端开发变得更加简便和高效。
·
前言
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过采用易于上手的结构和强大的功能,使前端开发变得更加简便和高效。以下是 Vue.js 的一些关键特性和优点:
核心特性
-
声明式渲染
- Vue.js 使用声明式语法来描述用户界面,数据和视图是双向绑定的。当数据变化时,视图会自动更新。
-
组件系统
- Vue.js 提供了一个灵活的组件系统,允许开发者将 UI 分解成可复用的组件,每个组件都有自己的逻辑和样式。
-
单文件组件 (SFC)
- Vue.js 允许开发者将 HTML、CSS 和 JavaScript 放在同一个
.vue
文件中,这样可以更容易地管理组件。
- Vue.js 允许开发者将 HTML、CSS 和 JavaScript 放在同一个
-
虚拟 DOM
- Vue.js 使用虚拟 DOM 来优化更新过程,通过最小化实际 DOM 操作来提高性能。
-
反应式数据绑定
- Vue.js 提供了响应式的数据绑定系统,使得数据与 DOM 之间的同步变得简单和高效。
-
指令
- Vue.js 提供了一组内置指令(如
v-bind
、v-model
和v-for
),帮助开发者轻松地操作 DOM。
- Vue.js 提供了一组内置指令(如
优点
-
易于上手
- 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>
更多推荐
已为社区贡献9条内容
所有评论(0)