前言
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. 创建 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">
<div>
<!-- :src 是 Vue 的绑定属性语法( v-bind 的缩写),它将 img 标签的 src 属性绑定到 list[index] 的值上 -->
<img :src="list[index]" alt="">
</div>
<!-- @click 是 Vue 的事件绑定语法( v-on 的缩写),当按钮被点击时,会执行 index++/index-- 操作,即将 index 增加 1/减少 1 -->
<!-- v-show 指令用于根据条件显示或隐藏元素 -->
<button @click="index++" v-show="index < 4">下一页</button>
<button @click="index--" v-show="index > 0">上一页</button>
</div>
</body>
<script>
const app = new Vue({
// el: '#app' 表示将 Vue 实例挂载到 HTML 页面中的一个 DOM 元素上
el: '#app',
// data: {} 是一个对象,包含了 Vue 实例的初始数据状态
data: {
// 指定起始页图片
index: 0,
// 图片以列表形式存放
list: [
'./static/img/Advanced Mathematics.jpg',
'./static/img/CTF.jpg',
'./static/img/Hacker-1.jpg',
'./static/img/Handsome.jpg',
'./static/img/Network.jpg'
]
}
})
</script>
</html>