前端框架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>