从vue到小程序mpvue，记录前端开发中遇到的的一些不适应（一）

【dom节点操作的失效

从vue转到mpvue开发，我最不适应的一点就是无法操作dom节点了

我们照常可以通过函数获取当前节点，如

<img v-for="(item, index) in imgLoadList" :key="index" :src="item" @load="imgOnLoad($event, item)" @error="imgOnLoadError($event, item)"/>

 函数可获取当前$event，并由此获得e.target的一些属性，但无法改写dom节点并进行任何操作，类似于word文档的只读模式

同样的，ref也无法在mpvue中被使用，当你合理正确的书写了ref用法

<img-loader ref="imgloader" v-if="imgList.length > 0" :loadUrl="loadUrl"></img-loader>

    setTimeout(() => {
      this.$refs.imgloader.load(this.bgImgUr)
    }, 5000)

 但是，在小程序中，永远会提示：

 

【html中无法进行一些js基本方法

 在vue中，我们经常以下面这种方式来显示变量

<p>{{str.reverse()}}</p>

// str = '哇好你'

 此时只能选取js来进行操作，再在html中引用

 

【class和style绑定对象

在vue中，可以如下绑定样式

html:
<p :class="obj"></p>
js:
data () {
    return {
        obj: {
            background: true
        }
    }
}
css:
.background{
    background: #fff;
}

 但是mpvue中不可以这样绑定，可以采取以下方法

<p :class="isBackground? 'background' : ''"></p>

data () {
    return {
        isBackground: true
    }
    // 可以在methods中操作isBackground变量
}

.background{
    background: #fff;
}

 

【background: url()

mpvue中除了不能操作dom节点之外，最让我哭笑不得的一个点就是没法给div设置包里的图片为背景图片，

只能用存在外部的链接图片来设置background，否则无效 

同时，由于小程序中没有图片宽高自适应，设置背景图片的同时也要明确给出宽高

 

【获取页面传递的参数

mpvue：

this.subject_id = this.$root.$mp.query.subjectId