【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