Vue.js学习之路

今天学的是图片的点击预览，下面是源码和注释，方便理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<template>
    <view>
        <button type="primary" @click="getImg">选择图片按钮</button>
        {{url}}
        <!-- 在页面上渲染数据，展示多张图片 -->
        <!-- v-for是循环遍历出来每一个图片路径（对应一张图片） -->
        <image :src="item" mode="" v-for="item,index in imgArr" :key="index" @click="previewImg(item)"></image>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                // 存储获取到的数据
                imgArr:[]
            }
        },
        onLoad() {
        },
        methods: {
            // 这里展示两种方法
            // getImg(){
            //      uni.chooseImage(
            //  {
            //      success:res =>{
            //          console.log(res);
            //          this.url = res.tempFilePaths[0]
            //      }
            //  })
            // }
            getImg(){
                // 成功则返回图片的路径列表信息
                // 使用es6箭头函数=> 替代js写法 var that = this
                uni.chooseImage({
                    success:res=>{
                        console.log(res);
                        // 可能用户选择了多张图片，返回图片数组
                        // imgArr属性代表存储图片路径列表
                        this.imgArr = res.tempFilePaths
                    }
                })
            },
            // 直接展示预览图片，不要点击图片再触发
            previewImg(current){
                uni.previewImage({
                    current,
                    urls:this.imgArr,
                    loop:true
                })
            }
        }
    }
</script>
<style>
</style>

注意点：es6改进
小程序的var that = this
this指的是当前对象，只是一个指针，真正的对象存放在堆内存中，this的指向在程序执行的时候会发生变化，因此如果是需要在全局数据需要合适把this复制到变量里。
this作用域分析:
1.在整个页面对象里面，this关键字指代Page({})整个页面对象
2.因此可以通过this关键字访问或者重新设置Page({})整个页面对象里data的变量3.但是使用了API (如wx.request({})等)方法导致在api里没办法使用this来获取Page({})对象
Javascript之万法 (var that = this);
在api里没法直接使用this获取整个页面对象，但是可以api外面先把this存在某个变量中，所以就有了var that this 这个声明。
此时that指代整个页面对象，这样子就可以在api里使用that访问或者重新设置页面里data的变量。
当然 我们 可以使用 es6 箭头函数=>替代js的写法var that = this