前端框架Vue3项目实战(基于Vue3实现一个小相册)

下面是是对Vue3操作的一个项目实战

下面代码是html的基本骨架（没有任何的功能）：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相册</title>

<style>

.box{

margin-bottom: 20px;

padding: 0;

}

.img{

width: 480px;

height: 240px;

border: 1px bisque solid;

}

</style>

</head>

<body>

<div id="app">

<h2>基于Vue3实现的相册：展示第xx张相片</h2>

<img src = "./img_src/logo1.png" class="img" alt="图片加载失败">

<ul type="none" class="box"></ul>

<button>上一张</button> <button>下一张</button>

</div>

<script type="module">

import { createApp, ref } from './vue.esm-browser.js'

</script>

</body>

</html>

运行结果：

接下来我们将添加代码使其变成一个小相册，运行结果如下图：

我们可以点击上一张或下一张来实现图片的跳转，也可以使用按钮1234来实现你想跳转的张数

【实现思路】

1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径

2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新

以下是实现相册的完整代码：

（注：红色代码为上述代码的添加或修改）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相册</title>

<style>

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

</head>

<body>

<div id="app">

<h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>

<img v-bind:src="img.url" class="img">

<ul type="none" class="clear_ele box">

<li v-for="(val, idx) in 4" @click="jump(val)" class="button"> {{val}} </li>

</ul>

<button @click="prev">上一张</button> <button @click="next">下一张</button>

</div>

<script type="module">

import { createApp, ref, reactive } from './vue.esm-browser.js'

createApp({

setup() {

// 【定义数据】

const img = reactive(

{

number: 1,

url: "./img_src/logo1.png"

}

)

// 【定义函数】

//上一张

const prev = () => {

img.number--

if (img.number == 0) {

img.number = 4

}

img.url = `./img_src/logo${img.number}.png`

}

//下一张

const next = () => {

img.number++

if (img.number == 5) {

img.number = 1

}

img.url = `./img_src/logo${img.number}.png`

}

//跳转

const jump = (val) => {

img.number = val

img.url = `./img_src/logo${img.number}.png`

}

return {img, prev,next,jump}

}

}).mount("#app")

</script>

</body>

</html>

还有另一种方法也同样可以实现相册的效果，代码如下：

下述代码的弊端就是比较冗长，相对于上一种方法会消耗更长时间，因为它是把每一张照片的使用结果一一敲出来的，可与上面代码比对

（注：橙色代码为最开始代码的添加或修改）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相册</title>

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

<h2>基于Vue3实现的相册：展示第{{img.index}}张相片</h2>

<img v-bind:src= "img.url" class="img" alt="图片加载失败">

<ul type="none" class="box clear_ele">

<li class="button" v-on:click = "show_1_img">1</li>

<li class="button" v-on:click = "show_2_img">2</li>

<li class="button" v-on:click = "show_3_img">3</li>

<li class="button" v-on:click = "show_4_img">4</li>

</ul>

<button v-on:click = "pre">上一张</button>

<button v-on:click = "next">下一张</button>

</div>

<script type="module">

import { createApp, reactive } from './vue.esm-browser.js'

createApp({

setup() {

const img = reactive(

{

index: 1,

url: "./img_src/logo1.png", //图片路径

}

)

const show_1_img = () => {

img.index = 1

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);

}

const show_2_img = () => {

img.index = 2

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);

}

const show_3_img = () => {

img.index = 3

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);

}

const show_4_img = () => {

img.index = 4

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);

}

const pre = () => {

img.index = img.index - 1

if(img.index < 1 ){

img.index = 4

}

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

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击了上一张按钮，显示第${img.index}张照片`);

}

const next = () => {

img.index = img.index + 1

if(img.index > 4 ){ // 图片展示完了，回到第一张

img.index = 1

}

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

img.url = `./img_src/logo${img.index}.png`

console.log(`用户点击了下一张按钮，显示第${img.index}张照片`);

}

return { img,

show_1_img,

show_2_img,

show_3_img,

show_4_img,

pre, next } //把数据（属性），函数（方法）暴露出来，供HTML模板调用

}

}).mount("#app")

</script>

</body>

</html>