mpvue 语法区别

墨蓝 2021-07-25 02:33 268阅读 0赞

支持:
    	vue的状态写法
    	vue的大部分指令
    	vue的js写法
    	小程序的组件和vue混合写法
    	支持计算属性
    	标签上的vue的class和style绑定方式
    	小程序的bind/catch事件写法全变成@
    	嵌套的v-for循环,另一个v-for的索引变量名不能和之前的一样
    	web标签和小程序标签可以混用
    	web表单组件支持,建议用小程序的表单组件,但要将事件的写法等改成vue的方式
    	引入组件为vue方式,注意vue文件不加.vue后缀
    	组件的使用和vue相同
    	echarts
    	
    不支持:
    	v-html指令
    	{
       {中有复杂的表达式,支持简单的运算符}}
    	过滤器
    	组件上绑定vue的class和style绑定方式
    	vue绑定事件后的修饰符
    	键值修饰符
    	路由
    	组件:
    		暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)，因为编译到 wxml，小程序不会生成节点，建议写在内部顶级元素上。
    Slot（scoped 暂时还没做支持）
    	    动态组件
    	    异步组件
    	    inline-template
    	    X-Templates
    	    keep-alive
    	    transition
    	    class
    	    style

#  #

小程序组件

vue事件(左侧)和小程序事件(右侧)的对应:
    
    	click: 'tap',
        touchstart: 'touchstart',
        touchmove: 'touchmove',
        touchcancel: 'touchcancel',
        touchend: 'touchend',
        tap: 'tap',
        longtap: 'longtap',
        input: 'input',
        change: 'change',
        submit: 'submit',
        blur: 'blur',
        focus: 'focus',
        reset: 'reset',
        confirm: 'confirm',
        columnchange: 'columnchange',
        linechange: 'linechange',
        error: 'error',
        scrolltoupper: 'scrolltoupper',
        scrolltolower: 'scrolltolower',
        scroll: 'scroll'