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

              


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM