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


目录
打赏
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助理

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