mpvue的用法总结(vue与小程序中的语法支持)
1.包含vue与小程序的生命周期
推荐:除特殊情况外,不建议使用小程序的生命周期钩子
注意:1)在小程序onReady后,才会触发vue mounted生命周期
2)不要在选项属性上使用箭头函数(比如created(){} 或者 created:function(){} 被写成了 created:()=>{})
3)不要在回调函数中使用箭头函数(比如vm.$watch('a', newValue => this.myMethod()))
2.几乎全支持vue中的模板方法
vue的模板方法详情:https://cn.vuejs.org/v2/guide/syntax.html
3.支持vue中的计算属性
vue的计算属性详情:https://cn.vuejs.org/v2/guide/computed.html
4.支持vue中的条件渲染(v-if/v-show)
vue的条件渲染详情:https://cn.vuejs.org/v2/guide/conditional.html
5.支持vue中的列表渲染(v-for)
vue的列表渲染详情:https://cn.vuejs.org/v2/guide/list.html
注意:**嵌套列表渲染,必须指定不同的索引!**
6.支持vue中的所有事件处理器
vue的事件处理器详情:https://cn.vuejs.org/v2/guide/events.html
注意:
7.支持vue中的表单控件绑定
vue的表单控件绑定详情:https://cn.vuejs.org/v2/guide/forms.html
推荐:开发过程中直接使用微信小程序中的表单组件:
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
注意: (表单元素 radio 用 radio-group 组件进行代替)
8.支持vue中的组件和小程序的原生组件
注意:1)小程序中的原生组件上的事件绑定,需要以vue的事件绑定语法来绑定,
如 `bindchange="eventName"` 事件,需要写成 `@change="eventName"`
2)使用vue中的组件时,有且只能使用单文件组件(.vue 组件)的形式进行支持,其他的诸如:动态组件,自 定义 render,和`<script type="text/x-template">` 字符串模版等都不支持。
9.不支持列表
1)小程序里所有的 BOM/DOM 都不能用(没有document、window等对象,所有的操作通过数据来实现,使用setData去改变视图),所以说**不能使用v-html指令**。vue是可以操作BOM和DOM的(可以获取wimdow执行操作,可以使用$refs去获取DOM)。
2)不支持复杂的JS渲染表达式
小程序目前所支持的表达式可看:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
不支持类似“<p>{{ message.split('').reverse().join('') }}</p>”这种,建议写成computed
3)不支持过滤器(vue是支持过滤器的,小程序不支持)
4)不支持函数(不支持在 template 内使用 methods 中的函数。(vue中自己试了一下也没有这种写法))
5)不支持Class和Style绑定的classObject和styleObject语法也不支持在组件上使用 Class 与 Style 绑定。
vue中的class和style绑定语法可参考:https://cn.vuejs.org/v2/guide/class-and-style.html