構建vue單頁應用(二)———作一個圖片預覽功能

1. npm install vue-image-swipe -Djavascript

2.vue 入口文件引入css

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>

頁面顯示效果:vue

 

4.改爲接收後臺接口返回的圖片,須要在項目中假如axios
(1)安裝axios:
npm install --save axios

(2)在main.js中引入axiosjava

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'
        }
      });
    }
相關文章
相關標籤/搜索