构建vue单页应用(二)———做一个图片预览功能
1. npm install vue-image-swipe -D
2.vue 入口文件引入
import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)
3.index.vue页面中：
1 <template> 2 <div> 3 <div> 4 <ul> 5 <ol 6 :key="index" 7 @click="preview(index)" 8 v-for="(l, index) in images"> 9 <img :src="l" alt=""> 10 </ol> 11 </ul> 12 </div> 13 </div> 14 </template> 15 <script> 16 export default { 17 name: 'app', 18 data() { 19 return { 20 images: [ 21 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 22 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 23 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 24 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png', 25 'http://zhangxj-test.oss-cn-shanghai.aliyuncs.com/logoImg/010601/074a29b32e4e4641bc9e02a4c2acbfe0.png' 26 ] 27 } 28 }, 29 created() { 30 31 }, 32 methods: { 33 preview(index) { 34 this.$imagePreview({ 35 images: this.images, 36 index: index, 37 }) 38 } 39 } 40 } 41 </script> 42 <style scoped> 43 img{ 44 width:215px; 45 height:215px; 46 margin:5px 0px 0px 5px; 47 } 48 ol{ 49 display: inline-block; 50 width:225px; 51 height:225px; 52 margin: 10px; 53 background-repeat:no-repeat; 54 background-color:#fff; 55 cursor:pointer; 56 -moz-box-shadow:1px 1px 3px #000; 57 -webkit-box-shadow:1px 1px 3px #000; 58 box-shadow:1px 1px 3px #000; 59 } 60 </style>
页面显示效果：
4.改成接收后台接口返回的图片，需要在项目中假如axios
(1)安装axios:
npm install --save axios
(2)在main.js中引入axios
import axios from 'axios'(1.import...from...的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。2.可以加载各种各样的文件：.js、.vue、.less等等。3.可以省略掉from直接引入)
Vue.prototype.axios = axios(因为axios不是vue的，所以不能用vue.use(axios))
(3)在index.vue中就可以使用了
loadImage(){ this.axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred' } }); }
