项目实战：基于Vue3实现一个小相册

                                相册的示例效果图

注意看注释...

  CSS部分：

<style>
        /* 伪元素选择器，用于在具有clear_ele类的元素内部的末尾添加一个新的元素 */
        .clear_ele::after{  
            content: "";  /* 这个伪元素的内容属性必须有 */
            /* 块级元素，便于占据一行空间 */
            display: block;
            clear: both;    /* 清除浮动 */
        }

        .box{
            margin-bottom: 20px;
            padding: 0;
        }

        .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;
        }
    </style>

HTML部分： 

        按照示例图做出一个简单的框架。利用v-bind绑定图片的路径，使得图片路径可以自动更新。通过v-on（@）为切换相片的按钮绑定一个函数，这个函数负责更改图片路径。

    <div id="app">
         <!--  利用插值运算符显示img.number --> 
        <h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>

        <!--  <img>标签通过v-bind绑定了图片的地址为img.url。 -->        
        <img v-bind:src="img.url"   class="img"> 
        <ul type="none" class="clear_ele box">
            <!-- 列表通过v-for指令生成4个li元素，通过v-on绑定，
            点击button时调用jump函数，并且显示val的值 -->
            <li v-for="(val, idx) in 4"  @click="jump(val)" class="button"> {{val}} </li>
        </ul>
        <!-- 通过@click绑定prev和next函数，用于切换上一张和下一张图片 -->
        <button @click="prev">上一张</button>     <button @click="next">下一张</button>
    </div>

JavaScript部分（Vue相关）：

        把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变。

    <script type="module">
        // 通过import语句导入createApp,  ref,  reactive
        import { createApp,  ref,  reactive } from './vue.esm-browser.js'

        createApp({
            setup() {

                // 【定义数据】
                // 通过reactive函数创建一个响应式对象img，并设置图片的属性
                const img = reactive(
                    {
                        number: 1,    // 图片的序号
                        url: "./img_src/logo1.png"    // 图片的源地址
                    }
                )

                // 【定义函数】
                //上一张
                const prev = () => {
                    img.number--
                    // 当图片序号为0时，切换到第4张图片
                    if (img.number == 0) {
                        img.number = 4
                    }
                    img.url = `./img_src/logo${img.number}.png`                 
                }                
                //下一张
                const next = () => {
                    img.number++
                    // 当图片序号为5时，切换到第1张图片
                    if (img.number == 5) {
                        img.number = 1
                    }
                    img.url = `./img_src/logo${img.number}.png`
                }
                //跳转
                //根据传入的val值跳转到相应的图片
                const jump = (val) => {
                    img.number = val
                    img.url = `./img_src/logo${img.number}.png`
                }
                //记得每一个对象和方法都要暴露出来
                return {img, prev,next,jump}
            }
        }).mount("#app")
    </script>