mpvue的用法总结(vue与小程序中的语法支持)

mpvue的用法总结(vue与小程序中的语法支持)
| 导语 学习mpvue的第二天,对于其语法有了初步认识
 

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 组件进行代替

                         select 组件用 picker 组件进行代替

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中自己试了一下也没有这种写法))

            

            解决方法:https://dxinef.github.io/2019/05-10-Mpvue%E4%B8%8D%E6%94%AF%E6%8C%81%E5%9C%A8template%E5%86%85%E4%BD%BF%E7%94%A8methods%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84HACK%E6%96%B9%E6%A1%88/

        5)不支持Class和Style绑定的classObject和styleObject语法也不支持在组件上使用 Class 与 Style 绑定。

vue中的class和style绑定语法可参考:https://cn.vuejs.org/v2/guide/class-and-style.html

              

posted @ 2020-06-02 20:11  ahaMOMO  阅读(1534)  评论(0编辑  收藏  举报