鴻蒙OS應用開發 雙向資料繫結

2021-10-09 20:45:53 字數 1555 閱讀 9607

西江月·太極未分混沌

[元] 王惟一

太極未分混沌,兩儀已非其中。

一陽才動破鴻蒙,造化從茲運用。

水火公升沉南北,木金間隔西東。

略移斗柄指坤宮,盡把五行錯綜。

自angular.js面世後,給前端界帶來mvvm(model-view-viewmodel)的分層架構思想,這也對幾乎所有的主流前端框架影響頗深,angular.js也帶來另乙個流行概念:雙向資料繫結,這個主要體現在表單控制項與其他控制項的內容聯動上,即使除了vue以外的其他流行框架(react、augular2.0 以後)都不再有雙向資料繫結的語法糖,但在實際專案中,所有的前端開發人員都會去實現這一特性。

連通js指令碼變數與標記語言(html、wxml、hml)實現的介面,因此自主實現雙向資料繫結也就成了繞不開的話題

今天就在鴻蒙os應用開發中實現雙向資料繫結,順便填平一些坑,先上核心**。

index.hml**如下:

}}" 文字框值繫結js指令碼變數title -->

index.js**如下:

export default ,oninit() ,chagemodel(val_obj)}
實現的**非常簡單,主要填了4個坑

1. 官方文件給出的事件屬性都沒有on字首,實際使用自己要加上:onclick、onchange等 

2.穿戴裝置不支援input單行文字,這個官方文件沒有提到;

3. console.log和console.info都不能列印物件,要通過json.stringify轉化;

4. onchange事件物件引數valobj的取值屬性是text ,官網給出的物件形式是,這個要通過列印物件才能判斷出來

這些坑都不是很大,有開發經驗的同學基本都能很快填平,也可以閱讀參考官方給出的案例showcase。

官方showcase**:

附上console.log和console.info列印控制台截圖:

雙向資料繫結

2 mvvm 2.總結mvvm 二 vue 2 實現mvvm主要包含兩個方面,資料變化更新檢視,檢視變化更新資料 最近面試時老被問到雙向資料繫結。明明概念看了好幾遍,也總結了好幾次,但是還是被問住 參考文章 很欣賞這篇部落格作者的一句話,再長的路,一步步也能走完。再短的路,不邁開雙腳也無法到達。送給...

雙向資料繫結

雙向資料繫結基於mvvm框架,vue屬於mvvm框架 mvvm m等於model,v等於view,即model改變影響view,view改變影響model 1.雙向資料繫結 必須在使用在表單裡面 使用v model繫結資料,實現動態資料變化 js export default 獲取動態資料 獲取表單...

鴻蒙應用開發學習系列 深入了解鴻蒙開發核心

本文將詳細地講解蒙應用開發的核心 ability和執行緒,帶你深入了解ability的fa feature ability 和 pa particle ability 兩種型別 並學習使用在harmonyos中用於處理執行緒間通訊的eventhandler機制 此外還有的詳細步驟教你使用鴻蒙的開發工...