采用vue3标准化实现js轮播图-优快云博客

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

枯燥的理论毫无意义，接下里直接上实战代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>相册-参考实现</title>
    
    <!-- css样式定义web网页 -->
    <style>
        /*清除浮动加伪元素*/
        .clear_ele::after {
            content: "";
            /* 这个伪元素的内容属性必须有 */
            display: block;
            clear: both;
        }
        /* 点击按键的样式 */
        .button {
            background-color: bisque;
            width: 20px;
            float: left;
            text-align: center;
            margin-right: 10px;
            border-radius: 8px;
            cursor: pointer;
        }
        /* 图片的样式 */
        .img {
            width: 480px;
            height: 240px;
            border: 1px bisque solid;
        }
        /* 定义边界 */
        .box {
            margin-bottom: 20px;
            padding: 0;
        }
    </style>
</head>
 
<body>
    <!-- 主体元素 -->
    <div id="app">
        <!-- 展示的第一段话 -->
         <!-- 采用vue3的标准定义 -->
        <h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>
        
        <!-- img里使用vue3 -->
         <!-- v-bind:src,绑定路径，可简化:src -->
        <img v-bind:src="img.url" class="img">
        <!-- 无序列表 -->
        <ul type="none" class="clear_ele box">
            <!-- 类似于: for i in 8: -->
             <!-- on:click，监听事件，可简化为@click -->
            <li v-for="(val, idx) in img.total" v-on:click="jump(val)" class="button">
                {{val}}
            </li>
        </ul>
        <!-- 这里采用vue3监听事件的简化用法 -->
        <button @click="prev">上一张</button> <button @click="next">下一张</button>
 
 
        <!-- 监控“下拉单选框”输入值的改变，动态更新数据 -->
        <h3>下拉选择，您要展示: 第{{ data.select }}张相片</h3>
        <!-- select提供菜单选项 -->
        <!-- v-model，双向监听 -->
         <!-- v-on:change，监听定义名为chage事件 -->
        <select v-model="data.select" v-on:change="handleChange">
            <!-- 定义列表选项 -->
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
 
    </div>
 
    <!-- 运用vue3需要指定模块化 -->
    <script type="module">
        // 三个常用的核心，需要加载vue.esm-browser.js文件
        import { createApp, ref, reactive } from './vue.esm-browser.js'
        
        // vue3定义函数
        createApp({
            // vue3开头
            setup() {
                
                // 【定义数据】
                const img = reactive({
                    total: 8,   // 图片文件夹里的图片总数 
                    number: 1,
                    url: "./img_src/logo1.png"
                })
 
                const data = reactive({
                    select: ""         //下拉框
                });
 
                // 【定义函数】
                //跳转
                const jump = (val) => {
                    img.number = val
                    img.url = `./img_src/logo${img.number}.png`
                }
 
                const handleChange = () => {
                    img.url = `./img_src/logo${data.select}.png`
                }
                //上一张
                const prev = () => {
                    img.number--
                    if (img.number == 0) {
                        img.number = img.total
                    }
                    img.url = `./img_src/logo${img.number}.png`
                }
                //下一张
                const next = () => {
                    img.number++
                    if (img.number > img.total) {
                        img.number = 1
                    }
                    img.url = `./img_src/logo${img.number}.png`
                }
                
                // 由于setup不具备闭口功能，需return完成闭环
                return { img, prev, next, jump, 
                            data, handleChange
                        }
            }
            // 将这里写好的功能绑定到指定位置
        }).mount("#app")
    </script>
</body>
 
</html>