引言
Vue.js入门
1. 安装Vue.js
首先，我们需要安装Vue.js。可以通过以下命令安装：
npm install vue
或者通过CDN引入：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2. 创建Vue实例
在HTML中引入Vue.js后，我们可以创建一个Vue实例：
<div id="app">
<img :src="imageSrc" alt="动态图片">
</div>
<script>
new Vue({
el: '#app',
data: {
imageSrc: 'default.jpg'
}
})
</script>
动态图片制作
1. 图片切换
<div id="app">
<img :src="imageSrc" alt="动态图片">
<button @click="changeImage">切换图片</button>
</div>
<script>
new Vue({
el: '#app',
data: {
imageSrc: 'default.jpg',
images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
},
methods: {
changeImage() {
const currentIndex = this.images.indexOf(this.imageSrc);
this.imageSrc = this.images[currentIndex + 1] || this.images[0];
}
}
})
</script>
2. 图片加载
<img v-once :src="imageSrc" alt="动态图片">
3. 动画效果
<transition name="fade">
<img :src="imageSrc" alt="动态图片" v-show="imageSrc">
</transition>