Vue app 是一種流行的前端框架，適用于構建交互式網站和應用程序。在 Vue app 中，我們可以輕松地添加照片并與用戶交互。

在 Vue app 中添加照片非常簡單。我們可以利用 Vue app 的組件化框架來創建一個照片組件，然后將其添加到我們的應用程序中。下面是一個簡單的照片組件示例：

<template>
<div>
<img :src="photoSrc" :alt="photoAlt" @click="openModal" />
<modal v-if="showModal" :photoSrc="photoSrc" :photoAlt="photoAlt" @close="closeModal" />
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
name: 'Photo',
components: { Modal },
props: {
photoSrc: String,
photoAlt: String
},
data() {
return {
showModal: false
}
},
methods: {
openModal() {
this.showModal = true
},
closeModal() {
this.showModal = false
}
}
}
</script>

在上面的示例中，照片組件會顯示一張圖片，并在用戶單擊時打開模態框。模態框組件用于顯示圖片的詳細信息。下面是該組件的示例：

<template>
<div class="modal">
<div class="modal__content">
<img :src="photoSrc" :alt="photoAlt" />
</div>
<button class="modal__close" @click="$emit('close')">Close</button>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
photoSrc: String,
photoAlt: String
}
}
</script>

如您所見，模態框組件非常簡單，只需要顯示圖片并提供一個關閉按鈕。當關閉按鈕單擊時，該組件會隱藏。

通過使用 Vue app，我們可以輕松地為我們的應用程序添加照片和交互功能。Vue app 的組件化架構使得添加新功能非常容易，同時確保應用程序保持清晰和易于維護。