一、 實驗目標：
1.掌握使用Vue-CLI腳手架工具在自己的電腦上建立項目，并會運行調試工具。
2.理解組件化開發思想。
3.圖片輪播手機網頁。

二、 實驗內容：
1.要求使用Vue-CLI腳手架工具搭建一個Web項目vue-photo（本次實驗必須用Vue-CLI腳手架搭建項目）。實驗報告要求將項目文件結構截圖，并簡單介紹。
2.參照源碼效果，實現一個圖片輪播預覽的手機網頁。使用Vue組件編程方法完成主要功能，具體使用的編程技術不限。
3.功能上要求實現最基本的指定圖片瀏覽功能。
4.自選擴展實驗：模仿手機上的相機圖片預覽功能，實現手機內圖片預覽。本條內容根據自己的學習情況，可選做。

截圖展示：

主要代碼及實現方法簡介：
Style.css

body {background-color: #9fe49f;padding: 50px; }.heading {text-align: center; } .heading h1 {background: -webkit-linear-gradient(#fff, #6a06f5);-webkit-text-fill-color: transparent;text-align: center;margin: 0 0 5px 0;font-weight: 900;font-size: 4rem;color: #fff; } .heading h4 {color: #cf283f;text-align: center;margin: 0 0 35px 0;font-weight: 400;font-size: 24px; }.container {margin-left: 30%;padding: 20px;background-color: rgb(167, 192, 209);border-radius: 8px;max-width: 800px;box-shadow: 0 5px 12px #0000007a; }.vueGallery .activePhoto {width: 100%;margin-bottom: 5px;padding-bottom: 65%;background-size: cover;background-position: center;background-repeat: no-repeat;border: 2px solid rgb(228, 225, 225);position: relative; } .vueGallery .activePhoto button {border: none;background-color: transparent;font-size: 32px;color: #fff;opacity: 0.5;position: absolute;outline: none;height: 100%; } .vueGallery .activePhoto button:hover {opacity: 1; } .vueGallery .activePhoto button.previous {padding: 0 1em 0 0.7em;left: 0;background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); } .vueGallery .activePhoto button.next {padding: 0 0.7em 0 1em;right: 0;background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); } .vueGallery .thumbnails {display: grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));grid-gap: 5px; } .vueGallery .thumbnails div {width: 100%;border: 2px solid #fff;outline: 2px solid #fff;cursor: pointer;padding-bottom: 65%;background-size: cover;background-position: center;background-repeat: no-repeat;opacity: 1; } .vueGallery .thumbnails div:hover {opacity: 0.6; } .vueGallery .thumbnails div.active {outline-color: #5c4084;opacity: 1; }

Vuegallery.vue

<template><div class="vueGallery"><div class="activePhoto" :style="'background-image: url('+photos[activePhoto]+')'"><button type="button" aria-label="Previous Photo" class="previous" @click="previousPhoto()"><i class="fas fa-chevron-circle-left"></i></button><button type="button" aria-label="Next Photo" class="next" @click="nextPhoto()"><i class="fas fa-chevron-circle-right"></i></button></div><div class="thumbnails"><divv-for="(photo, index) in photos":src="photo":key="index"@click="changePhoto(index)":class="{'active': activePhoto == index}" :style="'background-image: url('+photo+')'"></div></div></div></template><script> export default {name:'VueGallery',props: {photos:{ //父組件向子組件傳值,通過設置props屬性 type :Array,default:()=>[] /*default: function () {return []}*/}},data: function () {return {activePhoto: null}},mounted () {this.changePhoto(0)document.addEventListener("keydown", (event) => {if (event.which == 37)this.previousPhoto()if (event.which == 39)this.nextPhoto()})},methods: {changePhoto (index) {this.activePhoto = index},nextPhoto () {this.changePhoto( this.activePhoto+1 < this.photos.length ? this.activePhoto+1 : 0 )},previousPhoto () {this.changePhoto( this.activePhoto-1 >= 0 ? this.activePhoto-1 : this.photos.length-1 )}} } </script>

Photo.vue

<template> <div class="container"><vue-gallery :photos="photos"></vue-gallery> <!--綁定屬性photos，這里簡寫--> </div> </template><script>import VueGallery from '@/components/VueGallery.vue'export default {name: 'Photo',components: {VueGallery},data: function () { //return {photos: [require('../assets/img/xm1.jpg'), //vue中background-image圖片路徑問題,動態路徑，可以使用require()返回圖片路徑。require('../assets/img/xm2.jpg'),require('../assets/img/xm3.jpg'),require('../assets/img/xm4.jpg'),require('../assets/img/xm5.jpg'),require('../assets/img/xm6.jpg')]}}} </script>

App.vue

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link>|<router-link to="/photo"> Photo</router-link></div><router-view/></div> </template><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #80b9f1; }#nav {padding: 30px; }#nav a {font-weight: bold;color: #0c4177; }#nav a.router-link-exact-active {color: #29e9f7; }</style>

三、 心得體會：
1、 進一步學習了使用vue_cli腳手架搭建web項目
2、 熟悉了vue使用開發
3、 實現了圖片輪播預覽，加強了代碼能力
4、 學習了組件化開發

總結

以上是生活随笔為你收集整理的移动应用开发——实验四的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。