當前位置:編程學習大全網 - 源碼下載 - uni-app使用Vue.js

uni-app使用Vue.js

說明 :uni-app基於 Vue 2.0 實現,開發者需註意Vue 1.0 -> 2.0 的使用差異,詳見 從 Vue 1.x 遷移 。

uni-app不僅支持應用生命周期和頁面生命周期,還支持 vue 實例的如下生命周期函數:

註意 :不要在選項屬性或回調上使用箭頭函數,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在壹起的,this 不會是如妳做預期的 Vue 實例,且 this.a 或 this.myMethod 也會是未定義的。

幾乎全支持 Vue官方文檔:模板語法 ,下面講下不支持的情況。

(1)不支持純HTML

uni-app的非H5端裏所有的 BOM/DOM 都不能用,也就是說 v-html 指令不能用,可以使用 rich-text組件 代替。或者使用三方組件wxparse,在hello uni-app中有示例。

(2)不支持部分復雜的 JavaScript 渲染表達式

非H5端無法支持復雜的 JavaScript 表達式。目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的還待完善。

(3)不支持過濾器

編譯到 App 和小程序平臺時不支持使用過濾器,可以使用計算屬性(computed)提前計算出數據(如果是數組類型,就提前計算整個數組),用以代替過濾器。

備註 : 自HBuilderX 1.7.1起,在微信小程序平臺支持使用過濾器。

data 必須聲明為返回壹個初始數據對象的函數;否則頁面關閉時,數據不會自動銷毀,再次打開該頁面時,會顯示上次數據。

註意 :在微信小程序端,uni-app 將數據綁定功能委托給Vue,開發者需按Vue 2.0的寫法實現數據綁定,不支持微信小程序的數據綁定寫法,故如下寫法不支持:

需修改為:

支持 Vue官方文檔:計算屬性 。

實現全局變量的方式需要遵循 Vue 單文件模式的開發規範。詳細參考: uni-app全局變量的幾種實現方式 。

非H5端不支持在 template 內使用 methods 中的函數。

備註 : 自HBuilderX 1.7.1起,在微信小程序平臺支持支持在 template 內使用 methods 中的函數。

為節約性能,我們將 Class 與 Style 的表達式通過 compiler 硬編碼到 uni-app 中。

全支持 Vue官方文檔:條件渲染 。

全支持vue列表渲染 Vue官方文檔:列表渲染 。只是需要註意壹點,嵌套列表渲染,必須指定不同的索引!需要填寫 :key="xx" 。

註意 :同級多個 v-for 時 key 的值是不允許重復的,key 的綁定是不支持表達式的,需要按照以下方式處理。

幾乎全支持 Vue官方文檔:事件處理器 。事件映射表如下所示:

註意 :

(1)事件映射表中沒有的原生事件也可以使用,例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊,它的 event type 有 begin 和 end 兩個,導致我們無法在handleProxy 中區分到底是什麽事件,所以妳在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。

(2)為兼容各端,事件需使用 v-on 或 @ 的方式綁定,請勿使用小程序端的bind 和 catch 進行事件綁定。

(3)事件修飾符

(4)若需要禁止蒙版下的頁面滾動,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用來處理 touchmove 的事件,也可以是壹個空函數。

(5)按鍵修飾符:uni-app運行在手機端,沒有鍵盤事件,所以不支持按鍵修飾符。

支持 Vue官方文檔:表單控件綁定 。建議開發過程中直接使用 uni-app:表單組件 。用法示例:

(1)H5 的select 標簽用 picker 組件進行代替

(2)表單元素 radio 用 radio-group 組件進行代替

組件是整個 Vue.js 中最復雜的部分,支持 Vue官方文檔:組件 。有且只能使用單文件組件(.vue 組件)的形式進行支持。其他的諸如:動態組件,自定義 render ,和 <script type="text/x-template"> 字符串模版等非H5端都不支持。詳細的非H5端不支持列表:

(1)暫不支持在組件引用時,在組件上定義 click 等原生事件、v-show(可用 v-if 代替)和 class style 等樣式屬性(例:<card class="class-name"> </card> 樣式是不會生效的)。

Slot(scoped 暫時還沒做支持)

(2)動態組件

(3)異步組件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)組件裏使用 slot 嵌套的其他組件時不支持 v-for

uni-app提供了豐富的 UI組件 ,比如: picker , map 等,需要註意的是原生組件上的事件綁定,需要以 vue 的事件綁定語法來綁定,如 bindchange="eventName" 事件,需要寫成 @change="eventName" 。如:

uni-app 支持配置全局組件,需在 main.js 裏進行全局註冊,註冊後就可在所有頁面裏使用該組件。 註意 :Vue.component 的第壹個參數必須是靜態的字符串。示例:

(1)main.js 裏進行全局註冊

(2)index.vue 裏可直接使用組件

在 uni-app 中以下這些作為保留關鍵字,不可作為組件名。

備註 :除以上列表中的名稱外,標準的 HTML 及 SVG 標簽名也不能作為組件名。

(1) 如何獲取上個頁面傳遞的數據

在 onLoad 裏得到,onLoad 的參數是其他頁面打開當前頁面所傳遞的數據。

(2) 如何設置全局的數據和全局的方法

uni-app內置了 vuex ,在app裏的使用,可參考 hello-uniapp 的 store/index.js 。

(3)如何捕獲 app 的 onError

由於 onError 並不是完整意義的生命周期,所以只提供壹個捕獲錯誤的方法,在 app 的根組件上添加名為 onError 的回調函數即可。如下:

(4)組件屬性設置不生效解決辦法

當重復設置某些屬性為相同的值時,不會同步到view層。 例如:每次將scroll-view組件的scroll-top屬性值設置為0,只有第壹次能順利返回頂部。 這和props的單向數據流特性有關,組件內部scroll-top的實際值改動後,其綁定的屬性並不會壹同變化。解決辦法有兩種(以scroll-view組件為例):

備註 :第二種解決方式在某些組件可能造成抖動,推薦第壹種解決方式。

  • 上一篇:通達信最強三色戰法指標公式
  • 下一篇:頭像太大怎麽縮小?
  • copyright 2024編程學習大全網